Le Squelette Zpip

Ce squelette n’est plus maintenu, il est remplacé par SPIPr-dist

Zpip [1] est un modèle de squelette réutilisable, modulaire et disposant d’une galerie de thèmes. [2] 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.

Installer Zpip

Zpip se charge et s’installe comme un plugin. Pour installer Zpip et jouer avec sans plus attendre, il suffit de suivre le guide d’installation pas à pas.

Une fois installé, vous pourrez vous faire plaisir en téléchargeant des thèmes déjà existants, et revenir lire la suite de cet article au moment de mettre un peu les mains dedans pour le personnaliser !

Le projet Zpip

Plus qu’un squelette, Zpip est un exemple d’un système de squelette qui met en application les idées exposées dans Modèle de squelette réutilisable. Il propose une organisation des squelettes visant à le rendre :

  • habillable par des thèmes indépendants du squelette
  • maintenable dans le temps, par une duplication minimale du code
  • rapidement déployable, au prix d’un petit apprentissage initial sur son organisation

Zpip s’adresse aussi bien aux débutants qui veulent profiter d’une galerie de thèmes prêts à l’emploi, qu’aux webmestres avancés pour qui il propose un fonctionnement et des mécanismes productifs.

Toute l’organisation et le fonctionnement de Zpip peuvent être réutilisés pour construire de nouveaux squelettes qui bénéficieront des mêmes avantages.

Organisation des fichiers

Zpip redéfinit tous les squelettes par défaut de la dist de SPIP, à la racine de son dossier : 404.html, article.html, auteur.html, backend.html, breve.html, forum.html, login.html, mot.html, page.html, plan.html, recherche.html, rubrique.html, site.html, sommaire.html, et spip_pass.html.

À l’exception du flux RSS (backend.html), tous ces squelettes sont réécrits de façon minimale pour inclure structure.html qui produira toutes les pages. Vous pouvez donc oublier tous ces squelettes issus de la dist : vous n’aurez plus besoin de les manipuler, sauf cas exceptionnel.

Nous voici donc avec deux squelettes supplémentaires à la racine : structure.html et body.html.
Le premier, structure.html, pose la structure minimale de la page HTML, inclut les squelettes chargés de produire le head, puis le body.html qui définit le layout unique et sur lequel nous revenons ci-dessous plus en détail.

Zpip contient de plus six sous dossiers.
Deux sont génériques :

  • img/ qui contient toutes les images de décoration
  • inclure/ qui contient les squelettes communs et partagés entre les différentes pages du site.

Les quatre autres dossiers déclinent des morceaux de la page html en fonction de la page du site sur laquelle on se trouve :

  • head/ qui contient les squelettes de la section <head> personnalisée pour chaque page, lorsque c’est nécessaire, qui s’ajoute à un <head> commun situé dans inclure/
  • contenu/ dans lesquels seront mis tous les squelettes produisant le contenu principal de chaque page
  • extra/ dans lesquels seront mis tous les squelettes produisant les informations extra contextuelles pour chaque page
  • navigation/ dans lesquels seront mis tous les squelettes produisant les informations de navigation propres à chaque page

Layout Unique

Zpip est donc organisé autour d’un layout unique décrit par body.html qui intègre 6 entités logiques de contenu et les structure à sa guise dans le HTML.

Les 6 entités sont nommées selon la convention ci-dessous, eu égard à leur contenu informationnel et sans préjuger de la dénomination et de la structure englobante définie par le thème :

  • entête fournit la présentation de la page et d’identité du site
  • barre-nav constitue la navigation principale du site ; peut être vide
  • contenu contient l’information principale de la page, déclinée par type de page
  • navigation fournit des éléments de navigation secondaire, déclinés par type de page
  • extra fournit des éléments d’information connexes contextuels, déclinés par type de page
  • pied fournit des éléments de repérages et de rappels secondaires

Le layout par défaut de Zpip est simple :

<div id="page">
	<div id="entete">
		<INCLURE{fond=inclure/entete,env}>
	</div>
	<div id="nav">
		<INCLURE{fond=inclure/barre-nav,env}>
	</div>
	
	<div id="conteneur">	
		<div id="contenu">
			<INCLURE{fond=contenu/#ENV{type},env}>
		</div>

		<div id="navigation">
			<INCLURE{fond=navigation/#ENV{type},env}>
			<INCLURE{fond=extra/#ENV{type},env}>
		</div>
	</div>

	<div id="pied">
		<INCLURE{fond=inclure/pied,env}>
	</div>
</div>

Nous voyons que ce layout ne gère qu’une unique colonne #navigation, laquelle intègre le contenu des blocs de navigation et extra.

Pages automatiques

Zpip intègre un mécanisme de génération automatique des pages complètes à partir d’un seul squelette de contenu.

Par exemple, il suffit d’écrire un squelette minimal contenu/page-inscription.html contenant seulement :

#FORMULAIRE_INSCRIPTION

pour que la page complète spip.php?page=inscription soit disponible.

Pour réaliser cela Zpip utilise les éléments communs inclure/entete.html, inclure/barre-nav.html et inclure/pied.html. Pour les éléments de navigation et d’extra, Zpip utilise par défaut les squelettes navigation/dist.html et extra/dist.html si aucun squelette navigation/page-inscription.html ou extra/page-inscription.html n’est défini.

Ce mécanisme de pages automatiques permet d’ajouter, aussi rapidement que facilement, des pages spécifiques, en cohérence immédiate avec le reste du site. De même, il permet à des plugins de fournir des pages dédiées, utilisables sur tous les sites quelle qu’en soit leur structure, laquelle sera automatiquement fournie par Zpip.

Par exemple, un plugin de newsletter peut facilement fournir un squelette contenu/page-abonnement.html (permettant à l’abonné de gérer son abonnement), qui pourra être utilisé tel quel par tous les sites reposant sur Zpip.

Zpip permet de gérer votre navigation principale directement dans l’espace privé à l’aide du plugin Menus. Il suffit de créer un menu avec l’identifiant barrenav pour qu’il soit automatiquement inséré à la place de la navigation principale, sans modifications de fichiers.

Compositions

Zpip est naturellement conçu pour fonctionner avec le plugin Compositions qui permet d’utiliser plusieurs types de composition par objet, et de décliner les cœurs de page en fonction des besoins.

Thèmes

Grâce à sa structure, Zpip est utilisable directement avec une galerie de thèmes interchangeables.

Pour faciliter l’écriture de nouveaux thèmes pour Zpip, un certain nombre de conventions ont été documentées qui permettent de définir un socle commun.

Les thèmes qui respectent ces conventions pourront être utilisés indifféremment avec Zpip ou tout autre squelette reposant sur la même structure et les mêmes conventions.

Notes

[1Le nom de ce squelette ne doit rien à l’infâme Zorglub, mais plutôt à une comédie musicale futuriste imaginant le futur de SPIP en 2050

[2Concrètement, Zpip est issu d’une fusion des projets Zesty et SPIP-Zen.

Discussion

168 discussions

  • Pour avoir le plugin menu qui gère les langues, il faut mettre les langues en secteur (un oubli d’article et ça ne marche pas).

    Le petit problème par la suite, c’est que dans la sidebar de gauche, les rubriques indique « Français », (Si c’est le nom donné au secteur.) alors que ce sont plutôt les sous rubriques de la langue qui sont intéressantes à voir.

    Y a t’il une possibilité pour mettre dans le code, un truc genre : Si c’est multilingue, montrer les sous rubriques dans la sidebar, sinon montrer les rubriques ?

    Répondre à ce message

  • Pour avoir les derniers articles de la page « sommaire » dans la langue sélectionnée.

    Dans zpip/contenu/page-sommaire :

    Remplacer

    <BOUCLE_articles(ARTICLES) {!par date} {pagination 5}>

    par

    <BOUCLE_articles(ARTICLES) {!par date} {pagination 5}{lang?}>

    Répondre à ce message

  • Ok merci, bon courage :)
    Je vais essayer de voir ça avec du php (dans mon plugin). À la limite, si c’est pas trop crade, je vous montrerais le résultat.

    Que vouliez vous dire par « Inutile de modifier le squelette donc. » Comment faire pour modifier des choses sans toucher au squelette ? (plugin compositions peut être ?)

    Répondre à ce message

  • @ Cedric Morin :

    Merci j’avais confondu la fonction « chapo » avec « descriptif ».

    Heureusement qu’il y a un SAD avec des gens plus compétents ;)

    Répondre à ce message

  • 1

    Bonjour,

    J’aimerais ajouter des éléments sur mes pages Zpip mais sans toucher aux squelettes Z ni au thème.

    Par exemple, comment écrire un plugin qui ajoute un bloc x dans la tête de page et sans avoir à l’ajouter dans le layout ni modifier chaque thème ?

    Merci

    • Ce type de besoin n’est pas encore pris en charge par l’architecture proposée dans Zpip. C’est l’étape d’après.

    Répondre à ce message

  • 1

    @ Matthieu Marcillaud : Merci, c’est super utile à savoir !

    Sinon, autre chose, pour voir la description de l’article dans les rubriques et en accueil, quant il y a un chapeau. (Je trouve ça super pratique).

    Dans zpip/inclure/article-resume

    Remplacer

    [<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]

    Par

    <div class="#EDIT{intro} introduction entry-content">[(#CHAPO|sinon{#INTRODUCTION})]</div>

    • Ce que tu décris et demande correspond exactement au fonctionnement de la balise #INTRODUCTION avec prise en compte du #DESCRIPTIF : si il y a un descriptif, on l’utilise comme introduction, sinon, on prend le début de chapo+texte.

      Inutile de modifier le squelette donc. Et dans le pire des cas, si ton contenu est formaté autour du chapo et non du descriptif, le mieux est de redefinir la balise introduction pour prendre le chapo.

    Répondre à ce message

  • 1

    Pour avoir le plan du site en multilingue sans numéro,

    Dans zpip/contenu/page/plan

    Remplacer

    #TITRE

    Par

    [(#TITRE|supprimer_numero)]

    et mettre {lang} dans les boucles

    Pour le fil d’ariane, mettre les « supprimer_numero » dans les fichiers du dossier « contenu » quand il y a un fil d’ariane (je fais pas le détail...)

    Répondre à ce message

  • Pour enlever numéro d’article dans la rubrique

    Dans /zpip/inclure/article-resume

    Remplacer

    <h3 class="h3 entry-title"><a href="#URL_ARTICLE" rel="bookmark">[(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}||image_reduire{150,100})]TITRE</a></h3>

    Par

    <h3 class="h3 entry-title"><a href="#URL_ARTICLE" rel="bookmark">[(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}||image_reduire{150,100})][(#TITRE|supprimer_numero)]</a></h3>

    Pour enlever numéro d’article dans l’article

    Dans /zpip/contenu/article :

    Remplacer

    <h1 class="h1 #EDIT{titre}">#TITRE</h1>

    Par

    <h1 class="h1 #EDIT{titre}">[(#TITRE|supprimer_numero)]</h1>

    Pour enlever numéro de rubrique dans la rubrique

    Dans /zpip/contenu/rubrique :

    Remplacer

    <h1 class="h1 #EDIT{titre}">#TITRE</h1>

    Par

    <h1 class="h1 #EDIT{titre}">[(#TITRE|supprimer_numero)]</h1>

    Pour enlever numéro de l’article en onglet dans l’article

    Dans /zpip/head/article :

    Remplacer

    <title>[(#TITRE|textebrut) - ][(#NOM_SITE_SPIP|textebrut)]</title>

    Par

    <title>[(#TITRE|textebrut|supprimer_numero) - ][(#NOM_SITE_SPIP|textebrut)]</title>

    Pour enlever numéro de la rubrique en onglet dans la rubrique

    Dans /zpip/head/rubrique :

    Remplacer

    <title>[(#TITRE|textebrut) - ][(#NOM_SITE_SPIP|textebrut)]</title>

    Par

    <title>[(#TITRE|textebrut|supprimer_numero) - ][(#NOM_SITE_SPIP|textebrut)]</title>

    Pour enlever numéro des articles dans « Dans la même rubrique »

    Dans /zpip/extra/article :

    Remplacer

    <a href="#URL_ARTICLE"[ class="(#EXPOSE)"]>#TITRE</a>

    Par

    <a href="#URL_ARTICLE"[ class="(#EXPOSE)"]>[(#TITRE|supprimer_numero)]</a>

    Et

    Remplacer

    <a href="#URL_MOT" rel="tag">#TITRE</a>

    Par

    <a href="#URL_MOT" rel="tag">[(#TITRE|supprimer_numero)]</a>

    Répondre à ce message

  • Désolé pour le dessin, je croyais que c’était l’avatar ;)

    Tant qu’à faire, je vais décrire les points que j’essaye de modifier.
    Merci de faire signe si vous savez comment faire.

    Donc :
    -  Voir le Chapeau quand il existe sur l’accueil et les rubriques.
    -  Enlever les numéros qui servent à placer les articles/rubriques
    -  Avoir la fonction <multi> qui fonctionne pour le plugin « slogan »
    -  Trier par langue dans les rubriques/sous rubriques

    Et pis c’est tout pour l’instant...

    Répondre à ce message

  • Merci aux développeurs, support... Zpip est exactement ce que je cherchais !

    Je le passe en multilingue et rencontre quelques difficultés, donc, je posterais ici le avancées au fur et à mesure de mes trouvailles ;)

    Pour avoir le menu dans la langue sélectionnée et les numéros qui disparaissent :

    Dans zpip/inclure/rubrique.html :

    Remplacer
    <BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>

    Par

    <BOUCLE_rubriques(RUBRIQUES) {racine}{lang} {par num titre, titre}>

    Remplacer
    <a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a>

    Par

    <a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|couper{80}|supprimer_numero)]</a>

    Même topo pour la « BOUCLE_sous_rubriques »

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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 champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom