Personnaliser et adapter SPIP Développeur SPIP

En Théorie

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, de type système de gestion de contenu (SGC, en anglais CMS pour Content Management System) orienté magazine collaboratif, inspiré des métiers de l’édition.

Le contenu d’un site web géré sous SPIP est installé dans une base de données MySQL. SPIP utilise le lan-gage PHP pour y lire les informations. Les langages HTML, CSS et le langage SPIP sont ensuite utilisés pour structurer, mettre en page et enjoliver l’affichage de l’information dans le navigateur Web des internautes. Comprendre le fonctionnement de SPIP vous aidera à voir comment personnaliser votre site SPIP. Il vous faudra, pour personnaliser un site SPIP, développer des gabarits (patrons de pages) appellés squelettes dans SPIP, à l’aide des langages HTML/CSS et avec les boucles et balise du langage SPIP.

( voir http://www.spip.net/rubrique135.html)

Squelettes SPIP ?

Les squelettes de SPIP utilisent un métalangage de programmation simple, permettant d’indiquer qu’elles sont les informations de la base de donnée à placer, où et comment les présenter.

On appelle jeu de squelettes de SPIP un ensemble de fichiers associés (.html et .css), contenus dans un même dossier. Un jeu de squelettes est proposé par défaut. Il se trouve dans le répertoire dist (nommé squelettes-dist dans la version 2) à la racine de votre site SPIP.

Il y a des fichiers de mise en page proprement dit dont l’extention est html.

ATTENTION : cette extension est trompeuse car ces fichiers contiennent effectivement des morceaux de code HTML, mais aussi des éléments de langage qu’on appelle boucles et balises SPIP.

Pour chaque type de page vous pouvez développer un squelette particulier pour la mise en page du contenu :

- du point d’entrée dans le site, page d’accueil, créer un squelette de nom sommaire.html

- d’un article : un squelette article.html,

- d’une rubrique : le squelette rubrique.html …

Le dossier des squelettes contient aussi : des feuille de styles .css (langage CSS) nécéssaires au «look» : mise en page, typographie …

Si vous souhaitez installer un jeu de squelettes personnalisé, il convient de créer un répertoire nommé :

- squelettes, au même niveau que dist, à la racine du site ( le répertoire des squelettes livrés par défaut), SPIP s’il trouve ce dossier utilisera les squelettes qui s’y trouvent et sinon se servira de ceux qui se trouvent dans le dossier par défaut : dist.

- nomChoisiParVous au même niveau que dist, à la racine du site, mais ne pas oublier d’indiquer à SPIP que c’est dans ce dossier qu’il doit piocher, en priorité à dist, les squelettes pour la mise en page (une variable à définir dans un ficheir ecrire/mes_options.php)

Comment un 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 affecté de paramètres : par exemple le fichier du squelette des articles avec le numéro de

l’article à afficher.

Par exemple sur le site SPIP du TP, installé de base, un clic sur le lien vers l’arcticle n°2, crée l’url :

http://m2pro.obspm.fr:8888/mfl/spip.php?article2

Remarquez que SPIP envoie au navigateur ses requêtes avec les chemin d’accès à partir de la racine du site.

Le contenu des articles du site SPIP : textes, images, éléments multimédia... (entrés dans le site grâce à l’in-terface ADMINISTRATEUR) se trouve dans une base de donnée. Le fichier de squelette des articles utilisera un certain nombre de BOUCLES pour générer automatiquement des requêtes sur cette base de donnée, les résultats de ces requêtes seront être affichés à certains endroits de la page à l’aide de BALISES.

Les squelettes sont utlisés pour créer du code HTML, ordres de mise en page des résultats des requêtes dans la base de donnée.

SPIP effectue donc une opération de «calcul du code HTML» de la page, il utilise la technologie PHP qui peut être relativement longue, surtout s’il y a beaucoup de contenu ou des images à modifier, c’est pourquoi il y a dans SPIP un système de CACHE.

Le CACHE de SPIP

Si une page est appelée plusieurs fois, la page de l’article numéro 28, par exemple, 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 enregistre le code HTML de toutes les pages du site qu’il calcule et les enregistre dans un CACHE.

Lorsqu’on fait une requête sur une page d’un site SPIP, SPIP vérifie d’abord si cette page a déjà été calculée récemment, si c’est le cas elle affiche la page gardée en mémoire, sinon il calcule réellement la page. C’est pourquoi il peut vous arriver après certaines modifications des fichiers d’un squelette de ne pas voir le résultat attendu, directement, dans la fenêtre de votre navigateur. Il faut recalculer cette page :

- soit demander systématiquement à SPIP de recalculer les pages après qu’il les ait affichées

- soit désactiver le cache (à l’aide du PLUGIN «couteau suisse» cf cours «SPIP ADMINISTRATION») pen-dant la phase de développement des squelettes.

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 (stockée en local) de celle qui est sur le serveur.

Du squelette à la page HTML

Nous verrons qu’en plus de générer du code HTML, SPIP peut réaliser certaines opérations complexes auto-matiquement (redimentionner des images par exemple).

Le schéma suivant illustre comment SPSIP génère une page HTML à partir d’un exemple de squelette de page de rubrique :

Quels fichiers modifier pour changer le graphisme d’un site SPIP ?

Deux types de fichiers conditionnent la mise en page sous SPIP : 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 que vous écrivez dans 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, lorsqu’on utilise les raccourcis SPIP en rédigeant les articles dans l’interface de rédaction (pour met-tre 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 corespondante se trouve dans le dossier dist (squelette de base de SPIP), il sagit du fichier spip_style.css, ce fichier doit être présent dans tous les dossiers de squelettes.

On peut donc modifier l’habillage des éléments affichés (couleur, taille et police de caractères, cadre ... ) par SPIP à 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 rapport aux autres dans la page, l’absence ou l’affichage de certains éléments, des menus personalisés ... ) qu’il faudra modifier les squelettes de SPIP.

C’est ce dernier point que nous allons développer dans le TP.

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

- un élément fermant : </BOUCLEn>

Entre les chevrons, inférieur et supérieur <…>, une boucle s’écrit de la manière suivante :

- d’abord l’élément BOUCLE qui indique qu’il sagit d’une boucle. On ne peut pas le modifier, toutes les bou-cles commencent par <BOUCLE...

- puis, sans espace, l’élément n, nom de la boucle, chaque boucle d’une même page de squelette doit avoir un nom unique et commencer par un blanc souligné _ (non obligatoire mais plus lisible).

- puis entre parenthèses le type de boucle dont il s’agit. Il indique quel type d’élément on veut récupérer. La syntaxe est importante : le TYPE est indiqué entre parenthèses (sans espaces), en majuscules, et ce TYPE doit correspondre obligatoirement à l’un des types prévus dans SPIP ().

Par exemple :On va nommer _liste_des_articles la boucle que l’on écrit dans le but de sélectionner l’ensemble des articles du site, et les lister dans la page, soit :

<BOUCLE_liste_des_articles(ARTICLES){tout}>

On voit apparaitre ici un critère :{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 à une boucle.

Contexte des boucles et critères

Une boucle agit dans un contexte donné :

Notation simplifiée :

<BOUCLE_nom_boucle(ELEMENTS){critère1}{critère2}…{critèrex}>

code HTML, balises, autre(s) boucle(s)

</BOUCLE_la_boucle>

_nom_boucle , nom unique qui identifie la boucle

ELEMENTS, indique le type de la boucle (ARTICLES, RUBRIQUES …)

Attention au contexte :si j’utilise une boucle ARTICLES sans paramètres et sans contexte, par exemple :

<BOUCLE_liste_des_articles(ARTICLES)>

code HTML, balises, autre(s) boucle(s)

</BOUCLE_liste_des_articles>

Rien ne sera affiché, car par défaut, on se situe à la racine du site spip et un article est nécessairement DANS une rubrique.

Je peux préciser la rubrique concernée, le contexte, grâce au critère id_rubrique :

<BOUCLE_liste_des_articles(ARTICLES){id_rubrique=8}>

#TITRE

</BOUCLE_liste_des_articles>

La boucle affichera la liste des titres des articles de la rubrique dont l’ID est le numéro 8

Enfin, je peux déjà me trouver dans le contexte d’une rubrique, deux cas :

- 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(RUBRIQUES){id_rubrique=8}>

<BOUCLE_liste_des_articles(ARTICLES){id_rubrique}>

code HTML, balises …

</BOUCLE_liste_des_articles>

</BOUCLE_liste_des_rubriques>

Retourne l’ensemble des articles de la rubrique dont l’ID est le numero 8

La partie d’une boucle située entre accolades est appelée un critère.

Il sagit de filtres pour la recherche d’information dans la base de données lors d’une requête SPIP. Ces critères permettent :

- de sélectionner les éléments de la base de données qui seront mis en page (afficher les sous-rubriques inclu-ses dans cette rubrique, afficher les autres rubriques installées au même niveau hiérarchique que la présente rubrique...),

- d’indiquer la façon dont ils seront mis en page (classer les articles selon leur date, selon leur titre, afficher uniquement les 3 premiers articles, afficher la moitié des articles...).

Il peut y en avoir plusieurs on a alors plusieurs couples d’accolades{...}{...} successif.

On peut combiner les critères, et fabriquer des requêtes 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 #BALISE, c’est l’écriture générique que SPIP remplace en fonc-tion du contexte de la page par la valeur trouvée dans la base.

Par exemple,

dans le contexte d’une boucle ARTICLES

#TITRE, sera remplacé par le titre de l’article,

#TEXTE sera remplacé par le contenu (le texte) de l’article.

dans cet exemple :

<BOUCLE_liste_des_rubriques(RUBRIQUES){id_rubrique=8}>

<BOUCLE_liste_des_articles(ARTICLES) {id_rubrique}>

#TITRE

</BOUCLE_liste_des_articles>

</BOUCLE_liste_des_rubriques>

Il sera affiché le titre de tous les articles de la rubrique dont l’ID est 8.

Code Optionnel

Pour les boucles :

La syntaxe indiquée précédemment peut être complétée par des éléments conditionnels. SPIP permet d’indi-quer ce que l’on veut mettre en page : avant et après la boucle . Ce qui est utile dans le cas où la boucle contient un ou plusieurs résultats, ou dans le cas où il y a aucun élément à afficher.

<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 :

On peut utiliser du code optionnel pour les balises qui ne s’affichera que si la balise utilisée renvoie un résultat, selon la syntaxe suivante :

[ texte optionnel avant (#BALISE) texte optionnel après ]

Les filtres et les balises

On peut modifier le résultat d’une balise, soit pour en changer l’affichage (ex : afficher le titre entièrement en majuscules), soit pour récupérer une valeur découlant de cet élément (ex : les dimentions d’une image).

Pour appliquer des filtres aux éléments récupérés dans la base de données (valeur du champ ‘balise’, on suit la syntaxe suivante :

[ affichage conditionnel avant (#BALISE|filtre1|filtre2|...|filtren) affichage conditionnel après ]

La syntaxe est donc de faire suivre le nom de la balise, entre les parenthèses, par les filtres successifs, séparés par une barre verticale (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 retourné par une balise. Les filtres que vous développez, fonctions personalisées, doivent étre placés dans un fichier nommé ecrire/mes_fonctions et situé à la racine du site spip.

Spip le site :http://www.spip.net/

Auto formation :http://www.spip.net/rubrique144.html

http://www.spip-contrib.net/Mes-premieres-boucles-special

http://www.spip-contrib.net/Mon-premier-squelette-en-video

http://abel.foxylounge.com/-tools-.html

http://www.crdp.ac-caen.fr/pages/TICE/bao/spip.html

Spip le glossaire :http://www.spip.net/@