Introduction
A chaque fois que j’ai besoin de créer un squelette « from scratch », même très simple, je me tourne vers le framework Z qui, une fois en place, permet facilement d’ajouter des pages, de modifier les styles, voire de modifier le layout d’une page donnée.
Alors pourquoi pas prendre Zpip-dist ? C’est souvent le cas, sauf quand je souhaite un layout fluide comme le layout Gala 23. Et là je bloque pour modifier mon Zpip-dist ou créer un thème qui me conviendrait.
Alors j’ai décidé de reprendre la mécanique depuis le début et de décortiquer chaque concept qui sous-tend le framework Z afin d’être capable de construire mon propre jeu de squelettes Z basé sur les layouts Gala. Et pour éviter de me reposer n fois la même question, j’ai noté toutes les étapes de cette aventure afin d’en faire un mini guide.
Au préalable, il est conseiller de lire l’article Comprendre le framework Z qui fait un tour d’horizon des concepts Z et de leur implémentation dans Z-core. En effet, le point de départ de mon nouveau est bien le framework Z v2 bâti à partir du plugin Z-core.
Création du paquet.xml
Comme je distribue toujours mes squelettes sous forme de plugin pour plus simplicité, je commence par créer son paquet.xml puisque la compatibilité projetée est SPIP ≥ 3. La seule particularité du fichier réside dans le nécessite du plugin Z-core qui est comme indiqué plus haut, la brique de base du modèle Z.
Je choisis le préfixe zgala pour mon plugin et je termine cette opération en créant le fichier de langue lang/paquet-zgala_fr.php pour traduire le nom, le slogan et la description du squelette.
Déclaration des blocs Z
A la lecture du contenu de la balise <body> d’un layout Gala quelconque, on distingue clairement 5 blocs de base qui sont appelés à devenir des blocs Z. Ce sont les blocs header, content, navigation, extra et footer.
A ces blocs il faut rajouter les blocs Z qui composent la balise
c’est-à-dire head et head_js.On déclare donc 7 blocs Z dans le fichiers d’options du squelette, zgala_options.php, que l’on crée à la racine du plugin et on y insère le code PHP suivant :
Création des répertoires
Chaque blocs Z nécessite un dossier à la racine du squelette afin de recevoir un squelette propre à une page ou le squelette générique dist.html. On crée donc les répertoires correspondant, à savoir :
- header/
- content/
- navigation/
- extra/
- footer/
- head/
- head_js/
Comme il va falloir très vite créer le fichier commun du head, inclure/head.html et quelques styles on ajoute aussi les dossiers suivants à la racine du squelette :
- inclure/
- css/
Mise en place du layout unique
Pierre angulaire du framework Z, le layout unique est matérialisé par le fichier body.html à la racine du squelette. Comme je souhaite un layout de type Gala 23, j’y insère le contenu du body.html de ce layout Gala. Il suffit alors remplacer le contenu des balises <div> qui portent les blocs Z par les inclure adéquats et on obtient le contenu suivant :
On notera que j’ai dupliqué le nom des id en classe afin de déclarer plus tard des styles moins spécifiques et plus facilement surchargeables.
Mise en place du head
Le contenu standard de la balise <body> étant défini, on peut s’attaquer au contenu de la balise <head>. Dans un premier temps on se limite à un contenu basique :
- une meta pour le charset et une autre pour le generator ; ces meta sont communes à toutes les pages,
- une feuille de styles unique,
css/zgala.css, pour y intégrer les déclarations du layout Gala 23 et ce pour toutes les pages, - le titre de la page et une meta pour sa description.
Pour les deux premiers points on crée le fichier inclure/head.html et on y intègre les instructions suivantes :
Ensuite on crée la feuille de styles layout.css dans le dossier css/. On y insère tel quel le bloc de style du layout gala 23 ce qui donne :
Enfin, on termine la mise en place du head en créant le fichier par défaut du “pre-head”, à savoir, head/dist.html dans lequel on y intègre un titre et une description générique et le fichier par défaut du “post-head”, head_js/dist.html que l’on laisse vide.
Pour information, le contenu du fichier head/dist.html est le suivant :
Mise en place de la page d’accueil
Le but de cette phase étant d’afficher une page d’accueil reflétant exactement la page du layout Gala 23 il nous reste à créer les blocs Z constitutifs de la balise <body>.
Pour le corps de la page, soit le bloc content, on crée un fichier content/sommaire.html puisque c’est le nom de la page d’accueil en SPIP. Pour les autres blocs, header, footer, navigation et extra, on ne crée que les fichiers par défaut soit les dist.html.
Pour chacun de ces blocs on insère le contenu d’exemple du layout Gala.
En recalculant la page d’accueil du site on reconnait la page classique Gala pour le layout 23 !
Le fichier zip avec toute la structure des dossiers et les fichiers élaborés durant cette étape est annexé à cet article.
RSS 2.0