4.4Personnalisation : CSS additionnel & thème enfant
Vient le moment où l'on veut aller au-delà des réglages du thème : changer une couleur précise, un espacement, masquer un élément. Le CSS additionnel permet ces ajustements visuels sans toucher au thème (Personnaliser → CSS additionnel, ou éditeur de site). Pour des modifications plus profondes (fonctions, modèles), on crée un thème enfant : il hérite du thème parent mais accueille vos changements — qui survivent alors aux mises à jour du parent.
Vous ajouterez du CSS ciblé (avec l'inspecteur du navigateur pour trouver le bon sélecteur), comprendrez POURQUOI ne jamais modifier directement un thème parent (mises à jour qui écrasent tout), et saurez quand un thème enfant s'impose.
Vocabulaire de la section
- CSS additionnel
- Des règles de style ajoutées sans toucher au thème (Personnaliser → CSS additionnel) : couleurs, espacements, masquage d'éléments.
- Thème enfant
- Un thème qui HÉRITE d'un thème parent et reçoit vos modifications (CSS, functions.php, modèles) : elles survivent aux mises à jour du parent.
- Inspecteur du navigateur
- L'outil (F12 → clic droit → Inspecter) qui révèle le CSS d'un élément : indispensable pour trouver le bon sélecteur à cibler.
- Sélecteur CSS
- La cible d'une règle de style (.classe, #id, balise) : viser précisément l'élément à modifier sans casser le reste.
- Ne pas modifier le parent
- La règle d'or : toute modification directe d'un thème parent est ÉCRASÉE à sa prochaine mise à jour — d'où le CSS additionnel et le thème enfant.
Pourquoi ne faut-il JAMAIS modifier directement un thème parent ?
En pratique — Ajuster finement l'apparence, proprement
- Repérez un élément à modifier sur votre site → clic droit → Inspecter (F12) : lisez sa classe CSS et ses styles actuels.
- Apparence → Personnaliser → CSS additionnel (ou l'éditeur de site) : écrivez une règle ciblée (ex. .mon-bouton { background-color: #21759b; }) et observez l'aperçu.
- Comprenez la limite : le CSS change l'APPARENCE, pas les fonctions. Pour modifier functions.php ou un modèle, il faut un thème enfant.
- Si vous en avez besoin : créez un thème enfant (dossier avec style.css + functions.php minimal, ou via une extension « Child Theme Configurator ») — vos modifications deviennent pérennes.
Points clés à retenir
- Le CSS additionnel ajuste l'apparence sans toucher au thème : couleurs, espacements, masquage.
- L'inspecteur du navigateur (F12) révèle le bon sélecteur à cibler : la boîte à outils du personnalisateur.
- Ne modifiez JAMAIS directement un thème parent : la mise à jour écraserait tout.
- Un thème enfant reçoit vos modifications profondes (fonctions, modèles) qui survivent aux mises à jour.
Questions fréquentes
CSS additionnel ou thème enfant : quand passer à l'enfant ?
Le CSS additionnel suffit pour tout ajustement VISUEL (styles). Le thème enfant devient nécessaire dès que vous voulez modifier le CODE du thème : functions.php (ajouter une fonctionnalité), un fichier de modèle (template PHP), ou surcharger des parties du thème. Tant que vous ne faites que du style, restez sur le CSS additionnel.
Le CSS additionnel est-il perdu si je change de thème ?
Le CSS additionnel du Personnalisateur est lié au thème actif : changer de thème ne l'applique plus (il n'est pas supprimé, mais inactif). C'est logique — le CSS ciblait des classes du thème précédent. Notez vos règles importantes avant un changement de thème.