Le Squelette Zpip

Publié le : 11 novembre 2009 – Dernière modification le 21 décembre 2021 – par Cerdic, Matthieu Marcillaud – 364 commentaires

Español, français
1
2
3
4
5
140 votes

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

[1] Le 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

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

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

168 discussions

  • 1
    dut

    Le site sur lequel comporte deux « univers » distincts.

    J’ai donc besoin d’avoir non pas une barrenav, mais deux distincte au choix en fonction de la section.
    Comment procéder à cela ?

    • AlainF

      Bonjour,

      Dans mon cas : site du village site perso, j’ai eu à résoudre le problème suivant : la barre_nav en deux langues (fr et en) avec secteurs de langues

      Après avoir bloqué sur le plugin menu pour les traductions, je suis revenu sur le fichier /theme/body et j’ai crée une première boucle avec une condition sur un mot clé, dans un groupe de mot clés dont voici une adaptation pour votre cas :
      le groupe de mot (lors de la création du groupe dans « Edition », choisir : appliquer aux rubriques) :
      -  titre : Choix de la barrenav, id_groupe : x
      les mots ( lors de la création du groupe dans « Edition », choisir : un seul mots du groupe) :
      -  titre : barrenav univers 1, id_mot : y
      -  titre : barrenav univers 2, id_mot : z,

      En faisant une copie du fichier body.html dans le dossier /squelettes/ à la racine, (le créer s’il n’existe pas, surtout ne pas modifier le fichier du dossier plugins/auto/Zpip/ qui sera écrasé par la prochaine mise à jour) et en modifiant le code ligne 5 -7 :

      <div id="nav">
	<INCLURE{fond=inclure/barre-nav,env}>
</div>


      Par celui ci-dessous, en modifiant x, y, z par les id correspondants du groupe de mots clés et des mots clés que vous aurez créés précedement comme indiqués ci-dessus.

      <div id="nav">
<BOUCLE_mots_conditions(MOTS) {id_rubrique} {id_groupe=x}>
<BOUCLE_conditon_barrenav(RUBRIQUES) {id_rubrique} {id_mot}>
	<INCLURE{fond=inclure/barre-nav-#ID_MOT,env}>
</BOUCLE_conditon_barrenav>
</BOUCLE_mots_conditions>
<!-- si ce n'est pas une rubrique définie, utiliser la barrenav par défaut ou une de votre choix -->
</B_conditon_barrenav>
	<INCLURE{fond=inclure/barre-nav,env}>
<//B_conditon_barrenav>
</div>

      Et vous créez deux barrenav :
      -  barrenav-x
      -  barrenav-y

      Pour ceux que cela interresserait :

      Dans le cas des deux version française et anglaise de la barrenav, mais en ayant abandonné les secteurs de langues pour d’autres raisons, voici la solution retenue

      deux menus différents, un par langue
      -  la solution :
      <INCLURE{fond=inclure/barre-nav<multi>[en]_en[fr]</multi>,env}>
      avec création de 2 menus :
      -  barrenav pour le français
      -  barrenav_en pour l’anglais

      Ce qui permet de démarrer sur l’anglais dans le cas d’une autre langue, comme le reste du site

      j’ai fais ce message de mémoire, il y a peut-être quelques erreurs, par avance, désolé.

      Bon courage

      PS : modifiez les fichiers des squelettes ZPIP uniquement en en faisant une copie dans un dossier /squelettes/ à la racine du site (à créer s’il n’existe pas) avec bien sur les sous dossiers correspondant : /squelettes/contenu/, /squelettes/inclure, etc..
      *de plus celà vous permettra de travailler avec le plugin SkelEditor

    Répondre à ce message

  • Damien

    Bonjour à tous,

    tout d’abord bravo pour ce plugin.

    J’ai un petit soucis au niveau de la pagination des boucles photos. la mise en page se fait bien mais lorsque je clique sur les 50 photos suivante cela reste sur les 50 premières.

    Avez-vous une solution ?

    Damien

    Répondre à ce message

  • 3
    ju

    Bonjour,

    J’ai remarqué une chose « étrange » en utilisant firebug et page speed.

    Lorsque Zpip est installé, spip génère 2 fichiers css (sans compter le CSS d’impression).
    L’un avec :

    	squelettes-dist/spip_formulaires.css
	plugins/auto/zpip/habillage.css
	page=saisies.css

    et l’autre avec :

    	plugins/auto/zpip/spip_style.css
	page=cfg.css

    Comment faire cesser cette vilaine alerte ?

    • ju

      Je précise : j’ai activé la compression.

    • indie

      C’est pas spécifque à Zpip, la compression des css par spip se fait par type de média (all, screen, print ...). Donc la solution serait d’uniformiser de ce côté là, est-ce sans conséquence, je te laisse juge.

    • ju

      Ok, merci !

      J’y réfléchis...

    Répondre à ce message

  • 1
    Beurt

    Bonjour à tous !

    Je goûte avec beaucoup de plaisir la nouveauté de zpip : Ajax Parallel Loading.

    Mais, je ne peux en profiter avec un site que je développe sur le modèle Z. En effet, pour une page donnée, j’ai une boucle très très lourde (celle qui détermine la liste des articles) et je dois la faire dans le bloc contenu et dans le bloc navigation.

    Pour limiter les temps d’attente du visiteur, j’avais eu l’idée de précalculer la liste des id_article dans un inclure placé dans le body. Dans le body.html j’ai donc :

    [(#SET{tableau_ids_objets,[(#INCLURE{fond=inclure/moteur/selection_des_id}{env})]})]

    et

    <INCLURE{fond=navigation/#ENV{type},env}	{tableau_ids_objets=#GET{tableau_ids_objets}}>
<INCLURE{fond=contenu/#ENV{type},env}{tableau_ids_objets=#GET{tableau_ids_objets}}>

    La liste des id_article est donc calculée une fois dans le body et transmise aux blocs qui en ont besoin. Ça fonctionne très bien à condition ne ne pas s’essayer à l’ajax :

    -  {ajax}/<a href="ajax">/pagination provoquent un reload de toute la page dans le bloc qui aurait dû se recharger (ex : je clique sur un lien de pagination dans le bloc contenu, ce contenu est alors remplacé par tout le body... donc, tout est en double)
    -  APL ne fonctionne pas : les blocs chargés en JS sont blancs !

    Que faire ? Remettre la grosse boucle dans les blocs et multiplier par deux les temps de calculs ? Dans ce cas, je ne suis pas sûr qu’ajax/APL améliorent la navigation puisqu’ils la rallongent considérablement... Ou peut-être y’a-t-il une meilleure solution pour éviter le recalcul de la boucle ?

    Globalement on en revient au problème d’échanger des données à des INCLURE frères, qui est bien sûr impossible.

    • Beurt

      Pour APL le problème semble se résoudre en plaçant l’inclure de précalculs en amont du body.html, en l’occurrence, pour moi c’est directement dans mot.html

    Répondre à ce message

  • Phil

    Bonjour,

    Je viens de m’apercevoir que, pour les rubriques, le descriptif dans le head ne s’affiche pas.

    Si, dans le back-office, on met uniquement un descriptif à la rubrique il ne s’affiche pas. Par contre si l’on met du texte, c’est ce texte qui s’affiche.

    En effet la balise #introduction ne fonctionne que pour les articles.

    Il y a deux solutions :

    -  il faut modifier ce fichier (fichier zpip/head/rubrique.html) et mettre à la place une condition du type [(#DESCRIPTIF|sinon{#Texte|textebrut|couper{150}})]

    -  ou surcharger le fichier ecrire/public/balises.php et modifier la fonction balise_INTRODUCTION_dist($p) en rajoutant après la condition if ($type == ’articles’) le code qui suit :

            if ($type == 'rubriques') {
		$_texte =  champ_sql('descriptif', $p);
	}

    Je sais, ce n’est pas l’idéal.

    Répondre à ce message

  • 1
    claire

    Bonjour je cherche a insérer le formulaire d’inscription, j’utilise le theme surréal
    merci

    • Beurt

       ??? heu ?

      La réponse est donnée très clairement dans l’article ci-dessus après l’intertitre « Pages automatiques ». Il suffit de lire.

    Répondre à ce message

  • Olive

    EDIT :

    Désolé, j’avais tout installé sauf Zpip. ça fonctionne maintenant.

    Répondre à ce message

  • 1
    Benoît

    Bonjour,

    je cherche à ajouter un module de brève (titre, 4 ligens de texte et une image) sous le moteur de recherche (colonne de droite) sur la page d’accueil du site ainsi que sur les pages suivantes en fonction de la navigation.

    Après plusieurs heures de recherche dans le code qu eje ne maitrise pas très bien je ’nai pas trouvé quel est le fichier à modifier.

    Quelqu’un peut il m’indiquer quels sont les fichiers à modifier et les balises à insérer ?

    Merci d’avance.

    Benoît

    • AlainF

      Bjr Benoit,
      si tu repasses par là et pour les autres: :

      soit tu modifies le fichier dist du dossier /plugins/auto /zpip/navigation/ , avec par exemple une boucle brève voir l’article, après la balise #FORMULAIRE_RECHERCHE et tu l’enregistres dans un dossier /navigation/ de ton dossier /thème_xxx/

      soit tu modifies un ou les fichiers du dossier /extra/ (qui s’affiche après la partie « Navigation » ) du dossier /plugins/auto/ zpip/ extra/ correspondants à la page que tu souhaites modifier (article, rubrique, auteur, ...) et tu l’enregistres dans un dossier / extra/ de ton dossier /thème_xxx/

      Surtout penses que les fichiers modifiés dans les dossiers du plugin ZPIP seront ÉCRASÉS lors d’une mise à jour du plugin

      Il existe peut-être une autre méthode, j’utilise celle ci et elle fonctionne

    Répondre à ce message

  • ben

    Bonjour,

    J’ai sans doute une vieille version de ZPIP, mais je me demandais si le lien favicon a été ajouté dans structure.html ?

    Si c’est pas prévu, voici un lien pour ce-lles-ux que ça intéresse :
    http://romy.tetue.net/une-favicon-pour-votre-site

    Bonne journée !

    Répondre à ce message

  • 1
    dut

    J’ai éprouvé le besoin de personnaliser le code de article-resume.html,pour modifier son fonctionnement à un certain endroit du site.

    J’ai copié ce fichier dans le répertoire squelettes/include, dans l’idée de le modifier ensuite et/ou de le renommer pour faire cohabiter les deux versions.

    Je ne comprends pas pourquoi, alors même que je n’ai rien modifié, tous les styles sont déjà chamboulés (perte de mise en valeur de titre etc..). Il semble que n’ai pas compris finement la notion de surcharge telle qu’elle est envisagée par zpip.

    Sauriez-vous me préciser les manips à suivre pour modifier cet include conformément à l’esprit de ZPIP (que je n’ai pas compris, semble t’il)

    • dut

      le paramètre &var_mode=inclure m’a permis de constater que le style était réglé non pas par
      le fichier plugin/ZPIP/inclure/article-resume.html ,
      mais par celui du même nom qui était dans le répertoire du thème actif
      /theme/theme_Truc/inclure/article-resume.html
      (qui était prioritaire d’où mon incompréhension).

      Problème résolu, donc.

    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