Personnaliser la dist de SPIP : les éléments

jeudi 6 novembre 2014, par ID

Pénultième volet de cette série de tutoriel sur la personnalisation du squelette livré dans la distribution de SPIP. On s’attachera ici à ajouter quelques éléments et à en déplacer d’autres sans vraiment aller dans la programmation. Au bout du compte on obtient un site tout simple, hautement personnalisé, plutôt ergonomique et très adaptatif, bref le site « idéal ».

Le bémol sur l’ergonomie étant lié surtout au contenu et ça, ce n’est pas à SPIP d’en décider !

 Les éléments personnalisés du site numericoach.net

Dans l’exemple du site numericoach.net qui a servi de base et de point de départ à cette série, l’idée était d’avoir sur la première page un pavé avec le descriptif du site tiré de la configuration de SPIP. Avantage  : c’est facile à mettre en place et ça oblige à avoir une bonne description.

Sinon il fallait, toujours en termes de changements par rapport à la dist que le slogan du site figure quelque part ainsi que son titre et qu’il y ait un bandeau pour l’identité visuelle.

Les menus ont changé de place, visiblement et dans les fichiers du site ainsi d’ailleurs que la barre de recherche dont le codage devait de toute façon être revu afin qu’elle puisse apparaître sur les petits écrans1. On retrouve les menus en haut et en bas ainsi qu’une barre de navigation spéciale, et enfin j’ai ajouté un « retour en haut de la page » inexistant sur la dist [1].

 Configuration du site

Il vaut mieux commencer par là, si ce n’est déjà fait, puisqu’on se sert des éléments qui y figurent.

Aller dans l’interface privée de SPIP, à laquelle on n’a pas touché d’ailleurs depuis le début, sauf pour créer une rubrique ou deux et des articles histoire de voir le rendu « en vrai ». Dans Configuration du site, remplir les champs Identité du site. Le descriptif du site, qui n’est pas essentiel, devient utile une fois affiché dans la partie publique.

PNG - 51.7 ko
Capture d’écran interface privée de SPIP
Les éléments à configurer.

 L’entête

Il se paramètre dans le fichier header.html qui doit être rangé dans le sous-dossier inclure de squelettes. On retrouve, dans cette version personnalisée, de haut en bas :

PNG - 32.4 ko
Capture d’écran de numericoach
Les éléments de l’entête du site numericoach.net.
  1. une barre de menu qui lie vers des pages spéciales
  2. le moteur de recherche
  3. le titre du site
  4. la bannière du site
  5. le slogan du site
  6. une barre de navigation

 La barre de pages spéciales

La première barre de menu (1) a été créée de novo en commençant par sa mise en forme. Ici j’ai créé, à la fin du fichier style.css, un style que j’ai nommé .pagesspeciales, le nom n’a rien d’impératif, il est indicatif des éléments auquel il va s’affecter, donc ici la ligne qui ouvre les pages « spéciales » du site, à savoir : contact, mentions légales, abonnement aux mises à jour et module de recherche.

La mise en forme se définit de cette façon :

PNG - 10.8 ko
Copie d’écran ligne notepad++
La ligne qui ajoute les liens vers les pages spéciales sur le site numericoach.net.

Les marges intérieures, padding, permettent à la couleur de fond de s’étaler un peu autour du texte et la marge extérieure supérieure à 10px, margin-bottom, c’est pour éviter que cela ne colle trop au haut de la fenêtre. La couleur de fond ici est très pâle et peut ne pas apparaître du tout selon les conditions de lecture.

Pour la définition du contenu de cette barre : rendez-vous dans le fichier header.html que l’on trouve dans le dossier inclure de squelettes. On en saisit les informations à la main. L’adresse de la page contact et de celle d’abonnement sont génériques et multilingues. Celle de la page Mentions légales est particulière car il s’agit en fait d’un article « normal ». On ouvre la page dans le navigateur et on copie-colle son adresse dans Notepad++ pour l’ajouter.

Concernant les icônes devant les éléments :

  1. les ranger dans le dossier images du répertoire squelettes
  2. indiquer l’information de cette façon :

#CHEMIN est ce qui permet à SPIP de retrouver le fichier. Dans l’exemple ci-dessus, les icônes sont regroupées dans un sous-dossier themes qui n’est pas impératif mais ça me paraît à moi personnellement plus rationnel [2]. Ne pas oublier de renseigner les informations alt et title.

 Le bandeau

Le bandeau (4) est également rajouté par rapport à la version originale de la dist. Il est rangé également dans le dossier images de squelettes et il a été dessiné à la largeur exacte (900px) de la page. Comme l’idée est de revenir à l’accueil quand on clique dessus, il faut rajouter le lien :

Il faut évidemment bien renseigner les balises title et alt à des fins d’accessibilité.

PNG - 7.1 ko
Code bannière numericoach.net
La ligne de code qui affiche la bannière.

Les autres éléments font partie de la dist.

 Le pied de page

Il se paramètre dans le fichier footer.html qui doit être rangé dans le sous-dossier inclure de squelettes. On retrouve, dans cette version personnalisée, de haut en bas :

PNG - 26.8 ko
Le pied de page de numericoach.net
Les éléments du pied de page personnalisé.
  1. un bandeau illustré
  2. la barre de navigation du site
  3. le nom du site
  4. la barre de pages spéciales sans icône
  5. les liens vers spip.net et vers le haut de la page.

(1) La banderole d’icônes d’outils numériques est une image de la largeur de la page et introduite comme le bandeau mais sans lien.

(2) La barre de navigation du site ne figurait pas dans la version originale, ce qui me semble dommage. J’ai donc tout bonnement rajouté la noisette « nav » sous cette forme :

où :

  • et

    introduisent et ferment le paragraphe

  • INCLURE pour indiquer ou se trouve ce qui doit être rajouté, fond=, et le nom du rajout, ici « nav ». L’élément « env » est essentiel pour un site multilingue, il indique quel environnement linguistique prendre en compte, n’y touchez pas même si votre site ne sera jamais plurilingue (après tout on ne sait jamais).

(3) Le nom du site est lié à sa configuration, il n’y à rien à faire de particulier.

(4) La barre des pages spéciales existant déjà, j’ai simplement ajouté ce qui manquait et indiqué les adresses.

(5) Enfin, l’écureuil était déjà en place, il m’a paru utile d’ajouter aussi la mention et l’ancre « retour en haut de la page » ce qui a été fait le plus simplement du monde en ajoutant ceci :

qui permet au navigateur de comprendre où aller, suivi d’une image (optionnelle et rangée dans le dossier adéquat du squelette) et du texte qui précise l’action. Dans le cadre d’un site multilingue, au lieu de rentrer ce texte « en dur », il aurait fallu saisir de cette façon <:reference du fichier de langue:nom du lien :> ainsi SPIP va aller chercher la référence qui va bien et afficher la mention dans la bonne langue.

Bémol  : ni l’écureuil ni le retour en haut de page n’apparaissent sur le site visionné sur un petit écran.

 Le module de recherche et le descriptif du site

Ces deux éléments, le premier car il fallait le corriger le deuxième car il a été ajouté au squelette d’origine ont droit à un traitement particulier.

 Le module de recherche

Le module de recherche est un peu particulier et, en outre, il n’apparaît pas sur les petits écrans, défaut qui sera corrigé dans la prochaine version de la dist lors de la sortie à une date non encore définie de SPIP 3.1.

Dans le cas particulier, il fallait déplacer le cartouche pour le mettre dans l’entête au même niveau que la barre de pages spéciales et évidemment corriger le problème3.

Pour que le module de recherche figure tout en haut, il fallait modifier la ligne 42 du fichier layout.css de cette façon-ci :

Et hop le formulaire se trouve bien en haut.

Pour qu’il apparaisse aussi sur les petits écrans et avoir ainsi un site parfaitement adaptatif (ou responsive) il a fallu commenter cette ligne tout en bas de layout.css (ligne 80) :

PNG - 21 ko
Ajout d’un commentaire
Une ligne qui rend le site complètement adaptatif.

Ainsi le navigateur comprend, et ça marche même sur des petits téléphones.

 Le descriptif du site

L’idée était d’afficher sur la page d’accueil, et uniquement celle-ci le descriptif qu’on a saisi dans la configuration de SPIP.

Première étape : paramétrer la mise en formant en allant créer une classe baptisée ici .encadre (le nom n’est pas impératif) dans le fichier style.css dans l’Habillage des éléments de contenus, quelque part entre la ligne 25 et la ligne 37 du fichier.

Deuxième étape : rajouter le descriptif sur la page d’accueil, fichier sommaire.html, à la racine du dossier squelettes au niveau des lignes 30-33 après :

et juste avant les fils de syndication des sites référencés :

La commande à rajouter est la suivante :

où : class est celle de la mise en forme prévue et #DESCRIPTIF_SITE_SPIP le champ « descriptif » du site.

Bravo, la nouvelle mouture du site est finie !

 Tous les chapitres de ce tutoriel

 Tous les chapitres de ce tutoriel

  1. Présentation de la série de tutoriels
  2. Personnaliser la dist de Spip : la préparation
  3. Personnaliser la dist de SPIP : les caractères
  4. Personnaliser la dist de SPIP : la décoration
  5. Personnaliser la dist de SPIP : les éléments
  6. Personnaliser la dist de SPIP : plugins, remerciements et clap de fin

[1Défaut qui a été corrigé depuis.

[2Ce qui est donc une notion relative.