SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 222 visiteurs en ce moment

Accueil > Thèmes > Ecrire un thème > Écrire un thème pour Zpip

Écrire un thème pour Zpip

13 novembre 2009 – par Cerdic, Matthieu Marcillaud – 47 commentaires

31 votes

Le squelette Zpip inaugure une convention et un formalisme visant à promouvoir et faciliter l’échange de code et des habillages entre squelettes.

On décrit ici l’organisation macroscopique à respecter pour écrire un thème compatible avec le squelette Zpip (et les autres qui respectent le même formalisme).

Un thème n’est pas un squelette

Il est important de comprendre avant toute chose qu’un thème doit se limiter à la décoration visuelle, à l’habillage graphique.

Un thème ne peut pas et ne doit pas se mêler de quel type d’information est affiché, de comment les informations sont sélectionnées etc ... Autrement dit :

  • un thème ne doit pas surcharger des éléments du squelette autre que ceux explicitement définis dans cette documentation.
  • un thème ne doit pas fournir de contenu autre que celui spécifié ci-dessous.

Écrire un thème qui ne suivrait pas cette règle le limiterait à fonctionner avec un squelette donné, ou dans un cas donné, alors que le but est ici de proposer une méthode qui permette d’écrire des thèmes interchangeables avec plusieurs squelettes.

Organisation des fichiers

Le thème est constitué d’un répertoire. Tous les fichiers y sont au premier niveau, sauf les images de décoration qui seront dans un sous dossier img/

Les feuilles de style

Le thème doit comprendre une feuille de style habillage.css qui sera incluse dans les pages par le squelette et sera appelée pour le media screen.

Le thème peut comprendre une feuille de style impression.css qui sera incluse dans les pages par le squelette et sera appelée pour le media print.

Si le thème nécessite l’ajout de composants dynamiques dans le head , il peut fournir au choix :

  • inc-theme-head.html qui sera incluse au même niveau que habillage.css, et reçoit les variables d’environnement (bien indiqué pour une CSS dynamique)
  • inc-insert-head.html qui sera ajoutée à la fin de la balise #INSERT_HEAD, mais ne reçoit pas les variables d’environnement. Cette inclusion est plutôt indiquée pour les scripts qui utilisent jQuery ou un composant javascript fourni par un plugin.

Quand c’est nécessaire, le thème peut aussi redéfinir la feuille de style dédiée aux formulaires spip_formulaires.css.

Les images de décoration

Toutes les images de décoration référencées par la css seront rangées dans un sous dossier img/ du thème.

Logo

Le thème peut contenir une image au premier niveau utilisée pour représenter le thème dans l’interface de sélection. Elle sera dans un format 200x150 pixels ou plus grand et proportionnel.

Layout

Le thème doit fournir un layout, ou structure HTML de la page. Il comprend toute la structure du HTML qui sera insérée dans le <body>...</body> à l’exclusion de la balise <body> elle même.

Ce layout doit inclure les 6 blocs fonctionnels génériques au moyen des lignes suivantes :

  • <INCLURE{fond=inclure/entete,env}> pour le bloc fonctionnel qui constitue l’en-tête visuelle du site.
  • <INCLURE{fond=inclure/barre-nav,env}> pour la navigation principale du site
  • <INCLURE{fond=contenu/#ENV{type},env}> pour le bloc principal de contenu, qui dépend du type d’objet affiché, donc.
  • <INCLURE{fond=navigation/#ENV{type},env}> pour le bloc de navigation « secondaire » de la page
  • <INCLURE{fond=extra/#ENV{type},env}> pour le bloc d’informations complémentaires de la page
  • <INCLURE{fond=inclure/pied,env}> pour le pied de la page.

Ce layout peut inclure un 7e bloc qu’il fournira lui même, nommé inc-theme-copyleft.html sous la forme <INCLURE{fond=inc-theme-copyleft,env}>. Ce bloc permet d’afficher les éventuelles informations de droits d’auteur et de crédits, y compris éventuellement un lien vers le site de l’auteur. Ce bloc ne doit pas être utilisé pour embarquer d’autres informations.

Ce layout sera renseigné dans le fichier body.html.
Ce fichier ne doit contenir que des éléments de structure de la page, et ne doit intégrer aucun contenu, sauf à entrainer une incompatibilité avec des squelettes.

plugin.xml

Le thème doit inclure un fichier de description plugin.xml. Ce fichier de description permet de renseigner les informations visibles dans le sélecteur de thème de l’espace privé.

Il permet aussi d’installer directement le thème dans le dossier plugins/ et de l’activer depuis le gestionnaire de plugins dans le cas où le webmestre ne veut pas mettre de galerie de thèmes à disposition des administrateurs.

Le fichier plugin.xml doit comporter au minimum les informations ci-dessous :

La balise <prefix> contiendra toujours la valeur « theme » qui permet de distinguer les thèmes, et d’empêcher l’activation de deux thèmes à la fois.

Variantes de thèmes

Lorsqu’un thème visuel comporte plusieurs variantes possibles, il est vivement conseillé de créer un thème indépendant pour chaque variante importante.

L’utilisation de panneau de configuration pour personnaliser les thèmes est tout à fait déconseillée car peu compréhensible par les débutants. L’expérience de l’utilisateur doit être privilégiée par rapport à la facilité pour le développeur.

Pratiquement, il est conseillé de faire un dossier thème portant le nom de la famille de thème, qui comportera un sous dossier pour chaque thème activable. Chacun de ces thèmes sera indépendant et comportera son fichier de déclaration plugin.xml.

Les variantes mineures pourront faire l’objet d’un fichier texte dans le thème qui explique quoi changer pour personaliser un peu le thème.

[La notion de variante pourra être intégrée au Zen Garden dans le futur, pour en simplifier la gestion pour les développeurs et leur éviter de dupliquer une partie des images et des css.]

PHP et autres mécanismes de plugin

L’utilisation de scripts php dans un thème est fortement déconseillée. Pour des raisons de sécurité, et pour permettre le téléchargement et l’installation automatisée de thèmes, il n’est pas permis de joindre de script PHP, ni de code PHP inline dans l’un des squelettes fournis par le thème.

Pour les mêmes raisons, les mécanismes génériques des plugins éventuellement spécifiés dans plugin.xml (tels que l’utilisation des pipelines) resteront inactifs lorsque un thème sera sélectionné par le gestionnaire de thèmes.

Dernière modification de cette page le 15 juin 2010

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 22 août à 11:52, par PRX En réponse à : Écrire un thème pour Zpip

    Bonjour,

    Je constate un manque cruel de thèmes compatibles 3.1 à ce jour et j’aimerai aider avec mes maigres moyens pour pérenniser Spip.

    En effet les seuls thèmes compatibles à ce jour sont :
    -  Einsteiniumist
    -  Essential (2 colonnes)
    -  Essential
    -  OutDoor 1.0
    -  BluePigment 1.0
    -  Maparaan
    -  Tincredible

    Il y-a-til une méthode pour améliorer les thèmes « Z » existants comme Welsh & Andreou et les rendre compatibles 3.1.1 : je les modifie, teste et envoie pour publication (ou méthode car je ne sais pas faire non plus) ? je sais que Cerdic est toujours très impliqué .
    merci d’avance

    Répondre à ce message

  • Le 10 mars 2010 à 23:38, par Stéphane Santon En réponse à : Standardisation ??

    J’ai voulu faire un switcher de layout d’après Layout Gala : http://blog.html.it/layoutgala/ sur une base Z.
    J’ai cru pouvoir partir d’un thème pour Zpip, et switcher (à peu près) entre chacune des dispositions de LayoutGala. Eh bien mal m’en a pris !

    Pas grand chose d’uniforme : le conteneur global est nommé parfois wrap, parfois conteneur, pour d’autres divs c’est au choix entre header/entete, contenu/col1, navigation/col2, navigation/bav, ... bref, c’est pas fait !

    Ensuite le switcher de thèmes ne va pas chercher la liste dans les sous-dossiers de /themes pour les variantes.

    Enfin « Le thème doit fournir un layout » : dans les différents thèmes, je trouve : layout.html, body-layout.html, body.html, ...
    Lequel est-ce ??

    Ma tentative : http://themes.santonum.eu
    Merci

    • Le 10 mars 2010 à 23:57, par Cerdic En réponse à : Standardisation ??

      Tu as mal compris le principe. Le layout est fourni par le thème qui est libre d’appliquer la dénomination des id et class qu’il veut pour cela. Donc aucune chance de faire un switcher de layout gala qui fonctionne. Ce n’est pas le but (et ça n’a aucun intérêt pratique amha).

      Pour le switcher de thème, le Zen Garden l’inclue désormais. Inutile d’utiliser un plugin supplémentaire.

    • Le 10 mars 2010 à 23:58, par Maïeul En réponse à : Standardisation ??

      Ce layout sera renseigné dans le fichier body.html. Ce fichier ne doit contenir que des éléments de structure de la page, et ne doit intégrer aucun contenu, sauf à entrainer une incompatibilité avec des squelettes.

      C’est écrit : désormais c’est body.html qui prévaut pour la structure.

      en terme de standardisation, effectivement il n’y a pas de standardisation des blocs englobants. A titre personnel, je trouve cela gênant (pour skiplink notamment) mais apparament il n’y a pas encore de décision de normalisation

      pour le switcher de thème : le mieux est de ne pas prendre le plugin switcher de thème mais d’activer le switcher avec Z garden

    • Le 11 mars 2010 à 00:23, par Cerdic En réponse à : Standardisation ??

      Il n’y aura pas de standardisation des blocs englobants dans le layout. C’est le principe même de Z et sa force. Standardiser c’est contraindre et empêcher de faire n’importe quel design, car aucun layout n’est universel.

      Donc ce n’est pas une question de temps ou de pas encore. C’est un point clos.

    • Le 11 mars 2010 à 00:27, par Maïeul En réponse à : Standardisation ??

      oui, alors la problèmatique est posé à l’envers. Dans ce cas, peut-être envisagé de redefinir les liens de skiplink par thème (dont intégré directement dans le thème ?)

    • Le 21 mars 2010 à 00:28, par Shnoulle En réponse à : Écrire un thème pour Zpip

      Pourtant , les thèmes ont une standardisation de fait, non ?

      Ce layout doit inclure les 6 blocs fonctionnels génériques au moyen des lignes suivantes :

      Ces 6 blocs sont identifié clairement, je ne crois pas qu’un seul thème ne les aient pas inclus dans un bloc englobant (je peut me tromper).

      Ce bloc englobant, si il existe , peut recevoir l’id du bloc par convention, non ?

    • Le 21 mars 2010 à 00:49, par Cerdic En réponse à : Écrire un thème pour Zpip

      Ce bloc englobant, si il existe , peut recevoir l’id du bloc par convention, non ?

      Non justement, car chaque theme peut utiliser l’id qui lui convient, en fonction de son usage, de l’origine du theme, du framework css qu’il utilliset etc ...
      A la rigueur on pourrait demander à placer une classe homonyme, mais je ne suis pas sur que cela apporterait quelque chose.

    Répondre à ce message

  • Le 24 septembre 2011 à 14:53, par clown mechant En réponse à : Écrire un thème pour Zpip

    Bonjour,
    J’aimerais contribuer à l’écriture de thème mais avant j’ai une petite question ( par souci de fainéantise avouée...)

    -  Y a-t-il quelque part ( que je n’ai toujours pas trouvé ....) le code texte de « charte typographique » à copié collé simplement ? (vous savez quand on visite les thèmes en démo, le premier article, souvent,)

    voilà, pour styler, j’aimerai bien avoir le code de ce premier article de démo... si ça se trouve.

    Merci d’avance !

    • Le 24 septembre 2011 à 15:00, par clown mechant En réponse à : Écrire un thème pour Zpip

      je me réponds à moi même !
      Il suffisait que je m’enregistre sur un site de démo puis dans l’espace privé, en proposant d’écrire une traduction j’ai accès à ce fameux article...

    Répondre à ce message

  • Le 22 décembre 2010 à 19:19, par Severo En réponse à : Écrire un thème pour Zpip

    Une petite question : apparemment dans plugin.xml il est nécessaire de mettre la ligne

            <etat>stable</etat>

    Si (selon la nomenclature des plugins http://www.spip.net/fr_article3448.html) je mets

            <etat>dev</etat>

    le thème n’apparait pas dans la liste des thèmes de l’espace privé. C’est fait exprès ?

    Répondre à ce message

  • Le 11 novembre 2010 à 00:09, par Béat En réponse à : Écrire un thème pour Zpip

    Bonjour,

    Je réalise un nouveau thème, mais je n’ai pas encore tout compris ;-) Pour l’instant j’ai un problème de pagination.

    En fait, les paginations fonctionnent, mais elles n’affichent qu’elles-mêmes, c.à d. que tout le haut de la page disparait. Si je demande le recalcul, alors c’est ok. Mais il faut le refaire à chaque fois.

    Je précise que les autres thèmes, ceux que j’ai téléchargés, fonctionnent parfaitement avec mon squelette modifié. Le problème est donc bien dans mon thème, mais je ne vois pas où... Une piste ?

    Merci d’avance

    • Le 15 novembre 2010 à 22:12, par Béat En réponse à : Écrire un thème pour Zpip

      Je patine toujours dans le yogourt avec mon problème. J’ai pu déterminer qu’il se situe dans la CSS, car si je mets une CSS d’un quelconque autre thème, le problème n’arrive pas (à part que ça casse toute la mep !).
      J’en ai un autre (de problème) qui est peut-être lié : le bouton switcher de thèmes de ZenGarden ne fonctionne pas non plus. A chaque tentative il me dit : « Not Found. The requested URL /(EmptyReference !) was not found on this server. » Mon inspecteur web confirme en me disant, pour “switcher_zen" :
      <form action=“(EmptyReference!)" ... >

    • Le 15 novembre 2010 à 23:32, par Béat En réponse à : Écrire un thème pour Zpip

      Bon, c’est résolu, pffffh ! Il y avait une div id page avec un overflow : hidden ! Comment ?... mystère...

      Mais le problème avec ZenGarden demeure, je vais le poster sur la bonne page...

    Répondre à ce message

  • Le 29 octobre 2010 à 15:07, par aRT En réponse à : Écrire un thème pour Zpip

    Bonjour,

    Comment fait-on pour avoir une page d’accueil DIFFERENTE et PERSONNALISEE de la structure classique du thème ?

    Si par exemple, je veux afficher les dernieres mises a jour ou les prochains evènements ???

    je ne voit pas comment faire juste avec le fichier body.html

    Répondre à ce message

  • Le 22 septembre 2010 à 17:27, par aurelien En réponse à : Écrire un thème pour Zpip

    Comment soumettre un thème pour SPIP-CONTRIB ?

    • Le 22 septembre 2010 à 17:30, par Cerdic En réponse à : Écrire un thème pour Zpip

      Il suffit de s’inscrire sur le site, de rédiger un article avec le thème et les captures d’écran, sur le modèle de ceux existants, et de le proposer à publication.

    Répondre à ce message

  • Le 14 juillet 2010 à 17:05, par ubu En réponse à : Écrire un thème pour Zpip

    inc-theme-head.html qui sera incluse au même niveau que habillage.css, et reçoit les variables d’environnement (bien indiqué pour une CSS dynamique)

    Il semble que les variables d’environnement ne passe dans inc-theme-head.html que si elles passent dans inclure/head, ce qui n’est pas le cas.
    Dans structure.html j’ai ajouté env à la fin de <INCLURE{fond=inclure/head}>, et ca marche. Je peux transmettre à une feuille de style dynamique les variables objet et id_objet..

    Répondre à ce message

  • Le 9 juin 2010 à 15:11, par davduf En réponse à : Écrire un thème pour Zpip

    Bien, bien, bien... Ne m’en voulez pas mais je voudrais comprendre en quelques mots simples ce que je dois faire avec Zpip en partant d’une maquette en css. Quelles sont les étapes ? L’intérêt à passer par Zpip plutôt qu’à aller directement faire mes bou-boucles ?

    Pardon de tant de candeur. Et merci encore !

    Répondre à ce message

  • Le 16 avril 2010 à 15:05, par YannX En réponse à : Écrire un thème pour Zpip

    Zpip et les Variantes SPIP ?

    Bonjour,

    Je suivais avec curiosité cette demarche de squelettes modulaires : Bravo,
    la lecture des articles est précise, et les premières utilisations rapides.

    J’ai juste une interrogation, à laquelle je n’ai pas encore su trouver reponse : comment ce système peut-il reprendre les variantes de SPIP (fondés sur les id : cf. variantes iD).
    -  Serait-ce dans contenu qu’il faut introduire des noisettes déclinées complémentaires ?
    -  Ou bien faut-il directement (et uniquement) utiliser le plugin Compositions ?
    Mais dans ce cas, si j’ai bien compris la documentation, la sélection d’une composition serait a refaire pour chaque « page » et chaque « objet » créé : dans ce cas on perdrait l’avantage des « variantes » traditionnelels de squelettes !?

    Du coup, j’ai une idée : pourrait-on imaginer de définir des « compositions », qui seraient notées « rub-XX » et/ou « rub=XX » ; un peu à la manière de « mot-cles techniques implicites », celles-ci seraient reprises automatiquement (parun mécanisme de surcharge) pour reproduire le fonctionnement initial qui existait jusqu’en v2 avec la dist...
    etant encore bien incapable d’étudier l’implémentation eventuelle, je m’adresse donc a des utilisateurs experts.....
    Merci de votre réaction, meme pour me dire si je suis a coté de la plaque ;-) .

    YannX

    • Le 16 avril 2010 à 15:29, par Cerdic En réponse à : Écrire un thème pour Zpip

      Bonjour, l’utilisation des squelettes suffixés avec un numéro de rubrique (article-23.html pour tous les articles de la rubrique 23) reste possible avec Zpip, au niveau de chaque bloc :
      contenu/article-23.html et/ou navigation/article-23.html etc.

      Le plugin Compositions a bien pour but de remplacer ce mécanisme en dur par une solution interfacée, mais ne remplit effectivement pas encore ce rôle d’héritage « Tous les articles de la rubrique ».
      En attendant on ne perd rien au change et on peut toujours continuer à utiliser le mécanisme de SPIP avec ses avantages et ses inconvénients.

    • Le 16 avril 2010 à 16:09, par YannX En réponse à : Écrire un thème pour Zpip

      Merci Cedric pour cette réponse rapide, et utile en documentation complémentaire.

      et comme d’autre part arrive une version améliorée de http://www.spip-contrib.net/SkelEdi...
      Cela fait déjà un ensemble d’outils bien pratique......

      Alors, je me lance et j’emets un voeu ’pieux’ dans les « nouvelles » extensions (ce que j’entends reproché a SPIP) :
      -  au-dela de la possibilité de http://www.spip-contrib.net/Compositions et de http://www.spip-contrib.net/Zpip-et... qui permet déjà de générer des données structurées autrement qu’un article traditionnel, comment intégrer cet ensemble d’outils (avec une forme simplifiée de formulaires CVT peut-etre) pour pouvoir utiliser le Framework SPIP pour définir/créer/gérer toutes sorte d’objets nouveaux, sans devoir ecrire du PHP !

      une notion que les détracteurs associent à la
      facon Drupal !

      -  autre aspect souvent bien masqué (sauf un mail de Luis il y a plus d’un an !) : documenter des solutions de personnalisation de l’interface privée, en analysant quelque peu les CSS de l’espace ecrire..

      Encore merci Cedric, pour tous tes messages, lectures qui aident les utilisateurs silencieux (et bien sur tous tes developpements mis au service de tous)
      YannX

    • Le 16 avril 2010 à 16:20, par Cerdic En réponse à : Écrire un thème pour Zpip

      En ce qui concerne l’interface privé, tout est en chantier de refonte technique et on est bien loin d’avoir stabilisé quelque chose de personalisable facilement via une API.
      Autant dire que tout ce qui n’est pas en squelette dans le dossier prive/ de SPIP va encore beaucoup bouger et documenter n’a pas d’interêt car ce n’est pas perenne.

      Cela dit ça n’empêche pas déjà d’écrire ses propres interfaces simplifiées dans le site public.

      Enfin sur un « framework » ou un « outil de construction » de nouveaux contenus, on y va clairement doucement mais sûrement. Il y a déjà Champs extra 2 qui est une bonne solution, mais il faut aller plus loin c’est certain.

    Répondre à ce message

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Champs Extras 3

    16 janvier 2012 – 524 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Réservation d’événements

    16 mars 2015 – 188 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Les crayons

    23 avril 2008 – 815 commentaires

    Ce plugin permet d’éditer les contenus sur les pages publiques du site, sans passer par l’espace privé de SPIP.

  • LESS pour SPIP : Less-CSS (anciennement LESSpip)

    5 novembre 2010 – 43 commentaires

    Less-CSS (Anciennement LESSpip) est un plugin intégrant facilement le logiciel LESS dans SPIP. LESS est une extension de CSS ajoutant les variables, les classes, les opérations, les imbrications au langage. Facilitant ainsi l’écriture de (...)

  • Recommander

    3 avril 2011 – 16 commentaires

    Ce plugin propose une manière simple de suggérer de recommander par email un article à un ami. Fonction « recommander un article à un ami ». On l’ajoute dans n’importe quel squelette sous la forme : #RECOMMANDERtitre de la page,url de la page,intro (...)

Ça spipe par là