Du style avec le code CSS

Le « vrai code » (HTML, PHP, etc.) sert à fabriquer les composants du site (une page fixe, un article du blog) et permet de réaliser des fonctions qui donnent à l’ensemble un peu d’intelligence comme afficher tel menu si telle page est ouverte, ou signaler au visiteur du site qu’il a oublié de mettre son nom dans un formulaire.

Ce n’est pas hyper compliqué, mais il y a encore plus simple : le code CSS. Lui ne fabrique rien, mais indique à quoi doit ressembler chaque type de composant du site.

Prenons par exemple deux composants d’une page : un paragraphe (délimité en HTML par <p> au début et </p> à la fin) et un titre (délimité par exemple par  <h3> et </h3>).
Ce qui fait que leurs aspects sont très différents réside dans quelques paramètres fournis par des lignes de code CSS : font-size indiquant la taille des caractères, font-weight précisant s’ils sont en maigre ou en gras, etc.

En modifiant quelques ligne de code CCS, on peut changer significativement, et pas forcément en bien, l’aspect du site.

Ou place-t-on le code CSS ?

On peut le mettre dans des fichiers prévus à cet effet (terminaison .css) et dénommés feuilles de style (style sheets en anglais).

Mais on peut en trouver, aussi, inclus dans des lignes écrites avec un autre type de code (PHP, HTML).

Pourquoi CSS ?

CSS est l’abréviation de Cascading Style Sheet.

Le présent site utilise le thème (enfant) Genesis-Sample. Son aspect général est donné au départ par la feuille de style nommée style.css fournie par ce thème et placée dans le répertoire wp-contents

Pour autant, ce n’est pas le seul fichier .css du site : rien que dans mon répertoire wp-contents/plugins, j’en trouve plus de 200 dont une vingtaine portant le nom style.css.

Comment tout ça se débrouille-t-il ?
Déjà, une feuille de style est très polie, elle ne parle que si on l’interroge. Et seules les feuilles pertinentes pour ce qu’il y a à afficher sont appelées. C’est rassurant.
Ensuite, le principe est simple : chacune ajoute les détails de présentation qu’elle contient, et en cas de conflit c’est la dernière qui a parlé qui l’emporte. Mais il n’y a pas forcément conflit : une feuille de style peut définir la police de caractères utilisées dans les tableaux, et une feuille de style appelée ensuite peut préciser que le texte des cellules de la première ligne est centré et en blanc sur fond bleu.

D’où le « C » de CSS pour indiquer le fonctionnement en cascade.

Néanmoins, il n’y a pas que les feuilles de style .css qui déterminent la valeur d’un paramètre donné (disons, par exemple, la couleur de la première ligne d’un tableau). En effet, la dernière feuille de style à avoir fixé ce paramètre peut parfaitement être contredite par quelques lignes de code HTML ou PHP appelées ultérieurement.
Le fonctionnement en cascade concerne donc non seulement les feuilles de style .css constituées intégralement de code CSS, mais aussi tous les morceaux de code CSS qui peuvent se trouver inclus dans d’autres codes.

Exemple : voici un tableau répondant au style par défaut que j’ai choisi (on y reviendra).

En observant son code HTML (choisir l’onglet « Texte » de l’éditeur TinyMCE), on voit que la case « Colonne B » est construite par le code HTML

<th>Colonne B</th>

dans lequel <th> désigne une cellule de la ligne du haut (« th » pour « table header cell »).

Si on fait un copier/coller de ce tableau mais en modifiant le code HTML comme suit

<th style= »background-color: #FFFFFF; color: #000000; »>Colonne B</th>
(la partie orange intègre, entre les guillemets, du code CSS modifiant la couleur du fond et celle du texte),

on obtient un tableau de présentation différente :

Modifier le style par l’ajout de code CSS

Par l’ajout de code CSS, on peut modifier la présentation de n’importe quel élément du site (paragraphe, tableau, page, etc.), voire du site tout entier.

Où peut-on trouver des explications sur ce code CSS ?
En entrant, dans un moteur de recherche, des mots-clés comme CSS, et cours ou tutorial, on trouve quantité d’informations. Pour se reposer de la doc anglophone, on peut se rendre sur l’excellent site developpez.com. Sinon, le site anglophone de référence me parait être w3schools.com.

Où place-t-on le code CCS ?
On trouve de multiples possibilités dans la littérature, plus ou moins compréhensibles selon la virtuosité de l’auteur.
Le présent article ne prétend pas à l’exhaustivité. D’ailleurs, je n’ai pas fait le tour de ce vaste sujet.

Un constat : plus une solution apparait simple et immédiate, moins elle est bonne.

On devine aisément que la méthode bourrin qui consiste à intégrer du code CSS au code HTML de l’élément dont on veut modifier la présentation est loin d’être optimum. Elle permet de voir rapidement le résultat obtenu, mais devra être répétée chaque fois que l’élément considéré se répète. C’est fastidieux, et c’est d’ailleurs pour éviter ça qu’on a inventé la feuille de style.

Autre idée immédiate : qu’à cela ne tienne, le thème que j’utilise possède une feuille de style style.css, je vais la modifier, agrandir la police trop petite, mettre de la couleur ici ou là, etc.
Double erreur. D’abord parce que si je loupe une modif, mon site risque fort de ne plus ressembler à rien. Ensuite parce que même si ma modif est la réussite du siècle, elle va se volatiliser à la première mise à jour du thème.

Moins pire : même idée, mais en ayant la bonne idée de travailler sur un thème enfant (chercher ça sur le web, on en parle dans de multiples sites). Le principe est que quand le thème parent est mis à jour, le thème enfant n’est pas impacté et on conserve les modifs qu’on y a apportées.
Personnellement j’utilise Genesis, et comme thème enfant Genesis-Sample. J’ai constaté que Genesis a été mis à jour une fois sans que Genesis-Sample ne le soit. Donc je veux bien croire que si je charcute le fichier style.css de Genesis-Sample, le risque est faible qu’il soit écrasé. Néanmoins, un des gros avantages de Genesis est que si ça me prend, je peux remplacer très facilement Genesis-Sample par Enterprise-Pro ou un autre thème. Dans ce cas, je suis bon pour recommencer sur le nouveau thème enfant ma modif du fichier style.css.

On commence à toucher du doigt que si modification du fichier style.css il y a, c’est obligatoirement sur celui d’un thème enfant, et si possible avec toutes les modifs portées en fin de fichier. Comme ça, je n’ai qu’à conserver la copie de mon bloc de modifs pour pouvoir facilement les réintégrer si besoin est. J’ai essayé, fonctionnellement c’est impeccable.

Le pas suivant est de stocker ledit bloc de modifs dans un fichier séparé nommé par exemple mon-style.css, avec l’idée d’appeler en bloc ce fichier personnel.

La méthode que j’ai retenue, et je ne suis pas le seul

Pour la recherche de sources d’infos sur internet, bien faire attention à la date de fraicheur des sites consultés, car certaines méthodes comme l’emploi de l’instruction @import (un genre d »’include mon-style.css » que l’on placerait à la fin du fichier style.css) sont maintenant déconseillées. J’ai évidemment essayé par esprit de contradiction (!) et par curiosité : ce n’est pas du tout équivalent au bloc de code CSS collé en fin du fichier style.css du thème enfant.

Là encore, la compréhensibilité des sites dépend de la virtuosité de l’auteur, et de sa réelle volonté d’expliquer et pas seulement de démontrer que lui, il sait faire…
Il y a une source dont j’ai benoitement copié le script à placer en fin du fichier functions.php du thème enfant, avec un résultat parfait d’emblée : c’est l’article de Vivek Kumar sur le site WPVKP.
Voici le script en question (il suppose que mon-style.css soit dans le même répertoire que style.css).

add_action( ‘wp_enqueue_scripts’, ‘charge_style_perso’, ‘999’ );
function charge_style_perso() {
wp_enqueue_style( ‘mon-style’, CHILD_URL . ‘/mon-style.css’, array(), PARENT_THEME_VERSION );
}

Maintenant, grâce à mon fichier mon-style.css,  j’ai les tableaux que je voulais sur la partie Aviation de mon site.
J’ai aussi ajouté un trait bleu en haut de ma page, transposition (18px de haut tout pareil…) de  l’élégant trait rouge du site interconnect/it. Merci à Firebug, extension de mon navigateur Firefox qui permet d’examiner codes HTML et CSS des sites visités, et du mien quand j’ai un résultat bizarre.
J’ai aussi passé en bleu clair le menu secondaire qui ne me plaisait pas en blanc.

J’ai utilisé mon premier hook !

wp_enqueue_scripts est un hook (en français crochet), c’est à dire un endroit du site (ou plutôt du code) auquel on peut accrocher / adjoindre des lignes de code supplémentaires, qui seront exécutées au bon endroit et avec la priorité voulue.
La fonction wp_enqueue_style qui est appelée ici permet la prise en compte du code CSS que l’on veut ajouter pour « customiser » le thème enfant retenu.

L’utilisation que j’ai faite de ce script montre qu’on peut utiliser un hook  sans rien y connaitre.

Suite à cette expérience, j’ai une réelle motivation à en savoir un peu plus sur cette façon d’utiliser l’environnement WordPress en général, et Genesis en particulier pour qui une importante communauté de développeurs propose quantité d’outils pour l’exploitation des hooks.
Il n’y a pas le choix, soit on comprend les mécanismes et on tape dans le code, soit on veut s’en dispenser et là, les outils les plus performants ne sont pas donnés.

Il y a, par exemple, Genesis Design Palette Pro de Reaktiv Studios, qui permet de modifier l’aspect du site : marges, couleurs, caractères, etc. Ou encore Genesis Extender de ColbaltApps. Mais pour un poste avec un an de support et de mise à jour, on parle de, respectivement, 50 et 40 US$.
Pour un professionnel, c’est vite amorti et il aurait tort de s’en priver. Personnellement, je préfère acquérir de temps en temps des thèmes Genesis à 35 US$ chacun avec mise à jour illimitée.

D’où mon principe de solution intermédiaire annoncé en page d’accueil : dépenser un peu (c’est le cas avec la plateforme Genesis et ses thèmes), et pour le reste, grâce aux hooks, modifier le code sans prendre de risques.
Et pour tout dire, ça m’intéresse de me remettre à jour sur HTML, PHP, CSS, javascript.