Thème : Thèmes | Niveau : intermédiaire
Objectifs pédagogiques
- Connaître les 3 façons d’ajouter du CSS sans toucher aux fichiers du thème d’origine
- Choisir la bonne méthode selon la portée du besoin
- Comprendre pourquoi certaines méthodes survivent à une mise à jour du thème et d’autres non
Les 3 méthodes
1. Dans le bloc
Chaque bloc propose, dans son panneau de réglages sous l’onglet Avancé, un champ Classes CSS additionnelles. Une classe saisie ici peut ensuite être stylée dans l’éditeur de style (méthode 2) ou dans le fichier du thème (méthode 3).
Portée : le ou les blocs portant cette classe, aussi précisément qu’on le souhaite.
Selon l’extension installée
Certaines extensions de blocs (Spectra, Kadence Blocks, GenerateBlocks…) enrichissent ce panneau natif avec un éditeur CSS complet par bloc, voire un bouton pour appliquer le style à tous les blocs du même type sur le site. Ce n’est pas une fonctionnalité native de WordPress : elle dépend entièrement de l’extension installée, et son emplacement exact varie d’une extension à l’autre.
2. Dans l’éditeur de style
- Sur un thème FSE (Full Site Editing, édition complète du site) comme Twenty Twenty-Five : Apparence → Éditeur → Styles → CSS additionnel, comme vu dans l’astuce “Créer un bloc HTML personnalisé”.
- Sur un thème classique : Apparence → Personnaliser → CSS additionnel.
Portée : tout le site, sans créer ni modifier aucun fichier. La règle est stockée en base de données (table d’options ou entrée theme_mod selon le cas), pas dans le code du projet.
3. Dans le fichier du thème (thème enfant)
Modifier directement le thème installé n’est jamais recommandé : toute modification serait perdue à la prochaine mise à jour du thème. La bonne pratique consiste à créer un thème enfant, qui hérite du thème parent tout en restant un dossier distinct :
- Le fichier
style.cssdu thème enfant reçoit les règles CSS. - Le fichier
functions.phpdu thème enfant charge ce style avecwp_enqueue_style().
Portée : tout le site, avec un code versionnable (Git) et conservé quelles que soient les mises à jour du thème parent.
Comparer les 3 méthodes
| Méthode | Portée | Où c’est stocké | Survit à une mise à jour du thème |
|---|---|---|---|
| Classe CSS additionnelle (bloc) | Un bloc ou une famille de blocs | Contenu de la page (base de données) | Oui |
| CSS additionnel (éditeur de style) | Tout le site | Base de données (réglages du thème) | Oui, mais pas versionné dans le code |
Thème enfant (style.css) | Tout le site | Fichier du thème enfant | Oui, et versionnable |
Quelle méthode choisir
- Une poignée de règles ponctuelles, sur un ou deux éléments précis → classe CSS additionnelle dans le bloc concerné.
- Un ajustement global, rapide, sans avoir de thème enfant en place → CSS additionnel dans l’éditeur de style.
- Un projet destiné à durer, avec un code que l’on veut pouvoir suivre, versionner et redéployer → thème enfant, seule méthode qui place le CSS dans un fichier du projet plutôt qu’en base de données.
Instructions étape par étape
1. Identifier la portée du besoin
Un élément précis, tout le site sans fichier, ou un projet durable.
2. Appliquer la méthode correspondante
Selon les 3 méthodes détaillées plus haut.
3. Vérifier qu’aucune règle n’est dupliquée
Si plusieurs méthodes sont utilisées sur un même projet, s’assurer qu’une même classe n’est pas stylée à deux endroits différents, ce qui complique la maintenance.
Ce qu’il faut retenir
- Modifier directement les fichiers du thème installé n’est jamais la bonne solution : les changements seraient perdus à la prochaine mise à jour.
- La classe CSS additionnelle d’un bloc convient à un besoin ponctuel et précis.
- Le CSS additionnel de l’éditeur de style convient à un ajustement rapide, à l’échelle du site, sans fichier.
- Le thème enfant reste la seule méthode qui place le CSS dans un fichier du projet, versionnable et durable.