Personnaliser et adapter SPIP Développeur SPIP

Transcription

1 Personnaliser et adapter SPIP Développeur SPIP

2 En pratique

3 Pour réaliser ce TD vous avez besoin de :. Un navigateur web. Un client FTP ou une invite de commande Unix. Un éditeur de texte Pour le TD nous avons mis à votre disposition l'ensemble des fichiers d'un site SPIP contenant des articles déjà remplis. Accédez à votre site SPIP préinstallé : dans le navigateur saisissez l'adresse : numéro>/ tp-squelettes/ Dans une autre fenêtre de navigateur ouvrez l'interface d'administration de votre site spip : numéro>/tp-squelettes/ecrire/ Login : stag<votre numéro> Mot de passe : stag<votre numéro> Créez en local sur votre bureau un dossier appelé squelette_voyage qui sera l'image locale du dossier squelette_voyage sur le serveur. connectez vous au dossier squelette_voyage de votre site SPIP par SFTP ou SSH: serveur wwwufe.obspm.fr login : webfci mot de passe : webfci$2011 se placer dans le dossier squelette sur le serveur cd public_html/votre nom/squelette_voyage/ se placer dans le dossier squelette local lcd squelette_voyage Conservez cette connexion ouverte pendant la durée du TD.

4 Contenu et design Notre travail portera sur un site web de photos de voyage. Il propose une galerie de photos par lieu visité avec un texte descriptif. Le plan du site est le suivant : Voici la mise en page d'un article de notre site avec le squelette de base de SPIP :

5 La première étape consiste à définir une interface graphique pour notre site. On peut réaliser une maquette sous Gimp ou Photoshop. Voici le graphisme pour la mise en page d'un article. Pour installer un squelette SPIP (Dans le cas de ce TP ces opérations ont déjà été effectuées : vous n'avez rien à faire): 1) -Créer le dossier pour notre squelette SPIP. Appelons le squelette_voyage/. Et y placer les fichiers du jeu de squelettes. 2) -Indiquer à SPIP d'utiliser le jeu de squelettes de ce dossier pour la mise en page. Editer le fichier /ecrire/mes_options.php3 qui doit contenir le code PHP suivant : <?php $GLOBALS["dossier_squelettes"] = "squelette_voyage";?> On affecte à la variable globale "dossier_squelettes" le nom du dossier qui contient le jeu de squelettes que nous souhaitons utiliser.

6 La page sommaire Nous allons commencer par créer la page d entrée dans notre site web qui contiendra comme information le nom du site ainsi que l'affichage des rubriques de niveau 0 (les secteurs) de notre site : Cette page se nommera sommaire.html. Créer le fichier sommaire.php dans le dossier squelette_voyage/ local (sur votre bureau). Créer le fichier site_voyage.css dans le dossier squelette_voyage/ local (sur votre bureau). Ce fichier contiendra l'ensemble des styles CSS de notre site web et sera appelé dans l'entête de chacune des pages du squelette. CSS et HTML Pour le graphisme on découpe la page en "boîtes" qui correspondent aux balises <div> en HTML Nous avons trois boîtes : - Une boîte globale avec un cadre bleu, centrée dans la page. Nous appellerons cette boîte "interface" et nous créerons un style.interface qui correspondra à son aspect graphique (centré, cadre bleu). Cette boîte contient elle-même deux boîtes. - Une des boîtes qui contient le titre du site. Nous appellerons cette boîte "titre_site" et nous créerons un style.titre_menu qui correspondra à son aspect graphique. - Une autre boîte qui contient le menu. Nous appellerons cette boîte "menu" et nous créerons un style.menu qui correspondra a son aspect graphique.

7 En HTML le code correspondant à cette mise en page est : Editer le fichier sommaire.html Copier le code suivant <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns=" xml:lang="fr"> <head> </head> <body> <div id="interface" class="interface"> <div id="titre_site" class="titre_site"> <div id="menu" class="menu">  <div style="clear :both;"> </body> </html> Sauvegarder le fichier.

8 Nous devons ensuite créer une feuille de style CSS pour gérer l aspect graphique de cette interface. La boîte "interface" a les caractéristiques suivantes : Largeur : 1000px Hauteur minimale : 750px Alignement dans le navigateur : centré Une bordure bleu (la couleur exacte est codée #8CBCEC en hexadécimal) de 1px de large Les boîte "titre_site" et "menu" ont les caractéristiques suivantes : Alignement : centré Editer le fichier le fichier site_voyage.css. Copier le code suivant :.interface width:1000px; margin:auto; min-height:500px; border:#8cbcec; border-width:1px; border-style: solid;.titre_site text-align:center;.menu text-align:center; Sauvegarder le fichier. Il faut ensuite associer cette feuille de style au fichier sommaire.html du squelette : ajoutez la ligne suivante à l intérieur de l élément <head> du fichier sommaire.html : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns=" xml:lang="fr"> <head> <link href="squelette_voyage/site_voyage.css" rel="stylesheet" type="text/ css"/> </head>... sauvegarder le fichier Placer les fichier sommaire.html et site_voyage.css sur le serveur via la connexion SFTP. Recalculer la page dans le navigateur

9 Les balises de SPIP Jusque là nous n'avons utilisé que du code HTML et des styles CSS. Nous allons à présent utiliser du code propre à SPIP pour afficher le titre du site à l'intérieur de la boîte "titre_site". Le titre d'un site SPIP correspond à la valeur spécifiée dans l'interface d'administration de SPIP, via l'onglet "Configuration -> Contenu du site", c'est le premier champ. Dans notre cas, le site s'appelle "Voyages"; mais on pourrait utiliser notre squelette pour un autre site et ce serait un autre texte qu'on indiquerait à cet emplacement. Dans les squelettes SPIP il correspond à une balise qu'on peut utiliser à n'importe quel endroit d'un squelette la balise #NOM_SITE_SPIP ( html ). Lorsqu'on l'utilise, SPIP remplace cette balise par le nom du site web. Modifier le fichier sommaire.html en ajoutant la balise #NOM_SITE_SPIP dans la boîte titre_site :... <div class="titre_site"> [(#NOM_SITE_SPIP)]... sauvegarder Placer le fichier sommaire.html sur le serveur via la connexion FTP. On peut agrémenter notre CSS afin que notre titre ressemble à un vrai titre de site Modifier le fichier site_voyage.css.titre_site text-align:center; font-size: 36px; font-weight: bold; color: #8CBCEC; sauvegarder Placer le fichier sommaire.html sur le serveur via la connexion FTP. Recalculer la page dans le navigateur

10 Les Boucles de SPIP La réalisation d'un menu des rubriques de premier niveau nous offre une bonne occasion d'utiliser les boucles de SPIP. Mais avant toute chose nous devons nous replonger un peu dans le HTML et le CSS ; en effet notre menu devra avoir cet aspect là : Nous pouvons le décomposer en petites boîtes (une par item du menu) qui auront les caractéristiques suivantes : Largeur fixe : 200px; Hauteur variable Police de caractère : arial 12px gris Notre code HTML sera donc (ne pas modifier le fichier sommaire.html pour l'instant) : <div class="menu"> <div class="item"> item 1 <div class="item"> item 2 et chaque fois on remplacera item 1, item 2... par le titre d'une rubrique de niveau 1. Pour lister les titres des rubriques de niveau 1 nous allons utiliser la boucle RUBRIQUES ( ) La boucle rubrique s'utilise de la façon suivante : <Bn(RUBRIQUES)critères...> Instructions conditionnelles <BOUCLEn(RUBRIQUES)critères...> Données à afficher </ BOUCLEn> Instructions conditionnelles </Bn(RUBRIQUES)critères...> Instructions conditionnelles si aucun résultat n'est renvoyé <//Bn(RUBRIQUES)critères...> Pour lister les rubriques de premier niveau nous pouvons utiliser deux critères différents : - Le critère racine qui sélectionne les rubriques racines d'un site SPIP. Ces rubriques sont appelées "secteur" -Le critère id_parent=0 qui sélectionne toutes les rubriques filles de la rubrique dont le numéro est 0. Or il n'y a pas de rubrique de numéro 0 et ce critère sélectionne toutes les rubriques à la racine de SPIP. On utilise cette dernière solution. Nous n'utilisons pas d'instructions conditionnelles ici et les données à afficher seront les titres des rubriques imbriqués dans des boîtes "item".

11 Pour afficher les titres des rubriques on peut utiliser la balise #TITRE de la boucle RUBRIQUE qui affiche le texte du titre d'une rubrique. modifier le code de sommaire.html en ajoutant la boucle _rubriques : <div class="menu"> <BOUCLEmenu_rubriques(RUBRIQUES)id_parent=0> [<div class="item">(#titre)] </BOUCLEmenu_rubriques> Sauvegarder. Placer le fichier sommaire.html sur le serveur via la connexion SFTP. Afficher la première page du site recalculer la page et regarder le code HTML généré par SPIP pour comprendre le fonctionnement des boucles SPIP. Il nous reste a mettre en page ce menu en créant un style CSS pour les éléments "item". Modifiez le fichier site_voyage.css en ajoutant le style suivant à la suite des autres :.item width : 300px; float:left; font-size: 18px; font-weight: bold; color: #a6a6a6; Sauvegarder. Placer le fichier site_voyage.css sur le serveur via la connexion FTP. Actualiser la page dans le navigateur A présent nous voulons créer un lien sur chaque Item du menu afin que lorsqu'on clique sur une rubrique, on accède a la page de la rubrique en question qui affichera le texte descriptif de la rubrique. Pour cela on utilise la balise #URL_RUBRIQUE qui affiche l'url de la page de la rubrique. Essayez de deviner comment modifier le fichier sommaire.html pour définir un lien vers cette URL sur chaque item. Solution : <div class="menu"> <BOUCLEmenu_rubriques(RUBRIQUES)id_parent=0> [<div class="item"><a href="[(#url_rubrique)]">(#titre)</a>] </BOUCLEmenu_rubriques> Modifier le fichier sommaire.html et placer le fichier sur le serveur pour tester le résultat dans le navigateur.

12 Modifier le fichier site_voyage.css et placez les styles suivants à la suite des autres : /*texte des boutons de rubrique*/.item a width : 300px; float:left; font-size: 18px; font-weight: bold; color: #a6a6a6; text-decoration: none; /* effet de survol sur les rubriques*/.item a:hover width : 300px; float:left; font-size: 18px; font-weight: bold; color: #000000; text-decoration: none; placer le fichier sur le serveur actualiser le navigateur.

13 La balise #INCLURE Voici à quoi devra ressembler notre page rubrique : On remarque que toute une série d'éléments sont identiques à la page sommaire, à quelques détails près. Par exemple le cadre bleu le titre et le menu. Pour créer la page des rubriques nous devons créer et éditer un nouveau fichier rubrique. html dans notre dossier squelette_voyage/. On pourrait recopier toute une partie du code de sommaire.html. Mais nous allons utiliser une autre solution : la balise <INCLURE>( net/fr_article1828.html). La balise <inclure> permet d'intégrer dans un fichier de squelette SPIP du code contenu dans un autre fichier du même dossier squelette. On peut donc découper nos fichiers de squelettes SPIP en petites parties communes à plusieurs fichiers de squelettes. Nous allons par exemple extraire le code de notre menu du fichier sommaire.html et le remplacer par une balise <inclure>. Ensuite, nous pourrons utiliser de nouveau une balise inclure pour intégrer le menu au fichier rubrique.html.

14 Créer un nouveau fichier menu.html et éditer ce fichier. Copier le code suivant (extrait du fichier sommaire.html ): <div class="menu"> <BOUCLEmenu_rubriques(RUBRIQUES)id_parent=0> [<div class="item"><a href="[(#url_rubrique)]">(#titre)</a>] </BOUCLEmenu_rubriques> Remplacer ce même code dans le fichier sommaire.html par <INCLUREfond=menu> Sauvegarder, placer les fichiers sommaire.html et menu.html sur le serveur, reclalculer la page. Copier-coller l'intégralité du code du fichier sommaire.html dans le fichier rubrique. html. Sauvegarder, placer le fichier rubrique.html sur le serveur, reclalculer la page. Il n'y a aucune différence entre la page sommaire et une page rubrique. Il faudrait au moins que la rubrique en cours soit d'une couleur différente dans le menu du haut.

15 La balise #EXPOSE Pour cela on peut utiliser la balise #EXPOSE ( article2319.html) L objet qui est «exposé» est l article (ou la brève, la rubrique, le mot-clé ou l auteur) qui appartient au «contexte» courant. La Balise #EXPOSE est remplacée par les caractères "on" si une rubrique listée par une boucle RUBRIQUES correspond à la rubrique contextuelle (passée en paramètre a la page). Si vous cliquez sur la rubrique "Irlande", vous remarquerez que l'url se termine par "spip. php?rubrique2", la rubrique numéro 2 est la rubrique contextuelle dans ce cas là. Et lorsque la boucle RUBRIQUES du menu traitera la rubrique 2, la balise #EXPOSE affichera les caractère "on", si ce n'est pas la rubrique 2 qui est traitée, la balise #EXPOSE n'affichera rien. - On crée une nouvelle classe CSS item_on avec une couleur différente pour indiquer dans quelle rubrique on se situe. Editer le fichier site_voyage.css. en ajoutant le style suivant à la suite des autres:.item_on a width : 300px; float:left; font-size: 18px; font-weight: bold; color: #87b7e8; text-decoration: none; sauvegarder Editer le fichier menu.html de façon a intégrer la balise #EXPOSE <div class="menu"> <BOUCLE_menu_rubriques(RUBRIQUES)id_parent=0> [<div class="item[_(#expose)]"><a href="[(#url_rubrique)]">(#titre)</a></ div>] </BOUCLE_menu_rubriques> -! Important : comme on a utilisé une balise <INCLURE> dans nos fichiers de squelettes, nous devons passer les informations de contexte (ID de la rubrique ou de l'article en cours) au fichier inclus, ceci se fait à l'aide de paramètres. Rien n'est à modifier dans le fichier sommaire.html, puisqu'il n'y a pas de contexte sur cette première page. En revanche on appelle le fichier rubrique.html avec un numéro de rubrique. Modifier la balise <INCLURE> dans le fichier rubrique.html : <INCLUREfond=menuid_rubrique> Sauvegarder Placer les fichier rubrique.html, menu.html et site_voyage.css sur le serveur, reclalculer la page.

16 Mise en page de la liste des articles en colonne à gauche Nous allons à présent réaliser un menu pour lister l'ensemble des articles d'une rubrique en prenant exemple sur le fichier menu.html. Lorsqu'on intégrera ce menu dans une page (rubrique ou article) on passera en paramètre un contexte de rubrique (et éventuellement un contexte d'article). Le menu affichera l'ensemble des articles de cette rubrique. On suppose que id_rubrique est défini. On peut lister les titres des articles de cette rubrique avec une boucle ARTICLE ( et la balise #TITRE selon un système similaire au menu des rubriques. Le menu sera contenu dans une boîte "menu_articles". On inclura les items de ce menu dans des boîtes qu'on appellera "item_articles". Créer un fichier menu_articles.html dans le dossier squelette_voyage/. Essayez de trouver le code du fichier menu_articles.html. Solution : Sauvegarder <div class="menu_articles"> <BOUCLEmenu_articles(ARTICLES)id_rubrique> [<div class="item_articles[_(#expose)]"><a href="[(#url_ ARTICLE)]">(#TITRE)</a>] </BOUCLEmenu_articles> Intégrer ce menu dans la page rubrique.html, comme on à déjà intégré le premier menu, avec la balise <INCLURE> : <INCLUREfond=menu_articlesid_rubrique id_article > sauvegarder

17 Editer le fichier site_voyage.css. en ajoutant les styles suivants à la suite des autres :.item_articles margin-top:10px; font-size: 14px; font-weight: bold; color: #a6a6a6;.menu_articles float:left; margin-top:90px; margin-left:15px; width:150px;.item_articles a font-size: 14px; font-weight: bold; color: #a6a6a6; text-decoration: none;.item_articles a:hover font-size: 14px; font-weight: bold; color: #000000; text-decoration: none;.item_articles_on margin-top:10px; font-size: 14px; font-weight: bold; color: #a6a6a6;.item_articles_on a font-size: 14px; font-weight: bold; color: #87b7e8; text-decoration: none; Sauvegarder Placer les fichier rubrique.html, menu_articles.html et site_voyage.css sur le serveur, reclalculer la page.

18 Affichage du texte de la rubrique Nous allons créer une nouvelle boîte pour afficher le contenu de la rubrique. Cette boîte contiendra elle même deux boîtes : une pour le titre de la rubrique et une pour le texte descriptif de la rubrique. Editer le fichier rubrique.html Après la balise <INCLURE> du menu des articles ajouter le code suivant : <div class="contenu"> <div class="titre"> <div class="texte"> sauvegarder Editer le fichier site_voyage.css. en ajoutant les styles suivant à la suite des autres: /* boîte qui contient les titres et les textes des pages*/.contenu float:left; margin-top:150px; width:400px; /*Boîte qui contient les titres des pages*/.titre font-size: 24px; font-weight: bold; color: #8CBCEC; /*Boîte qui contient les textes des pages*/.texte font-size: 12px; color: #a6a6a6; sauvegarder Pour afficher le contenu de la rubrique nous allons utiliser une boucle RUBRIQUES qui ne sélectionnera que la rubrique en cours via le critère id_rubrique. On affichera le titre avec la balise #TITRE de la boucle RUBRIQUES et le texte via la balise #TEXTE de la boucle RUBRIQUES. Editer le fichier rubrique.html en ajoutant juste après les menus <BOUCLE_rubrique_actuelle(RUBRIQUES)id_rubrique> <div class="contenu"> <div class="titre">[(#titre)] <div class="texte">[(#texte)] </BOUCLE_rubrique_actuelle> sauvegarder Placer les fichier rubrique.html et site_voyage.css sur le serveur, reclalculer la page.

19 Affichage des articles Nous pouvons réutiliser une bonne partie du code du fichier rubrique.html pour créer notre fichier article.html. Créer un fichier article.html. Editer ce fichier, copier-coller le code suivant en modifiant la boucle RUBRIQUE en boucle ARTICLE et le critère id_rubrique en critère id_article: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns=" xml:lang="fr"> <head> <link href="squelette_voyage/site_voyage.css" rel="stylesheet" type="text/ css" /> </head> <body> <div class="interface"> <div class="titre_site"> [(#NOM_SITE_SPIP)] <INCLUREfond=menuid_rubrique> <INCLUREfond=menu_articlesid_rubrique> <BOUCLE_article_actuel(ARTICLES)id_article> <div class="contenu"> <div class="titre">[(#titre)] <div class="texte">[(#texte)] </BOUCLE_article_actuel> </body> </html> sauvegarder Placer le fichier articles.html sur le serveur, reclalculer la page. On remarque que le menu des articles (à droite) ne s'affiche plus sur la page article et que la rubrique en cours n'est pas affichée sur le menu du haut. Cela vient du fait qu'on passe le critère id_rubrique dans les balises <INCLURE> alors qu'on appelle le fichier article.html non plus avec un numéro de rubrique mais avec un numéro d'article. id_rubrique n'est donc pas défini dans la page et id_article prend la valeur passée en paramètre. Il faut donc se placer dans le contexte de l'article avant d'afficher les menus. Lorsqu'un article a été sélectionné avec une boucle ARTICLES, on se trouve dans le contexte de cet article. Le critère id_rubrique correspond alors au numéro de la rubrique de l'article sélectionné.

20 Modifier le fichier article.html en déplaçant le début de la boucle _article_actuel avant les balises <INCLURE> : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns=" xml:lang="fr"> <head> <link href="squelette_voyage/site_voyage.css" rel="stylesheet" type="text/ css" /> </head> <body> <div class="interface"> <div class="titre_site"> [(#NOM_SITE_SPIP)] <BOUCLE_article_actuel(ARTICLES)id_article> <INCLUREfond=menuid_rubrique> <INCLUREfond=menu_articlesid_rubrique> <div class="contenu"> <div class="titre">[(#titre)] <div class="texte">[(#texte)] </BOUCLE_article_actuel> </body> </html> sauvegarder Placer le fichier article.html sur le serveur, reclalculer la page.

21 Les documents associés : une photothèque Nous allons à présent utiliser la boucle DOCUMENTS pour lister les éléments multimédia associés a un article et réaliser une photothèque. Nous allons créer une boîte "document_associes" cette boîte contiendra une boîte "photo" pour l'image affichée en grand et une boîte "planche_contact" pour la planche contact. La boîte "planche_contact" contiendra elle même des petites boîtes "photo_icone" pour les miniatures de chaque images. Au niveau HTML on obtient le code suivant : Ne rien saisir pour le moment <div class=" document_associes"> <div class="photo"> <div class="planche_contact"> <div class="photo_icone"> Pour la photo en grand : Si un paramètre id_document est passé dans l'url alors on peut faire une requête sur ce document et l'afficher dans la boîte "photo". Pour la planche contact on utilise la boucle DOCUMENTS avec le critère id_article afin de récupérer tous les documents associés à l'article en cours. On affiche ensuite le résultat dans les boîtes prévues. Pour afficher les images on utilisera la balise #FICHIER de la boucle DOCUMENTS et le filtre image_reduire qui permet de générer des miniatures d'images automatiquement. Ce filtre prend en critère la dimension maximale de l'image réduite. Modifier le fichier article.html en ajoutant le code suivant juste avant </BOUCLE_ article_actuel> <div class="document_associes"> <BOUCLE_photo(DOCUMENTS)id_document> <div class="photo">[(#fichier image_reduire300)] </BOUCLE_photo> <B_planche_contact> <div class="planche_contact"> <BOUCLE_planche_contact(DOCUMENTS)id_article> <div class="photo_icone"> [(#FICHIER image_reduire50)] </BOUCLE_planche_contact> </B_planche_contact> Sauvegarder

22 Editer le fichier site_voyage.css. en ajoutant les styles suivant à la suite des autres: /*la boîte pour l'ensemble photo en grand + planche contact*/.document_associes margin-top:150px; margin-left:80px; margin-bottom:50px; width: 300px; float:left; /*la boîte pour la photo en grand*/.photo width:300px;.photo img border: 3px solid #000000; /*La boîte planche contact*/.planche_contact /*les boîtes pour les miniatures*/.photo_icone float:left; margin:5px; width:50px; height:50px; /*le miniatures avec un cadre noir*/.photo_icone img border: 3px solid #000000; Sauvegarder Sur chaque image de la planche contact nous devons ajouter un lien vers la page article en cours avec un paramètre en plus : l'id_document du document sur lequel on vient de cliquer ; pour cela on utilise la balise #URL_ARTICLE de la boucle ARTICLES _article_actuel. On utilise aussi le filtre technique parametre_url (): Modifier le fichier article.html en ajoutant les liens sur les miniatures. <div class="photo_icone"> [<a href="[(#_article_actuel:url_article parametre_ urlid_document,[(#id_document)])]">(#fichier image_reduire50)</a>] sauvegarder Placer les fichier article.html et site_voyage.css sur le serveur, reclalculer la page.