Personnaliser et adapter SPIP
Développeur SPIP
Le fonctionnement de SPIP
Qu’est ce que SPIP ?
SPIP (Système de Publication pour l’Internet Partagé) est un logiciel libre destiné à la production de sites Web. C’est un système de gestion de contenu (SGC, en anglais CMS pour Content Management System) orienté magazine collaboratif, inspiré des métiers de l’édition.
Il utilise le language PHP. Il est important de comprendre comment fonctionne SPIP afin de bien com-prendre comment personnaliser les modèles de pages qu’on appelle SQUELETTE dans SPIP
Que sont les Squelettes de SPIP ?
On appelle Squelette de SPIP un ensemble de fichiers contenus dans un même dossier situé à la racine du dossier de SPIP. Cet ensemble est constitué de plusieurs types de fichiers. Il y a les fichiers de mise en page proprement dit dont l’extention est html. ATTENTION : cette extension est trompeuse car ces fichiers, s’ils contiennent effectivement des morceaux de code HTML contiennent aussi d’autres elements de code qu’on appelle BOUCLES SPIP
Le dossier du squelette contient aussi : des feuilles de styles (nom des fichiers dont l’extension est css) nécessaires à la mise en page du site, les fichiers images utilisés dans l’interface...
Un SQUELETTE de base est livré avec la distribution de SPIP, il se trouve dans le répertoire dist à la racine de SPIP. On peut utiliser ce dossier comme point de départ pour développer nos propres sque-lettes en le dupliquant tout simplement et en éditant les fichiers.
Comment le Squelette est utilisé par SPIP ?
Lorsque un navigateur appelle une page d’un site SPIP sur un serveur, il appelle en réalité un des fichiers du squelette de SPIP avec certains paramètres : par exemple le fichier du squelette des articles avec le numéro de l’article à afficher.
Le contenu du site SPIP (textes, images, éléments multimédia... entrés dans le site par l’interface ADMINISTRATEUR) est stocké dans une base de donnée. Dans le fichier de squelette des articles se trouvent un certains nombres de BOUCLES qui génèrent automatiquement des requêtes sur cette base de donnée, en retournent les résultat qui peuvent étre affichés (mis en page, mis à l’écran) à l’aide de BALISES SPIP.
Les squelettes sont donc utlisés pour mélanger du code HTML avec des résultats de requètes sur une base de donnée afin de mettre en page ces information.
L’opération de calcul du code HTML de la page utilise la technologie PHP et est relativement longue surtout s’il y a beaucoup de contenu ou d’images à modifier, c’est pourquoi il y a dans SPIP un sys-tème de CACHE.
Qu’est ce que le CACHE de SPIP
Si une page précise, comme la page de l’article numéro 28, par exemple, est appelée plusieurs fois, et si l’article 28 n’a subit aucune modification récente, il n’est pas nécéssaire de re-calculer le code HTML de la page. SPIP stocke le code HTML de toutes les pages dans un CACHE.
Lorsqu’on fait une requête sur une page d’un site SPIP, il vérifie d’abord si cette page a déjà été calcu-lée récemment, si tel est le cas, la page affichée est celle gardée en CACHE, sinon il calcule réellement la page et l’affiche.
Ainsi pour que les modifications des fichiers du squelette soient visibles à l’affichage, il faut soit demander systèmatiquement à SPIP de recalculer les pages, soit désactiver le cache pendant la phase de développement des squelettes (à l’aide du PLUGIN «couteau suisse» cf cours «SPIP ADMINIS-TRATION»).
On ne doit pas confondre le CACHE de spip avec le CACHE du navigateur (en local) qui peut parfois aussi afficher une page différente de celle qui est stockée sur le serveur.
Du Squelette à la page HTML
Voici un exemple pour illustrer comment SPIP génère une page HTML à partir d’un SQUELETTE de page :
Nous verrons qu’en plus de générer du code HTML, SPIP peut aussi réaliser certaines opérations com-plexes automatiquement (comme redimensionner des images par exemple).
Quel fichier modifier pour changer le graphisme d’un site SPIP ?
Deux types de fichiers conditionnent l’affichage des pages d’un site SPIP : il y a les fichiers contenant le mélange HTML-BOUCLES SPIP dont nous venons de parler mais aussi les feuilles de style CSS. Dans SPIP, certains styles jouent un rôle important : ils servent à modifier les propriétés graphiques des éléments qui ne sont pas définis dans votre code HTML (celui de votre squelette), mais dans le code généré par SPIP. En effet, SPIP associe de lui-même plusieurs styles au code qu’il génère. Ainsi, lorsque l’on utilise les raccourcis SPIP dans les articles (ce qui permet de mettre en gras, en italique, créer des liens hypertextes, des intertitres, des tableaux …), SPIP produit les balises HTML nécessaires à ces effets, chacune de ces balises est alors dotée d’un sélecteur CSS.
La feuille de style corespondant à ces styles se trouvepar défaut dans le dossier dist (squelette de base de SPIP), il sagit du fichier spip_style.css, ce fichier doit étre présent dans tout les dossiers de SQUE-LETTE.
On peut donc modifier l’habillage (couleurs, taille et police de caractères, cadre ... ) de SPIP a l’aide de ces feuilles de style ( http://www.spip.net/rubrique269.html ).
Ce n’est que si on désire modifier la structure d’un site web (l’agencement des éléments les uns par rapports aux autres, l’absence ou l’affichage de certains éléments, des menus personalisés, ... ) qu’il faudra modifier les fichiers SQUELETTES de SPIP.
anatomie d’un squelette SPIP
Un squelette SPIP est composé de bouts de code HTML, de BOUCLES et de BALISES.
Les boucles nomenclature et paramètres
Une BOUCLE de SPIP est composée de deux éléments :
- un élément ouvrant : <BOUCLEn(TYPE){critère1}{critère2}...{critèrex}>
à l’intérieur du Code HTML mélangé à des balises SPIP - et un élément fermant : </BOUCLEn>
Une BOUCLE s’écrit de la manière suivante à l’intérieur des accolades : D’abord l’elément BOUCLE qui indique qu’il sagit d’une boucle.
On ne peut pas le modifier, toutes les boucles commencent par <BOUCLE...
Puis sans espace l’élément n, le nom de la boucle qui ne comprend pas d’espace (chaque boucle d’une même page de squelette doit avoir un nom unique).
Puis entre parenthèses le TYPE de boucle dont il s’agit. Il indique quel type d’éléments on veut récu-pérer. La syntaxe est importante : le TYPE est indiqué entre parenthèses (sans espace), en majuscules, et ce TYPE doit correspondre obligatoirement à l’un des types prévus dans SPIP ().
Par exemple la boucle «liste_des_articles» de type ARTICLE sélectionant l’ensemble des articles du site se note :
<BOUCLE_liste_des_articles(ARTICLE){tout}>
On voit apparaitre ici un critère à la boucle qui est{tout}. Ce paramètre signifie que la boucle effectue une recherche sur le site dans son entier.
On peut ajouter autant de critères que l’on désire a l’intérieur des accolades d’une boucle.
Contexte des boucles et critères
Une boucle agit dans un contexte donné. Par exemple une boucle de type ARTICLES liste des articles de SPIP.
Si j’utilise une boucle ARTICLE sans paramètres et sans contexte <BOUCLE_liste_des_articles(ARTICLE)>
</BOUCLE_liste_des_articles>
, elle n’affiche rien, car je me situe par défaut à la racine du site SPIP et qu’un article appartient néces-sairement à une rubrique que je dois indiquer.
Je peut préciser cette rubrique par le biais d’un critère : <BOUCLE_liste_des_articles(ARTICLE){id_rubrique=8}> </BOUCLE_liste_des_articles>
Enfin je peux me trouver dans le contexte d’une rubrique :
- soit le numéro de la rubrique en cours a été passé en paramètre de la page de squelette
- soit la boucle en cours est située à l’intérieur d’une autre BOUCLE qui fixe le contexte de rubrique. Par exemple
<BOUCLE_liste_des_rubriques(RUBRIQUE){id_rubrique=8}> <BOUCLE_liste_des_articles(ARTICLE)> {id_rubrique} </BOUCLE_liste_des_articles>
</BOUCLE_liste_des_rubriques>
Retourne l’ensemble des articles de la rubrique dont l’ID est le numero 8
Ceci dit chacune de ces boucles n’affichent rien du tout car nous n’indiquons pas ce qu’il faut afficher. La partie d’une boucle située entre accolade est appelée critère.
Les critères permettent de filtrer une requête SPIP, comment on veut sélectionner les éléments dans la base de données :
- afficher les sous-rubriques incluses dans cette rubrique,
- afficher les autres rubriques installées au même niveau hiérarchique que la présente rubrique... et la façon dont on va classer ou sélectionner les éléments :
- classer les articles selon leur date, selon leur titre... - afficher uniquement les 3 premiers articles,
- afficher la moitié des articles...
Il peut avoir plusieurs critères, on a alors plusieurs couples d’accolades{...}{...} successifs.
Comme on peut combiner les critères, on peut très aisément fabriquer des requêtes très puissantes, du genre « afficher la liste des 5 articles les plus récents écrits par cet auteur ».
Les Balises
Une balise de SPIP se présente sous la forme suivante : #TITRE
Comme pour les BOUCLES, la balise TITRE s’inscrit dans un contexte donc la balise #TITRE seule n’affichera rien du tout.
En revanche placée dans un contexte elle affiche le titre l’article, la rubrique ... dans laquelle on se situe : <BOUCLE_liste_des_rubriques(RUBRIQUE){id_rubrique=8}> <BOUCLE_liste_des_articles(ARTICLE) {id_rubrique}> #TITRE </BOUCLE_liste_des_articles> </BOUCLE_liste_des_rubriques>
Code Optionel
Pour les boucle :Le syntaxe indiquée précédemment peut être complétée par des éléments conditionnels. La boucle pré-cédente affiche successivement les éléments contenus à l’intérieur de la boucle. SPIP permet de plus d’indiquer ce qu’on affiche avant et après la boucle au cas où elle contient un ou plusieurs résultats, et ce qu’on affiche s’il n’y a aucun élément.
Cela donne : <Bn>
* Code HTML optionnel avant
<BOUCLEn(TYPE){critère1}{critère2}...{critèrex}> * Code HTML + balises SPIP
</BOUCLEn>
* Code HTML optionnel après </Bn>
* Code HTML alternatif <//Bn>
Le code optionnel avant (précédé de <Bn>) n’est affiché que si la boucle contient au moins une ré-ponse. Il est affiché avant les résultats de la boucle.
Le code optionnel après (terminé par </Bn>) n’est affiché que si la boucle contient au moins une réponse. Il est affiché après les résultats de la boucle.
Le code alternatif (terminé par <//Bn>) est affiché à la place de la boucle (et donc également à la place des codes optionnels avant et après) si la boucle n’a trouvé aucune réponse.
Pour les Balises :
Tout comme on peut utiliser du code optionel avec les BOUCLES, on peut utiliser du cope optionel (qui ne s’affiche que si la balise utilisée renvoie un résultat). de la façon suivante :
[ texte optionnel avant (#BALISE) texte optionnel après ]
Les filtres
On peut appliquer au résultat d’une balise des filtres, soit pour en changer l’affichage (par exemple, afficher le titre entièrement en majuscules), ou pour récupérer une valeur caractéristique de cet élément (par exemple, les dimensions d’une image).
Dans SPIP, on peut directement appliquer des filtres aux éléments récupérés de la base de données, en utilisant le signe | (pipe) dans la syntaxe des balises SPIP, qui devient :
[ option avant (#BALISE|filtre1|filtre2|...|filtren) option après ]
La syntaxe est donc de faire suivre le nom de la balise, entre les parenthèses, par les filtres succesifs, séparés par une barre verticale (nommée habituellement pipe).
Par exemple on peut Justifier du texte en utlisant le filtre justifier de la façon suivante : [(#TEXTE|justifier)]
Les filtres sont en réalité des fonctions PHP. On peut développer ses propres filtres pour manipuler le contenu d’une balise.
Ces filtres fonctions personalisées doivent étre placés dans un fichier nommé «mes_fonctions» et situé à la racine du site SPIP.
