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é dansinclure/
-
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.
Menu de navigation principale
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.
Discussions par date d’activité
168 discussions
Bonjour,
J’ai une apparition étrange, que je pense n’avoir jamais eue (ou jamais vue ?).
J’ai comme base un thème, et un fichier squelettes/perso.css pour changer les points qui en diffèrent.
Or, à chaque chargement apparaît le thème par défaut (couleurs, image du bandeau, etc.).
Merci pour votre aide.
Répondre à ce message
Bonjour,
Je souhaiterais, mettre dans la colonne de gauche, à la place des titres des rubriques, les titres des articles (liés à une rubriques).
Que lorsqu’on clique sur la barre de menu (latérale en haut), les titres des articles dans la colonne de gauche apparaissent.
Dans mon menu (plugin menu) les boutons sont liés à des rubriques.
Merci de m’aider, je débute
Hum, si j’ai bien compris :
- ton menu comporte des noms de rubrique, et quand tu cliques dessus, il te renvoit dans la rubrique.
- tu vois la description de ta rubrique mais pas les articles publiés dans ladite rubrique
Deux questions : tu utilises le thème par défaut ? As tu installé le noiZetier ?
Répondre à ce message
Bonjour,
J’ai réalisé une page automatique et c’est vrai que c’est pratique et que ça va vite. Mais comment je fais ensuite pour en disposer depuis l’interface privée et pour qu’elle apparaisse dans mon menu ?
Par exemple. J’ai dans le dossier contenu : page-contact.html. Je peux l’afficher en tapant dans la barre d’adresse : spip.php ?page=contact. Tout s’affiche bien, car j’ai installé un formulaire qui marche déjà sur un autre site. Mais je ne peux pas demander aux internautes de saisir cette commande dans la barre d’adresse ;-)
D’où ma question : comment rendre ce formulaire accessible, par exemple en l’intégrant dans un article produit depuis l’interface privée ? C’est sûrement une question idiote, mais là je sèche !
Merci d’avance
le plugin menu qui est utilisé par ZPIP permet de faire pointer vers ce type de pages …
Ok, merci. Mais j’ai déjà un menu « traditionnel » qui me donne entière satisfaction ;-) Et cela ne me permet pas, par exemple, d’incorporer ce formulaire à un article...
Oui et pouvoir juste pointer vers la page (grâce au plugin menu ou autre) ne résout pas grand chose !
Je te conseille plutôt de faire un article pour chaque page du site. Pour un tas de bonnes raisons :
- son URL est ré-écrite en homogénéité avec les autres (ouste les affreuses
spip.php?page=contact
!)- elle est rangée quelque part et peut donc être affichée dans les menus de navigation existants sur le site + on peut donc la déplacer
- le rédacteur peut publier/dépublier ladite page à sa guise
- on peut y afficher un contenu éditable, par exemple
#TEXTE
pour la phrase invitant à se servir du formulaire de contact et#PS
pour afficher l’adresse postale- etc.
La page contact est donc un article contenant un formulaire (par exemple formulaire_contact.html) inséré via
<formulaire_contact|id_article=7>
, lui-même éventuellement rangé dans une rubrique « contact » pour apparaître dans la barre de nav, parmi les autres rubriques (ajouter alors « Court-circuit » pour afficher directement l’article).Merci Romy, je suis tout à fait d’accord avec toi. Mais nous sommes ici dans Zpip et la manière que tu prescris va à l’encontre du principe de Zpip. La syntaxe que tu proposes n’est ici pas opérationnelle.
Je cherche donc toujours comment, avec quel petit bout d’écriture, je peux « inviter » ce formulaire dans un article rédigé depuis l’interface privée. Si ce n’est pas possible, c’est une limitation ennuyeuse des possibilités de Zpip.
Dans un squelette, tu peux utiliser
#URL_PAGE{contact}
pour générer ton URL. Et donc, ajouter l’élément qui va bien dans ton menu.Pour ce qui est de créer le lien depuis le texte d’un article, je ne crois pas que nous ayons de raccourcis prévus pour cela, comme on a pour les articles
[->art23]
. Tu peux écrire un inélégant[Contact->?page=contact]
Il reste que pour « inviter un formulaire », c’est bien
<formulaire|nom>
que l’on peut utiliser dans le texte d’un article. Mais tu veux je crois inviter le lien vers la page contenant le formulaire :)@Béat : J’utilise le plugin Court-circuit et le formulaire de ma trousse avec ou sans Z-SPIP. Ce n’est pas contradictoire ;)
@Matthieu : oui, mais
#URL_PAGE{toto}
génère d’affreuses URLs du typespip.php?page=toto
(sauf si on va bidouiller dans le fichier.htaccess
, ce qui est toujours chiant). Et comme tu le souligne, ces pages ne bénéficient pas de raccourcis SPIP (du type[->7]
), ce qui oblige d’écrire[Contact->?page=toto]
, ce qui est traité par SPIP en lien externe, avec classspip_out
, ce qui est faux (je viens de re-vérifier en SPIP 2.1.8). Bref, c’est pas terrible.C’est pour ce genre de raison qu’il est toujours préférable de faire coïncider chaque page du site avec un article SPIP.
Merci à tous de vos réponses ! (Mes questions n’ont pas toujours autant de succès :-) Résultat des courses :
Les 2 possibilités suivantes fonctionnent :
-
#URL_PAGE{contact}
depuis un squelette-
[Contact->?page=contact]
depuis le texte d’un articleMais ce sont des liens qui mènent à la page du formulaire. Ils n’affichent pas le formulaire là où je le voudrais.
Par contre, avec
<formulaire|nom>
c’est bingo ! C’est exactement ce que je cherchais ! Le formulaire s’affiche dans l’article, en toute simplicité, là où j’ai écrit<formulaire|contact>
(mon squelette s’appellepage-contact.html
).En attendant, je venais de mettre au point une bidouille, satisfaisante, mais sans plus :
- Je crée un article Contact (No 12) au moyen du plugin Page Uniques.
- Dans
page-contact.html
je mets une boucle article avec{id_article=12}
puis
<div class='ajax'>#FORMULAIRE_CONTACT</div>
- Je créé une entrée de menu avec le plugin Menu
- Et le tour est (était) joué !
Zpip est vraiment formidable !
Répondre à ce message
Bonjour,
Cela concerne Zpip indirectement mais c’est quand même assez lié : je cherche depuis quelque temps une fonctionnalité ou un outil qui permet d’afficher la structure d’un site, pour visualiser la répartition des éléments d’une page, à quel(s) fichier(s) tel bloc de page est lié etc.
Je me souviens l’avoir entrevu il y a quelque temps mais je ne sais plus si c’est une fonctionnalité propre à Spip par défaut ou si un plugin le permet.
En fait, le but c’est d’avoir un aperçu global de la structure, un peu comme les outils qui affichent la structure html d’un site, et de savoir tout de suite quoi modifier pour tel emplacement, contenu ou aspect de la page affichée.
Entre les nombreux plugins et les jeux de squelette ou les outils complets de type Zpip, c’est un outil plutôt utile pour s’y retrouver me semble-t-il.
J’espère avoir été assez clair.
Merci d’avance en tout cas pour les tuyaux !
c’est pas le ?var_mode=inclure que tu cherche ? ca t’affiche les niveau d’imbrications et les différents fichiers inclus.
C’est exactement ça !
Merci pour la réponse rapide !
Répondre à ce message
Bonjour,
D’abord félicitations pour ce travail ; Zpip, en plus des avantages qu’il apporte, est une belle construction intellectuelle ; encore bravo.
En ce qui me concerne, j’ai un site qu’on pourrait qualifier de « site à layout variable » ; j’ai une présentation à 3 colonnes pour le sommaire, deux pour les rubriques et certaines pages, 1 pour les articles et aussi certaines pages (pour la lecture des articles je veut disposer de la largeur de la fenêtre).
Or Zpip est plutôt conçu pour des sites à layout unique.
J’ai contourné le problème de la façon suivante :
- J’ai créé plusieurs layouts que j’ai nommé : body-1, body-2, body-3
- J’ai introduit dans le fichier strucrure.html un paramètre « layout » ainsi :
(ainsi body-1 est le layout par défaut)
- Dans certains squelettes sommaire.html, rubrique.html, article.html etc. j’ai introduit la valeur du paramètre correspondant au layout désiré.
- Enfin j’ai modifié légèrement la ligne 115 de z-pipelines.php ainsi :
Tout cela a l’air de fonctionner normalement (en local), en particulier la formation automatique de pages.
Ma question est de savoir si ce que j’ai fait est correct et que je ne risque pas d’avoir un soucis (car j’ai un gros site et je ne veux pas prendre de risque)
Merci d’avance pour vos lumières.
Yvon
Par defaut, il est possible de prévoir des layout différents sur certaines page en les nommants
body-nomdelapage
. Ainsibody-sommaire.html
, si il existe, sera automatiquement utilisé pour la page sommaire.Mais sinon ce que tu as mis en place fonctionne également.
Merci Cédric ; ton avis me rassure (j’avais peur d’avoir oublié quelque chose) ; je vais continuer comme ça.
Répondre à ce message
Bonjour,
Bravo pour le boulot sur Zpip.
Je cherche à avoir une boucle dans « extra » commune à toutes les pages. J’ai changé « extra/dist.html » dans le plugin Zpip et/ou dans squelettes/extra/dist.html, rien n’y fait.
Mes plugins sont à jour sur une version récente de spip.
Auriez-vous une idée ? Merci d’avance
Il te faut surcharger dans squelettes/extra/ tous les squelettes zpip déjà définis dans plugins/zpip/extra/, c-à-d non seulement extra/dist.html mais aussi extra/article.html, extra/auteur.html...
Merci pour la réponse,
j’ai essayer. Il faut donc faire une « dist.html » de base pour la création automatique de page, puis surchargé et/ou inclure en fonction des autres pages déjà crées.
ça marche, mais ce n’est aussi simple que prévu ;-)
Répondre à ce message
Bonjour,
Quelle est la dernière version stable officielle du plugin Zpip ?
Le fichier ’zpip.zip’ disponible ici indique 39384 comme n° de version avec un commit du 20/07/2010...
tandis qu’il semble y avoir :
- des modifs plus récentes (01/02/2011)
- des n° de version attachés non pas au squelette-plugin dans son ensemble mais à chacun de ses fichiers (42670 et 44069).
Merci de prendre le temps de m’expliquer.
Répondre à ce message
Bonjour,
j’utilise Zpip sous SPIP 2.1, avec le thème blue-business.
J’ai un problème que vous trouverez sans doute enfantin, mais j’ai beau chercher, je ne trouve pas.
Dans l’espace privé, j’ai uploadé mon logo pour le site, mais celui-ci n’apparait pas dans le site public. Quel fichier dois-je modifier, et comment ??
Je vous remercie ! David
Répondre à ce message
Bonsoir, et bonnes fêtes de fin d’année à toutes et tous,
Voila mon soucis : sur le site des passevolant, qui est un SPIP 2.1.2 [16730], j’ai installé :
- cfg : moteur de configuration version 1.16.0
- SPIP Bonux version 2.2.14
- Le Couteau Suisse version 1.8.29.00
puis :
- Squelettes Z pour SPIP (Zpip) version 1.7.9
- Zen-Garden version 1.1.1
- Compositions version 1.2.2
- Menus version 0.8.3
- SLOGAN version 2.0.2
le tout avec l’option plugins/auto (qui fonctionne vraiment bien).
A partir de là, j’ai bien créé un dossier « themes » à la racine du site, je vois bien l’option Configuration/thèmes dans la partie privée du site, où s’affichent les thèmes Zpip téléchargés (« Colourise » et « z-fusion 1-0 »).
C’est à partir de là que rien ne va plus : si je choisis d’apercevoir un thème, je suis renvoyé sur une nouvelle page où rien n’apparaît que la « dist » classique de Spip. Si je choisis un thème, le changement a lieu dans la partie privée du site (on me prévient que le thème est choisi, etc.) mais si je visite le site public, là encore, c’est la « dist » qui s’affiche. Bref, rien ne marche comme il faut.
Je précise que j’ai essayé de changer « squelettes » en n’importe quoi d’autre (là, je n’ai plus de mise en page du tout), j’ai aussi vidé tous les caches, rien n’y fait.
J’ai écumé les forums de spip-contrib consacrés à Zpip, mais très peu de messages sont consacrés à ce problème, et surtout aucun n’y répond.
J’en viens donc à faire appel à vos lumières, qui sauront sans doute éclairer l’opaque brouillard dans lequel je me trouve.
En vous remerciant par avance...
Merci de noter « résolu » ou d’effacer le message précédent. L’affichage a fini par se faire, en manipulant « squelettes-dit » et en « recalculant » la page, au lieu de simplement rafraîchir l’écran. Ouf ! Pour finir, un grand bravo aux concepteurs de Zpip.
Répondre à ce message
Bravo pour ces squelettes Zpip qui ont beaucoup plu à mes enfants .
J’ai réussi à changer le favicon avec Sarka-Spip ici mais avec Zpip et ses différents thèmes , je ne sais pas où placer mon favicon.ico pour obtenir un favicon personnalisé .
Exemple : Zpip avec Thèmes Greeny , Rock ou Mozaic ---> ou placer le fichier favicon.ico en FTP ?
D’avance merci à ceux qui détiennent la solution et qui prennent le temps de la faire connaître ..
Si personne ne voit ,formulons-ça autrement :
Comment donner une même caractéristique à toutes les pages d’un site sans intégrer le même code sur toutes les pages du squelette ( fastidieux ) ?
Exemple : une ou deux lignes imposant l’usage d’un favicon situé à un endroit donné .
Je ne sais pas si je suis très clair ...
C’est dans le fichier
inclure/head.html
qu’il faut insérer tes 2 lignes concernant la favicon.Merci , j’essaye ça dès ce soir .
Bon et ben ça marche toujours pas .
j’ai placé ces lignes :
dans le fichier head.html situé dans /plugins/auto/zpip/inclure
et j’ai placé le favicon.ico dans le dossier /plugins/auto/zpip/img .
Et ça donne ce que l’on peut voir ici : SITE DE MA FILLE.
C’est quoi ce « lulie/ » en début du href ?
Mais oui , damned , j’ai oublié le « http:// »
Je devrais donc ajouter :
<link rel="icon" type="image/ico" href="http://lulie.cilal.net/plugins/auto/zpip/img/favicon.ico" />
DANS LE HEAD.HTML ,
ÇA MARCHE !!!
Hello
Si tu as installé le fichier .htaccess de spip, il te suffit de placer ton fichier favicon.ico dans ton dossier squelettes. Ca evite toutes ces modifs
J’ai souvent entendu parler de ce fichier .htaccess Il va falloir que je me renseigne .
J’en aurais un sur ce genre de site ou sur celui-là ?
Je creuse ça et merci du tuyau Yffic .
hello
Spip fournit un fichier htaccess.txt à la racine. Par exemple pour pouvoir utiliser les url propres il faut l’installer, c’est à dire tout simplement le renommer en .htaccess
Ok compris pour renommer , sinon , c’est quoi des url propres ?
Aide toi et...
Cherche « spip url propres » dans ton ami Google
Ouais , je ne vois pas très bien mais qu’importe ...
j’ai vaguement regardé ici .
Je me demande si mes urls sont propres à présent !
Je ne suis vraiment pas contre le fait de me poser beaucoup de questions dans l’absolu , mais là je crois que je vais laisser tomber je retire dons cette question sur les « url propres » .
Merci Yffic .
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 :
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.
Suivre les commentaires : |