Ajouter / Modifier des CSS à votre site WordPress

Les CSS (Cascading Style Sheets ou feuilles de style en cascade) modifient l’apparence d’un site web.
Le meilleur exemple de ce que sont les CSS est mis en évidence par un site que seuls les plus anciens développeurs connaissent : csszengarden.com, initialement mis en ligne en 2003.

Le contenu de la page reste le même, mais en fonction de la feuille de style qui est appliquée, les couleurs, les tailles et polices de texte, la mise en page changent drastiquement.

Pour avoir un site web cohérent, donc d’apparence professionnelle, il est important d’appliquer ces CSS à l’ensemble de votre site : Quelle que soit la page où se trouve votre internaute, un sentiment d’unité doit se dégager du site en question.

Le problème des page builders (constructeurs de page) tel qu’Elementor par exemple, et qu’ils permettent de faire tout… et surtout n’importe quoi, notamment en ce qui concerne la mise en page.

D’autre part, il est parfois nécessaire d’inclure des fonctionnalités provenant d’extensions tierces.
La différence entre un site web professionnel et un site web amateur tient souvent à la bonne intégration de ces nouveaux éléments qui se fondent harmonieusement dans la page. C’est ici qu’il faut parfois surcharger les CSS du plugin, afin de leur appliquer le style général du site.

L’objet de cet article n’est pas de rentrer dans les détails des CSS, car des livres entiers existent à ce sujet, mais davantage de vous proposer différents manières d’intégrer ces CSS dans votre site WordPress.

Style.css

Chaque site WordPress possède un thème, lequel contient par convention un fichier style.css.
Ce fichier contient des directives, en commentaires, qui permettent de décrire le thème, mais il inclut aussi et surtout les fameuses CSS.

Notez qu’il est recommandé de créer un thème enfant, possédant lui-même un fichier style.css. Ainsi lorsque le thème est mis à jour, vos ajouts et modifications sont préservés.

L’intérêt de ce fichier, est qu’il est commun à l’ensemble du site. Il sera ainsi chargé en « cache » (en mémoire en quelque sorte), au chargement initial du site, puis récupéré du cache navigateur à chaque nouvelle page affichée de ce site.

En revanche, pour mettre à jour le fichier, il faudra sûrement le modifier en local (sur votre PC ou Mac), avant de le « pousser » (upload) sur votre serveur distant, à l’aide d’un logiciel FTP, tel que Filezilla, ou même en ligne de commande.

Cela peut sembler compliqué, en réalité c’est assez simple, encore faut-il l’avoir fait au moins quelques fois.
Il suffit d’écraser le fichier en question en le passant de la fenêtre de gauche (votre ordinateur) à celle de droite (le serveur distant, sur lequel se trouve votre site). Evidemment, une sauvegarde est bienvenue, avant ce genre de manipulation.

Une autre solution consiste à éditer directement ce fichier via l’interface d’administration (Apparence > Editeur de fichiers du thème), mais on travaille sans filet. Il est donc vivement recommandé, encore une fois, d’avoir un backup du fichier en question, car on a vite fait de casser la mise en page de tout le site si on n’y prend pas garde.

Apparence > Personnaliser

Chaque thème WordPress posséde une fonction « personnaliser », qui permet notamment d’ajouter ou surcharger des directives CSS directement via l’administration de votre site WordPress.
Cette fonctionalité est accessible via Apparence > Personnaliser

Il est ainsi assez facile de faire des ajustements, quasiment en temps réel, mais ce n’est pas très propre, ni très performant : On modifie bien souvent des instructions déjà chargées dans la page.
Votre code CSS finit par grossir, et se retrouve ajouté dans le flux HTML de toutes vos pages, même si une partie du code que vous avez ajouté ne concerne qu’une page ou deux.

Plugins dédiés

Bien que cela ne me paraisse pas souhaitable, il me faut mentionner ici quelques plugins comme Header & Footer scripts permettant d’ajouter des CSS.
L’avantage c’est qu’il n’est pas nécessaire d’avoir un niveau technique très avancé pour aboutir au résultat souhaité.
Mais pourquoi ajouter un e-nième plugin quand les deux solutions précédentes existent ?
Certes, certains permettent de rajouter des CSS spécifiques pour telle ou telle page.
Mais dans la mesure du possible, je préfère vous en dissuader : Plus de plugins, plus de problèmes potentiellement (performances / sécurité / mises à jour).

Code Snippets est l’exception qui confirme la règle, celui-ci à l’avantage de pouvoir rajouter du code directement depuis l’interface d’administration. Contrairement aux autres qui ne rajoutent que du Javascript ou du CSS, ici on peut même ajouter des instructions PHP. Il est donc idéal pour tester du code rapidement, sans passer par FTP, ou modifier le fichier functions.php via l’éditeur de thème. A terme, je préfère néanmoins encapsuler ces « snippets » dans un plugin dédié.

 

Développement spécifique

Si vous connaissez bien WordPress, il est possible avec un minimum de connaissance technique de faire exactement ce que vous souhaitez.
Que ce soit via le fichier functions.php de votre thème, ou via un plugin spécialement développé pour ce projet, il est possible de rajouter des instructions CSS.

La documentation WordPress vous explique comment rajouter des CSS et même du javascript à votre site web :

function condorito_css_perso() {
wp_register_style( 'condorito_css', get_stylesheet_directory_uri().'/condorito.css' );
wp_enqueue_style( 'condorito_css' );
}
add_action( 'wp_enqueue_scripts', 'condorito_css_perso' );

Il est également possible de rajouter une logique conditionnelle, afin de ne rajouter des feuilles de styles spécifiques que lorsque telle page (en fonction de son ID, ou de son « slug ») ou type de pages est affichées.

Enfin plutôt que d’utiliser le hook wp_enqueue_scripts, on peut être plus spécifique et dire que l’on veut que les charger dans l’entête HTML (c’est-à-dire entre les balises <HEAD></HEAD>), ou en fin de page (avant </BODY>). On utilisera alors, respectivement :

add_action( 'wp_head', 'condorito_css_perso' );
add_action( 'wp_footer', 'condorito_css_perso' );

Le premier hook est à privilégier si l’élement auquel s’appliquent les CSS est « above the fold ».
La partie « above the fold » (littéralement au dessus du pli) est la partie immédiatement visible sans scrolling. Hélas pour les créateurs de sites web, la position de la ligne de flottaison varie en fonction de la taille d’écran et de la configuration du terminal utilisé.

Si votre élément est tout de suite visible, il faut que le style CSS lui soit correctement affiché, dès l’affichage de la page.
En revanche, si votre élément se situe en dessous de cette ligne, pour des raisons de performance, on préférera différer le chargement des CSS.

Si vous souhaitez rajouter des CSS uniquement pour une page en particulier, il suffit d’utiliser les tags conditionnels (conditional tags) :

Par exemple, si je veux insérer des CSS uniquement sur une page spécifique, portant l’identifiant ou un slug particulier, ou bien la page d’accueil :

<?php 
if ( is_page(195) ){
 //insert css here
}

if ( is_page('mon-slug') ){
 //insert css 2 here
}

if ( is_front_page() ){
 //insert css 3 here
}

 

!important : Ne pas abuser.

Selon l’ordre de chargement des fichiers CSS, il est parfois difficile de surcharger un élément du DOM (Document Object Model) grâce à son identifiant (ID) ou sa classe (class), car nos modifications sont écrasées par le fichier initial CSS ajouté par un plugin. Dans ce cas, il faudra être le plus spécifique dans notre définition de la directive CSS :

p.description > a{
 color:#ffcc33; /*cette couleur ne s'appliquera qu'au lien directement présent sous un paragraphe portant la classe "description" */
}

Une autre solution consiste à utiliser l’attribut !important(notez le point d’exclamation en préfixe).
C’est un super joker, qui a priorité sur toutes les autres directives CSS, même si elles ne sont redéfinies après. Ne pas en abuser donc.

p.description > a{ 
color:#ffcc33!important; /*c'est moi qui fait la loi */ }

Nous avons donc expliqué dans cet article, ce qu’étaient les CSS, et quelles étaient les différentes façons d’ajouter ou de modifier des feuilles de styles à votre site. C’était un peu technique, j’espère que vous avez suivi.
Quelle que soit la méthode choisie, vous devez toujours mettre en place des sauvegardes régulières de votre site web, avant toute intervention.