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 un site tournant sous zpip depuis plusieurs mois auquel on souhaite ajouter une partie spécifique dont on changera l’habillage afin de la différencier du site standard. Cette nouvelle partie du site est à intégrer dans le site de base (contrainte réseau), je ne créerai pas de site supplémentaire ou d’installation supplémentaire. Les éléments graphiques différenciés sont principalement des images de fond, police et couleurs pas la mise en page, le menu principal etc.
Ainsi, je souhaiterai savoir si il y est possible d’avoir plusieurs thèmes pour un même site, et qu’elle est la méthode à adopter pour appeler le thème qui ne soit pas par défaut..
Cordialement, Aurélien.
Bonjour,
Dans zpip 2 (peut être aussi dans la première version mais je ne l’utilise pas), il y a une balise SI_PAGE, que tu peut peut-être utiliser pour faire ce que tu souhaite et chargeant conditionnellement une feuille de style en fonction de l’environnement dans lequel tu te trouve.
Zpip accepte aussi le système de squelettes par rubriques, tu peut donc dans chaque dossiers des blocs Z dupliquer ton squelette rubrique en rubrique-xx et modifier ce que tu désire. Par exemple dans /head/rubrique-5.html
voila, c’est une idée, si ça peut aider ;-) Bon courrage
Merci pour ta réponse,
J’avais vu la 2e solution mais je pense qu’il va falloir créer pas mal de classes, y associer les styles modifiables et adapter les appels de classe dans les squelettes ce qui s’annonce assez fastidieux... (solution que je choisirai si je ne comprends pas comment faire autrement)
par contre je suis intéressé par ta première proposition, mais je ne vois pas comment l’appel des feuilles de styles est chargé sous zpip, j’ai bien un dossier head dans le plugin z mais pas une ligne concernant les feuilles de styles du coup je ne sais pas comment utiliser cette balise SI_PAGE
Cordialement.
Dans Zpip 2, les feuilles de style sont chargées par /inclure/head.html.
Un exemple d’utilisation de #SI_PAGE :
ici si c’est la page sommaire j’applique une classe blueprint, sinon une autre , ça me permet de changer le nombre de colonne de ma grille sur le sommaire seulement, et de ne pas afficher les extras.
Certains diront que c’est bidouille, que c’est pas comme ça qu’il faut faire , très certainement : mais pour moi ça marche et ça me suffit pour faire ce que je veux ;-) donc je me suis pas posé plus de questions.
par rapport à ton cas, je ne sais pas si ça va te sauver, car tout les enfant de la rubrique doivent êtres pris en compte, et la on ne test que la page (sommaire,rubrique, article), donc a mon avis j’opterais quand même pour la solution du squelette par rubrique... a voir.
Bonnes continuations et bon courage ;-)
Hello,
nul besoin d’utiliser
#SI_PAGE
pour inclure des CSS spécifiques à une page : chaque page du site comporte une classepage_xxx
sur<body>
(v1) ou<html>
(v2). Il est donc possible de cibler certaines pages du sites en CSS uniquement en prefixant le selecteur de.page_xxx
.Si il s’agit de styler une partie du site sur la base du rubriquage (rubriques, branche, secteur), le mieux est alors de simplement poser une classe distinctive sur un conteneur de la page quand on est dans la bonne rubrique/banche/secteur et de s’en servir dans la feuille de style pour cibler ce cas là.
Enfin, si il s’agit de styler différement en fonction du nom de domaine utilisé pour accèder au site, alors le mieux est de différencier le dossier squelette en fonction du domaine (le plugin multidomaines permets de faire cela).
En conclusion, tout un panel de solution en fonction à adapter en fonction de ton cas précis.
Merci pour vos post, j’ai matière à réflexion, pour ceux qui lisent en diagonale, 4 solutions pour gérer une mise en page spécifique avec zpip (ou sans, finalement) :
- squelettes spécifiques à une rubrique(article etc), via la gestion de squelette de type rubrique-xx, (article-xx etc)
- spécification de l’habillage CSS particulier à une page via la classe .page-xxx
- utilisation du plugin multidomaines (cf le plugin)
- l’astuce avec SI_PAGE (cf post précédent) bidouille qui peut rendre des services sur des delta légers
En tout cas merci pour la rapidité des réponses, ca va me permettre d’explorer de nouvelles pistes sur spip... et répondre au cas à résoudre
Résolu !
Répondre à ce message
Bonjour,
Je souhaiterai que le squelette article_resume.html, en plus d’afficher les articles de la rubrique en cours affiche aussi les articles des sous-rubriques.
Malgré mes essais dans la boucle je n’y arrive point.
Voici la boucle élaguée que j’utilise, :
Merci à vous
Bonjour à tous,
La solution est le critère
{branche}
à la place de{id_rubrique}
dans la boucle _article du fichier contenu/rubrique.html (d’où est appelé article_resume.html via #INCLURE) :<BOUCLE_articles(ARTICLES) {branche} {!par date} >
Merci brain_damage !
Répondre à ce message
Bonjour,
une fois les thèmes installés et fonctionnant, où trouver les fichiers, sommaire, article, etc. pour finaliser la mise en page, les couleurs, etc.
SPIP, version 3.04
Merci de votre aide.
Bonsoir
Utilise squeleditor pour faire ça.
Super, tout y est !
Merci pour l’aide !
Répondre à ce message
Bonjour,
Je me pose une question toute bête concernant Zpip. Est-ce qu’il est plus conseillé d’utiliser Zpip pour la conception d’un site ou bien créer ses propres squelettes ? Zpip va-t-il devenir LE système de conception et gestion des pages d’un site SPIP ?
Merci d’avance pour vos réponses.
Bonjour
Oui, à mon avis je pense que Z va prendre place de plus en plus sur les sites garce à ces thèmes notamment.
Répondre à ce message
Ma config :
SPIP 3.0.1
ZPIP_distV1.0
et quelques autres pluggins.
Mon problème :
J’essaie de faire défiler plusieurs brèves les unes après les autres
sur la même ligne.
Chaque brève à son propre lien vers le texte complet de la brève.
J’ai choisi de n’afficher que les 5 plus récentes brèves.
Comme vous pouvez voir, la construction des brèves les unes
derrière les autres avec leur ancres href ainsi que le défilement
fonctionne.
Mon problème c’est que je n’arrive pas à régler la vitesse parce
que je n’arrive pas à modifier la largeur de la div de classe
« BrevesFilantes ».
Je fixe dans le CSS cette largeur par défaut à 1500px et j’arrive a
en calculer une taille plus ajusté : c’est la variable
« longueurpixel ».
Mais, et c’est là mon problème, je n’arrive pas à assigner cette
valeur à la largeur de la div « BrevesFilantes ».
Je vous ai mis mon code plus bas.
Comme vous pouvez voir j’ai fais des essais :
1. J’ai utilisé la balise GET directement dans la boucle : voir
ligne 19 dans la partie html.
Cela ne fonctionne pas. La largeur de la div « BrevesFilantes »
reste à sa valeur initiale.
J’ai même essayé dans cet essai de mettre l’attribut « width »
avant l’attribut « class ».
Mais le résultat est le même.
2. J’ai essayé par un script : voir lignes 15 à 19 dans la partie
html.
La ligne 16 n’était pas commenté et la ligne 19 l’était.
Cela ne fonctionne pas mieux. La largeur ne change pas.
3. J’ai essayé par un autre script : lignes 15 à 19 dans la partie
html.
La ligne 19 n’était pas commenté et la ligne 16 l’était.
Cette fois, la ligne du div est dans le HTML et le script écrit dans
l’attribut « width ».
Mais la largeur ne change pas.
J’utilise Firefox. J’y ai installé le pluggin de debug. Cela me permet,
entre autres, de voir le code source et le code généré.
Et, oh surprise, à la fois dans le code source et dans le code
généré, la ligne apparait bien comme elle devrait :
Et du coup, je ne sais pas où chercher la solution puisque le code
semble bon ! ! ! !
Je ne suis pas un expert, ni en js, ni en php, ni en html, ni en
SPIP, ni en ZPIP.
J’ai quand même pensé à vider le cache (le cache page de SPIP, le
cache image de SPIP et le cache de firefox).
Rien n’y change.
Je sens que je suis à deux doigts de la solution , a priori.
Et là, j’avoue que je suis bloqué, je n’avance plus.
Et je trouve que c’est dommage, car franchement, je trouve cette
solution de défilement de plusieurs brèves assez élégante étant
donné qu’elle est réalisée uniquement avec des balises et filtres
SPIP et du CSS3.
Alors j’aimerai bien arriver à finaliser cette fonction.
Et du coup je sollicite votre expertise.
Pourquoi cela ne fonctionne pas ?
Que faut-il faire pour que cela tourne ?
Le lien où cela se passe :
http://mapetiteentreprise.comoj.com/
Le code HTML :
Le code CSS :
Répondre à ce message
Bonjour !
J’adore Zpip mais je souhaite ne l’utiliser que sur un seul des secteurs de mon site. Le reste de mon site a été construit sous un autre squelette dont je suis satisfait.
Des pistes ?
Répondre à ce message
Bonjour
J’adore Zpip, mais je souhaiterais ne l’utiliser que dans un seul des secteurs de mon site, qui a été construit sur un autre squelette.
Quelles pistes auriez-vous pour moi ?
Répondre à ce message
Bonjour et bravo pour tout ce travail,
avez vous prévu une feuille de style habillage pour Spip 3.0 avec prise en compte de la balise slogan ? et autre particularité ...
Encore merci,
AlainF
Répondre à ce message
Complément à mon message précédent :
J’ai téléchargé et placé le plugin « Un slogan pour votre site SPIP 2 » dans le répertoire plugins.
SPIP3 m’interdit de l’installer.
Donc si le problème est le manque de ce plugin, alors la question devient QUAND le plugin « Un slogan pour votre site SPIP 2 » sera compatible pour SPIP 3 ?
Si le problème n’est pas celui là, alors les questions restent :
- Qu’est-ce que je fais mal ?
- Qu’est-ce que j’oublie ?
- Qu’est-ce que je fais en trop ?
Autre point : j’ai vidé le cache, le contenu du répertoire tmp et j’ai également effacé mon fichier perso.css qui était dans squelettes/css avant de réessayer.
Toujours sans succés.
David
Bon, ben j’ai trouvé.
Cela fonctionne à merveille.
C’est une pure joie !
Pour ceux qui comme moi débutent, voici ce qu’il s’était passé :
1. J’avais « joué » avec la personnalisation des squelettes avant d’installer Zpip.
2. Du coup dans mon répertoire squelettes/, où j’avais copié l’intégralité des fichiers squelettes-dist, il y avait tous les fichiers redéfinissant l’aspect du site publique.
3. A mon avis donc, car je ne suis pas développeur, les fichiers se trouvant dans squelettes/ prenaient le pas sur les fichiers de Zpip qui eux sont, toujours selon mon avis, appliqués sur les fichiers de squelettes-dist/
4. Inévitablement, les squelettes Zpip ne fonctionnaient pas.
Pour régler le problème, j’ai :
A. Effacé le contenu complet de squelettes/
B. Désinstallé le plugin Zpip
C. Réinstallé le plugin Zpip avec, par la même occasion, Zen-Garden
Et là, tout roule comme sur des roulettes.
Un pur enchantement.
Merci à tous les développeurs qui ont mis en place ces deux solutions complémentaires SPIP et Zpip. C’est fabuleux.
Continuez de nous faire des bonnes choses comme cela.
Je vais maintenant « jouer » un peu avec les css pour en faire vraiment ce que je souhaite.
Ton analyse est correcte (voir notamment http://programmer.spip.org/La-notion-de-chemin et http://www.spip.net/fr_article4332.html) . Simplement tu n’avais pas besoin de desinstaller ZPIP : vider le cache aurait suffi
Si tu personalise tes css voir tes squelettes, tu doit les mettre dans squelettes mais tu ne recopie que les fichiers que tu modifie, pas les autres …
Merci pour ta réponse, je suis content d’avoir bien « intuité » sur mon problème.
Merci également pour l’info.
Et aussi SPIP et Zpip, c’est génial ! ! ! ! !
Répondre à ce message
Bonjour,
MA CONFIG :
je suis sur SPIP 3.0.1
Je viens d’installer ZPIP (ZPIP-DIST V1) 1.7.19
J’ai les autres plugins nécessaires notamment :
- SPIP Zen Garden 2.4.2
- SPIP Bonux 3.0.2
- Menus 0.9.2
Je n’ai pas installé le plugin « Un slogan pour votre site SPIP 2 ».
Je n’ai pas mis ce plugin pour deux raisons :
- le slogan du site est déjà dans SPIP 3.0.1
- le plugin « Un slogan pour votre site SPIP 2 » n’est pas validé comme étant compatible avec SPIP3.
J’ai d’autres plugins aussi qui ne sont pas nécessaire au fonctionnement de ZPIP et qui était là avant que j’installe ZPIP.
Et bien évidemment j’ai les plugins de la distribution de SPIP 3.0.1.
Voila donc ma config.
MON INSTALLATION DE ZPIP :
J’ai téléchargé quelques thèmes ZPIP et les ais mis dans le répertoire themes.
J’ai activé le changement de thème depuis le site public et le site public se trouve à l’adresse suivante : http://mapetiteentreprise.comoj.com.
Mais, à mon grand regret, quel que soit le thème que je choisi d’activer, le site garde son look standard. Même la prévisualisation ne fonctionne pas.
- Qu’est-ce que je fais mal ?
- Qu’est-ce que j’oublie ?
- Qu’est-ce que je fais en trop ?
Merci d’avance pour toute aide
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 : |