VIII) le squelette Zpip et les thèmes

jeudi 21 juin 2012 (), par Vader[FR]

Squelette Zpip

Le squelette générique Zpip

Le squelette Zpip est un plugin qui fournit un squelette générique "par défaut" que l’on peut ensuite adapter.

En cas d’adaptation du squelette, il faudra penser à placer le plugin dans le répertoire plugins, sinon, il est possible de le placer dans le répertoire extensions (Spip 2) ou plugins-dist (Spip 3).

La généricité du squelette permet ensuite de développer (ou tout simplement d’utiliser) des thèmes qui pourront changer non seulement le style mais la structure du site, car un thème peut redéfinir le fichier squelette body.html (et seulement celui-ci).

Zpip est requis par le plugin zen-garden, qui, lui, propose un sélecteur de thèmes, y compris (si toutefois on en fait le choix) sur l’espace public.

Zpip est un modèle de squelette réutilisable, modulaire et disposant d’une galerie de thèmes. Ce modèle de squelette rend l’installation d’un site avec son thème plus facile, et la personnalisation plus efficace.

Zpip-dist est la version de base de ce modèle de squelette, que vous pouvez utiliser telle quelle ou personnaliser et enrichir selon vos besoins.

Vous pouvez tester les thèmes disponibles sans installer Zpip ni spip, en vous rendant sur http://zpip.spip.org. Vous pourrez ensuite les personnaliser, ou définir vous même les thèmes de votre site, sur la base de l’architecture de Zpip.

Dans le squelette Zpip, la structure globale du contenu (ou corps de page, <body>, contenant les blocs principaux de contenu, navigation, extra...) est définie dans le fichier body.html, et seules les boucles de contenus correspondant se trouvent dans les fichiers de squelette situés dans les répertoires contenu, inclure, extra, navigation... une variable d’environnement permettant de choisir le morceau de squelette correspondant.
Ce fichier body est re-déclaré par les thèmes, qui peuvent donc simplement changer les principaux blocs conteneurs, modifier le style des éléments existants, mais pas en créer d’autre (sinon ce seraient des squelettes et non des thèmes).

La structure globale de la page, incluant l’entête (<head>) de la page, est déclaré par le fichier structure.html

Exemple structure.html

[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR">
<head>
<INCLURE{fond=head/#ENV{type},env}>
<!-- <script type="text/javascript" src="prive/javascript/vaderfr.js"/>  -->
<INCLURE{fond=inclure/head}>
</head>
<body class="page_#ENV{type,page}[ #ENV{type,page}_(#ENV{composition,''})]" onload='AuChargement();'>
<INCLURE{fond=body,env}>
#SPIP_CRON
</body>
</html>

Le système est relativement simple :

le fichier body.html (principalement) définit les bloc conteneurs de la page et y inclut les 6 éléments prédéfinis Zpip (entete, barre-nav, contenu, extra, navigation et pied)
le contenu de ces éléments est ensuite détaillé dans les répertoires du même nom.

On peut donc ensuite placer ces éléments "standards" (normalisés) dans les blocs que l’on souhaite. Un bloc par élément, plusieurs éléments dans le même bloc... puis donner un style et positionnement aux blocs.
C’est le principe d’un thème.

Exemple de fichier body.html (d’un thème) :

<div id="entete">
	<div id="logo">
		[(#REM)	HEADER / ENTETE ]
		<INCLURE{fond=inclure/entete,env}>
	</div>    <!-- end div#logo -->
</div>  <!-- end div#header -->
<!-- <div id="nav">
	[(#REM)	MAIN NAVIGATION / NAVIGATION PRINCIPALE ]
	<INCLURE{fond=inclure/barre-nav,env}>
</div> -->  <!-- end div#menu -->
<div id="contenu">
	[(#REM)	CONTENT / CONTENU ]
	<INCLURE{fond=contenu/#ENV{type},env}>
</div>      <!-- end div#content -->
<div id="navigation">
	[(#REM)	SECONDARY NAVIGATION SIDEBAR / Navigation laterale secondaire ]
	<INCLURE{fond=navigation/#ENV{type},env}>    
</div>      <!-- end div#sidebar -->
[(#REM)	EXTRA INFORMATIONS / Informations complementaires]
<INCLURE{fond=extra/#ENV{type},env}>  
<div id="pied">
	[(#REM)	FOOTER / Pied de page ]
	<INCLURE{fond=inclure/pied,env}>
</div>  <!-- end div#footer -->

Ainsi, au lieu de redéfinir les différents éléments communs dans toutes les pages du squelette (comme l’entête, le menu de navigation, le pied de page...), ces éléments ne sont définis qu’une seule fois.

Précision toutefois, dans le squelette "normal" de SPIP il est possible d’utiliser les directives <INCLURE afin de faire référence aux éléments communs, sans les définir à chaque fois.

L’ennui, c’est que là où le bloc "contenu" par exemple, pouvait avoir une classe et donc un style différent selon que l’on soit dans un squelette page sommaire, rubrique, ou article, avec Zpip, le bloc reste le même (car défini une seule fois dans le fichier body.html), seul le contenu change.

Tout comme le squelette traditionnel spip, le squelette Zpip permet de définir des pages squelettes différentes selon les rubriques (rubrique=X ou rubrique-X) ou articles (article=X ou article-X).

Si toute la structure de la page change, les pages squelette seront à la racine du plugin Zpip, sinon dans les répertoires contenu/navigation/extra... en fonction du bloc de la page qui change.

Ainsi, pour faire que la "fausse" rubrique n°1, "Accueil", affiche la page sommaire, il suffit de créer un fichier rubrique=1.html à la racine de zpip, contenant le même code que la page sommaire, <INCLURE{fond=structure}{env}{type=page}{composition=sommaire} />.

Le contenu chargé sera celui de contenu/page-sommaire.html, de même pour le bloc extra (extra/page-sommaire.html), l’entête de la page (head/page-sommaire.html).
Pour le contenu navigation, contenant le menu, il n’y a habituellement qu’une seule page "par défaut" valide pour tous les types de pages : sommaire, article, rubrique, recherche, auteur, mot clé... : dist.html

Exemple navigation/dist.html

[<a rel="start home" href="#URL_SITE_SPIP/" title="<:accueil_site:>">(#LOGO_SITE_SPIP)</a>]

#FORMULAIRE_RECHERCHE

[(#REM) Menu de navigation par rubriques ]
<INCLURE{fond=inclure/rubriques}{id_rubrique}>

<div id="jsornotjs">
	<font color="red">Vous avez désactivé JavaScript. Il est conseillé d'activer JavaScript pour profiter au mieux des <a target="_blank" href="javascript.html"><b>fonctionnalités</b></a> du site</font>
</div>

<div id="w3c" style="padding-left:15px;position:absolute;bottom:0">
	<p>
		<a target="_blank" href="https://validator.w3.org/check?uri=vader-fr.fr"><img height="31" width="88" alt="Valid XHTML 1.0 Transitional" src="valid-xhtml10.png" title="HTML valide"/></a>
		<a target="_blank" href="http://jigsaw.w3.org/css-validator/validator?uri=vader-fr.fr"><img style="border:0;width:88px;height:31px" src="vcss.gif" title="CSS valide" alt="CSS Valide"/></a>
  </p>
  </div>

Comme on peut le voir, le squelette navigation va chercher une page, à savoir inclure/rubriques.html, qui contient la boucle pour le menu des rubriques principales.

[(#REM) Barre de navigation,

[(#REM)
	Barre de navigation, ouverte sur la hierarchie courante

	On fait un plan, et, quand on avance vers une rubrique,
	on l'affiche si son parent est expose ou est la racine du site. ]
<B_rubriques>
<div class="menu rubriques">
	<h2 class="h2"><:rubriques:></h2>
	<ul class="menu-liste">
	<BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>
		<li class="menu-entree">
			<a href="#URL_RUBRIQUE" [ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a>
		</li>
	</BOUCLE_rubriques>

	</ul>
</div>
</B_rubriques>

On pourra aussi trouver dans inclure des morceaux de squelettes pour les blocs "statiques", comme l’entête et le pied de page, ainsi que la partie "fixe" de l’entête (<head>) de la page.

Pour plus d’infos, consulter la doc sur le site SPIP-contrib ici

Thèmes

Les thèmes

Les thèmes sont malheureusement la plupart du temps à tailles fixes. Il est donc possible, voire recommandé, d’éditer les thèmes, surtout pour les adapter aux squelettes Zpip modifiés.

Le outils de développement web de Firefox seront alors utiles pour avoir une bonne visualisation de la structure de la page, des feuilles de style associées, et tester les différents styles possibles.

Les thèmes se mettent dans le dossier themes, a créer à la racine du site.
Dans ce dossier, chaque thème aura son propre répertoire du type theme_nomtheme

Un thème est composé de :

plugin.xml = fichier descriptif du thème pour les utilisateurs
body.html = redéfinition des blocs principaux de la page et inclusion des éléments normalisés Zpip
habillage.css = style et positionnement des blocs et du contenu de la page.
- Astuce : pour plus de facilité il est possible de référer un fichier css de positionnement/tailles commun à tous les thèmes, en mettant dans le fichier habillage.css.
- @import url("../commun.css");
- le fichier commun.css sera donc dans themes/
img = répertoire des images utilisées par le theme
une vignette, au format png, largeur 250px, hauteur maxi 150px, référencée dans le fichier plugin.xml

exemple d’un fichier plugin.xml de thème, dans theme_graindimage2.

<plugin>
	<nom>Grain d'Image 2</nom>
	<auteur>Vader[FR]</auteur>
	<licence>GNU/GPL, utilisation libre</licence>
	<version>1.0</version>
 	<description>Thème modifié du site Grain d'Image, diaporama de page de garde plus grand, fil d'ariane et titres de rubriques retirés...</description>
 	<categorie>theme</categorie>
 	<icon>graindim_sombre.png</icon>
 	<etat>stable</etat>
 	<prefix>theme</prefix>
	<utilise id="Z" version="[1.2.0;]" />
</plugin>

Il y a d’autres balises possibles, dont par exemple :

<necessite id="SPIP" version="[2.0.10;3.0.99]" />, qui ici indique qu’il faut une version de Spip entre 2.0.10 et 3.0.99
<slogan>Mon Zoli theme a moi</slogan>
<lien>http://...</lien> le lien vers le thème à télécharger (spip-contrib, site perso...)

Le nom du thème référencé ici est destiné aux humains, et n’est donc pas forcément le même que le nom du répertoire du thème.

Attention !
Il y a ici des différences entre SPIP 2 et SPIP 3 :

Sous Spip 2, le préfixe est "theme"
Sous Spip 3, le préfixe est le reste du nom du répertoire, sans l’underscore "_" entre les deux.

Par exemple, pour un thème "theme_fedora16_gnome3"
préfixe Spip 2 = theme
préfixe Spip 3 = fedora16_gnome3