Personnaliser et adapter SPIP Développeur SPIP

Transcription

1 Personnaliser et adapter SPIP Développeur SPIP

2 En Théorie

3 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 langage 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 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

4 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 : 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 interface 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») pendant 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 automatiquement (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 :

5 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 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 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.

6 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 ( ). 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.

7

8 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 boucles 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>

9 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 incluses 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 fonction 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.

10 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 indiquer 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 ]

11 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 : Auto formation : Spip le glossaire :