Quelles solutions pour paramétrer le layout ?

La layout du squelette est par définition commun à l’ensemble des pages. Les styles associés doivent donc être inclus dans le fichier head commun à savoir, inclure/head.html. Or, nous avons vu que ce fichier, pour des raisons de performance ne reçoit pas l’environnement. Il est donc exclu d’utiliser un paramètre url pour choisir le layout.

Le framework Z permet la création de thèmes. Un thème peut recevoir des styles et un body spécifique si besoin. C’est donc une première solution que nous allons étudier.

Si le fichier head commun ne reçoit pas l’environnement il est quand même possible de le paramétrer en utilisant de la configuration propre au squelette et stockée dans une meta spécifique. C’est une deuxième solution que nous envisagerons par la suite.

Des thèmes pour chaque layout

En premier lieu on crée un dossier themes/ à la racine du site et un sous-dossier gala24/ qui va accueillir notre thème Zgala. J’ai choisi un thème équivalent au layout 23 mais avec les colonnes navigation et extra à gauche.

On commence par créer le paquet.xml qui va permettre de décrire le thème et permettre si besoin d’installer le thème comme un plugin. Le paquet.xml doit contenir les éléments habituels de la balise <paquet> comme le préfixe, la version, la compatibilité SPIP, le logo et la catégorie. Certains de ces éléments sont contraints, à savoir :

• le préfixe doit commencer par theme_ ;
• le logo doit s’appeler vignette et être un gif, un jpeg ou un png positionné à la racine du thème ;
• et la catégorie doit contenir la valeur prédéfinie theme.
  Pour compléter le paquet.xml on choisit d’ajouter son nom, les auteurs, une licence et une balise <utilise> qui va permettre de dire à Zen-Garden que le thème est compatible avec le squelette Zgala. Il est possible aussi d’ajouter un slogan et une description en utilisant des items de langue comme pour tout plugin.

On ajoute à la racine le logo du thème que l’on récupère sur la page des layouts Gala http://blog.html.it/layoutgala/inde....

Pour changer le layout Gala 23 en 24 il suffit, en l’état du squelette Zgala, de remplacer les styles inclus dans le fichier css/zgala.css. On crée donc dans le dossier css/ du thème un fichier zgala.css dans lequel on insère les styles du layout Gala 24.

Pour terminer, on ajoute un define dans le fichier d’options du squelette Zgala pour indiquer à Zen-Garden de toujours filtrer les thèmes compatibles à Zgala quand celui-ci est actif.

En se rendant sur la page de Zen-Gargen dans l’espace privé on voit une galerie de thèmes - réduite à un thème - avec la petite vignette du layout Gala 24. En cliquant sur Apercevoir, on affiche la page sommaire avec le layout Gala 24 qui remplace le layout 23 utilisé par défaut. On peut aussi activer le switcher de thèmes dans le public et obtenir ainsi sur la page sommaire une liste des thèmes en haut à gauche de la page.

L’utilisation des thèmes pour changer le layout Gala est donc une solution qui fonctionne parfaitement. On pourrait créer 40 thèmes simplement pour Zgala, un pour chaque layout Gala existant.
Maintenant, il est un peu fastidieux de créer un thème, à savoir, une vignette, un paquet.xml et un fichier de langue uniquement pour changer quelques styles essentiellement dédiés à la structuration des pages. De plus, en utilisant un thème pour changer le layout, il n’est plus possible d’utiliser un thème pour modifier les couleurs ou autres décorations du squelette ce qui est l’objectif premier d’un thème.

Une configuration du layout

L’idée est de considérer que le layout est un élément stable du squelette et qu’il faut laisser les couleurs et autres décorations aux thèmes. Il nous reste donc la configuration de plugin pour introduire un choix de layout.

Dans un premier temps on récupère l’archive de tous les layouts Gala (voir les pièces jointes de cet article). Comme lors de l’étape 1, on extrait de chaque fichier de layout uniquement la partie des styles que l’on conserve dans un fichier nommé layout_galann.css où nn représente le numéro du layout de 01 à 40. Tous les fichiers ainsi créés sont stockés dans le dossier css/layouts/ du squelette.

Pour initialiser une configuration on va créer un formulaire de configuration simpliste qui nous autorisera à saisir un numéro de 1 à 40 identifiant le layout à utiliser. On pourra plus tard améliorer la présentation pour simuler une galerie de layouts plus visuelle. Je ne vais pas m’attarder sur la construction du formulaire mais il nécessite de créer les fichiers suivants :

• prive/squelettes/contenu/configurer_zgala.html, pour matérialiser la page de configuration ;
• les fichiers formulaires/configurer_zgala.html et formulaires/configurer_zgala.php pour construire le formulaire sachant que le fichier PHP ne sert qu’à contrôler la valeur de la saisie entre 1 et 40 ;
• le fichier de langue lang/zgala_fr.php pour y insérer les quelques items de langue nécessaires.

Il est maintenant possible d’utiliser la configuration du layout dans l’appel du fichier de CSS dans le head commun. L’inclusion du fichier zgala.css est remplacé par :

On notera le padding à deux caractères avec le caractère « 0 » pour constituer le nom exact du fichier de layout.

A ce stade il ne reste plus qu’à supprimer le fichier css/zgala.css qui est devenu obsolète et à conclure l’éatpe en passant le plugin en version 0.2.0. Comme pour l’étape 1, le zip du squelette est fourni en pièce jointe de même que celui du thème Gala 24.

Pour finir, rendez vous sur la page de configuration du squelette, choisissez un layout différent de 23, par exemple, le 7 qui est en 3 colonnes fixes et affichez la page sommaire en la recalculant (attention, le thème 24 défini au début de l’article ne doit pas être encore actif).