Bien démarrer avec Z

5 mai 2011, 30 mai 2011,
par Romy Têtue

Mots-clefs associés à cet article :

« Z » est un mécanisme de fabrication de squelettes SPIP qui me donne bien du fil à retordre… Voici comment dresser ce framework pour bien démarrer un projet de site SPIP, ou comment faire loger un habillage HTML/CSS/JS dans Z.

À ma droite les gabarits HTML avec leurs feuilles de styles, leurs images et leurs scripts, tels que confectionnés sur mesure par votre intégrateur ou tels que trouvés dans une galerie de thèmes sur le Web. À ma gauche, SPIP+Z. Comment marier les deux ?

Quel « Z » installer ?

Première chose : ne pas se tromper de paquet à installer ! Quand on cherche « Zpip » [1] sur SPIP-Contrib, comment deviner auquel se fier parmi tous les articles et leurs paquets zip listés en réponse ? C’est bien le « Squelette Zpip-dist » qu’il nous faut, plus précisément : sous SPIP 2.1, il faut le paquet stable Z 1.7.12 (et pour SPIP 3, ce sera encore autre chose).

Ne vous fiez pas au guide d’installation qui liste trop d’autres trucs à installer, car ce seul paquet suffit effectivement [2].

Libérez le body !

Les intégrateurs ont pris la bonne habitude de placer des sélecteurs CSS parents sur la balise <body> pour varier la mise en page à peu de frais. C’est très bien, mais...

- Cette première version de Z n’est pas prévue pour que la balise <body>, d’ailleurs absente du fichier homonyme, reçoive des sélecteurs CSS personnalisés. Pour cela, il est conseillé d’utiliser le premier bloc de la page, généralement .page, mais ce n’est pas idéal.

- Pour appliquer des classes conditionnelles pour Internet Explorer, mieux vaut s’appuyer sur la balise <html>, si si, comme expliqué ici [*]. Pour cela, copiez le fichier structure.html dans votre dossier « squelettes » et remplacez son contenu par cette tartine :

Ça vous évitera de perdre trop de temps à démêler les crochets et parenthèses de SPIP que les commentaires conditionnels pour IE viennent contrarier... Voyez ces autres solutions, mais faites gaffe à ne pas péter le « var_zajax » !

- Personnalisez ensuite les attributs de la balise <body> selon vos besoins. Je remplace les sélecteurs CSS initiaux par d’autres moins verbeux et qui me sont plus utiles, comme expliqué à ce commentaire, sans oublier d’ajouter « pas_surlignable » qui corrige le surlignement intempestif des termes recherchés, ce qui donne quelque chose comme ça :

<body class="pas_surlignable[ (#ENV{type})][ rubrique(#ID_RUBRIQUE)][ (#ENV{composition})]">

Si besoin était de libérer davantage la balise <body> — par exemple pour y ajouter des sélecteurs spéciaux conditionnés par des boucles de sioux —, retirez-la du fichier structure.html pour la placer dans le fichier body.html (que vous copiez alors dans votre dossier « squelettes »).

Ça y est, nous sommes prêts !

Mettez-y votre style

  1. Installez et activez la nouvelle « base CSS 2 » [*] qui remplace les vieilles feuilles de style de SPIP pour poser une base typographique complète, harmonieuse et paramétrable,
  2. puis déposez votre feuille de style complémentaire, style.css [*], dans le sous-répertoire /css de votre dossier « squelettes », avec les images dans /img, etc. (cf : Arborescence de l’intégration).
  3. Copiez le fichier /inclure/head.html et videz-le, oui complètement, pour y appeler vos feuilles de styles et vos scripts, comme ceci, tout simplement :

Videz les caches pour constater que ça commence à ressembler à quelque chose... Ou plutôt non : ça ne ressemble à rien, parce que la structure HTML ne correspond pas. Bien, continuons !

Découpe de la page standard

Attaquons maintenant la « mise en Z » proprement dite. Il s’agit de repérer ce qui est générique — nous verrons plus loin comment traiter les pages spécifiques (home, etc.).

Étudiez vos intégrations HTML pour en dégager la structure commune, c’est-à-dire les blocs principaux du gabarit de page intérieure le plus courant dans le site. Ça ressemblera certainement à ça :

<div class="page">
        <div class="header">Entête</div>
        <div class="nav">Barre de navigation</div>
        <div class="content">Contenu</div>
        <div class="aside">Menu contextuel</div>
        <div class="footer">Pied de page</div>
</div>

Copiez le fichier body.html dans votre dossier « squelettes » pour y reproduire cette structure, en y ajoutant des « noisettes » SPIP. Ce faisant, distinguez :

  • les blocs variables affichant des contenus en base, comme « content » et peut-être « aside », qui devront avoir leur propre sous-répertoire ;
  • des autres, identiques sur toutes les pages, qui seront rangés ensemble dans le sous-répertoire fourre-tout nommé /inclure [*].

Cette structure exemplaire est courante et simple, mais en pratique le nombre de blocs et leurs noms ne correspondent jamais avec le layout par défaut de « Z ». Pour que cela fonctionne, il faut donc redéfinir les blocs Z dans votre fichier config/mes_options.php, comme ceci [*] :

Edit du 17/11/2011 : sauf s’il a été renommé, il ne faut pas oublier de déclarer le head comme bloc Z ! Attention à l’ordre : le premier bloc déclaré (ici « content ») est nécessairement celui du contenu principal !

Créez maintenant les fichiers d’inclusion correspondants, dans les sous-répertoires homonymes de votre dossier « squelettes ». Ne vous compliquez pas la vie : pour tester, utilisez d’abord des fichiers vierges (ou contenant seulement la balise #SQUELETTE). Pour vous y repérer, visualisez les inclusions en passant la variable &var_mode=inclure à votre URL. Indispensable !

Attention, quand on renomme ainsi les blocs Z, on perd certains avantages, au risque de devoir reprendre tous les fichiers. Fonctionnant différemment, comme des mini dossiers « squelettes », les répertoires /content et /aside doivent contenir chacun deux fichiers par défaut : dist.html et page.html, le premier servant pour générer les pages des objets SPIP (article, rubriques, etc.), le second pour générer les autres pages, comme celle d’accueil. Brrr, ce n’est pas simple ! Voici donc l’arborescence minimale de votre dossier « squelettes » :

/content
        /dist.html
        /page.html
/aside
        /dist.html
        /page.html
/inclure
        /head.html
        /header.html
        /nav.html
        /footer.html
body.html
structure.html

Ça y est, le site fonctionne en Z-SPIP. Il ne reste plus qu’à le construire !

Restaurez l’accès !

Attention, l’accès à l’espace privé de SPIP est pris en charge par Z, qui se mêle de construire la page de login dans le site public, sur le même moule que les autres, ce qui risque de ne plus marcher après notre découpe. Il faut donc restaurer cette page...

Le plus simple est de court-circuiter Z, en créant un fichier login.html à la racine de votre dossier « squelettes », pour y inclure la page de login par défaut de SPIP, comme ceci :

<INCLURE{fond=prive/login}>

Il est temps de saisir quelques contenus — ou d’installer la « base de démarrage » pour aller plus vite.

Construire le site

Découpez l’entête, la barre de nav et le pied de page de vos maquettes HTML et copiez-collez les dans les fichiers correspondants. À partir de maintenant et pour tout le reste du site, il ne reste plus qu’à créer des cœurs de page, dans le sous-répertoire /content de votre dossier « squelettes ».

Copiez-y les 3 fichiers /contenu/article.html, /contenu/rubrique.html et /contenu/page-sommaire.html pour les personnaliser. Reproduisez-y vos structures HTML de cœur de page et ajoutez les boucles SPIP adéquates...

Ça va très vite ressembler au site final. Pour ne pas s’y tromper, vous pouvez signaler ce qui est encore statique et qui reste donc à faire, en affectant la class « todo » : ces blocs seront alors translucides.

La page d’accueil se distingue

La page d’accueil est souvent différente. Elle est généralement ciblée par la classe « .home », qui suffit parfois à la distinguer.

Elle n’est malheureusement pas reconnue par SPIP, ni par Z, qui la traite comme n’importe quelle autre « page ». Pour pallier simplement à cela, copiez le squelette sommaire.html dans votre dossier « squelettes » pour ajouter un argument distinctif « {home=oui} », comme ceci :

<INCLURE{fond=structure}{env}{type=page}{composition=sommaire}{home=oui} />

Récupérez ensuite la valeur n’importe où dans vos noisettes en testant [(#ENV{home}|?{oui,non})].

Pour construire le gabarit spécifique de la home, il faut ensuite utiliser les noisettes page-sommaire.html (oui, le nom des pages est préfixé « page- » dans les sous-répertoires).

Si la structure de page diffère trop du reste du site, faites une découpe sur mesure, dans un fichier body-sommaire.html déposé à la racine de votre dossier « squelettes ». On procédera de même pour toute page bien spéciale, mais d’expérience, cela est très rarement nécessaire.

Mais à quoi ça sert ?

Z est épatant quand il s’agit d’ouvrir rapidement un petit site standard, facile à maintenir, où changer de thème graphique facilement (avec Zen-Garden [2]) sans éditer un fichier. D’un autre point de vue, à l’opposé, le framework qu’il est, ainsi que ses automatismes, avantagent admirablement le développement de SPIP et ses plugins. Mais qu’apporte-t-il au webmestre qui construit son site, qui n’est plus un débutant, mais n’est pas pour autant un développeur aguerri ?

Vos commentaires

  • Le 30 mai 2011 à 09:39, par izo En réponse à : Bien démarrer avec Z

    Pas mal tout ça . Faut que je teste. C’est assez different de ma base de depart à moi (j’utilise pas pétronille) et je bosse peu ou pas html5 pour l’instant :)

  • Le 4 juin 2011 à 11:32, par Jo En réponse à : Bien démarrer avec Z

    C’est vrai que zen garden est décevant : il lui manque l’upload des themes comme STEP

  • Le 10 juin 2011 à 14:24, par Stéphane Deschamps En réponse à : Bien démarrer avec Z

    Mais qu’apporte-t-il au webmestre qui construit son site, qui n’est plus un débutant, mais n’est pas pour autant un développeur aguerri ?

    C’est un peu la question que je me pose depuis que je connais Zpip. J’avoue que je préfère mes squelettes à l’ancienne, à la main. J’ai l’impression que Zpip demande du boulot énorme pour arriver au même résultat, quand on n’est pas dans une « démarche industrielle » comme vous autres qui bossez avec SPIP, où l’investissement est rentabilisé par la suite quand il s’agit de faire N sites en peu de temps.

  • Le 16 avril 2012 à 15:58, par Loraine En réponse à : Bien démarrer avec Z

    Bel article et vrai en plus ! +1 :)

  • Le 3 septembre 2012 à 11:08, par Rwan En réponse à : Bien démarrer avec Z

    Un framework css avec zspip qui fonctionne, voici donc la solution que je cherchais.
    Je pense que c’est la bonne technique pour aller plus vite dans la conception d’un site.
    Mais pourquoi ne pas proposer ce squelette particulier de zspip en téléchargement ?

  • Le 3 octobre 2013 à 02:02, par KesT En réponse à : Bien démarrer avec Z

    Je me sens bien bête devant autant d’aisance. Franchement ! Bravo à toutes et tous pour votre science. Si seulement, je pouvais en profiter ! Je vous avoue que plus je lis, moins je comprends. Jusqu’ici, j’étais à dreamweaver, namoweb editor ou autre. Interface graphique, rien à coder, etc. J’ai décidé de sauter le pas vers SPIP et je me retrouve au milieu d’un océan, très, très, très loin du rivage. Si seulement quelqu’un pouvait m’aider à comprendre sur quel document ou fichier placer ces bouts de code, la différence véritable entre html et css, quel fichier de la distrib modifier dans SPIP3, bref la logique de base de l’affaire. Je ne sais comment je pourrais remercier, mais je remercie d’avance.

  • Le 3 octobre 2013 à 13:49, par Romy Têtue En réponse à : Bien démarrer avec Z

    @KesT : Tu seras plus à l’aise sur un outil proposant une documentation utilisateur qui saura répondre à tes questions, comme DotClear, WordPress, ou même Tumblr.

  • Le 24 février 2014 à 06:55, par SeenThis En réponse à : Bien démarrer avec Z

    Qu’est-ce qu’un framework ? Qu’est ce qu’un minxin ? Faut il choisir LESS ou SASS ? Bootstrap ou Foundation ? Qu’est-ce qui différencie Bourbon, Bourbon Neat et Semantic-UI ? Dois-je continuer avec Z-SPIP ? Passer à SPIP-r ? Pourquoi le soleil, pourquoi la pluie ?

    Je me sens un peu perdu, en ce moment, et c’est assez horripilant...

    Lire la suite, avec tableau comparatif, sur SeenThis

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom