4.4Personnalisation : CSS additionnel & thème enfant
L'essentiel en 30 secondes
- Le CSS additionnel modifie couleurs, espacements ou visibilité sans toucher au thème.
- L'inspecteur du navigateur (F12) révèle le bon sélecteur à cibler ; on reste précis pour ne pas casser le reste.
- Ne jamais modifier directement un thème parent : les mises à jour écrasent tout. Pour du durable, un thème enfant reçoit les modifications.
Mini-cas filé — ajuster sans casser
Samir veut affiner le bouton de contact de l'atelier : une couleur plus proche du bleu de la marque et un espacement plus généreux. Il utilise l'inspecteur pour trouver le sélecteur, puis ajoute quelques lignes de CSS additionnel. Plus tard, Hassan demandera une modification de modèle plus profonde : Samir créera alors un thème enfant pour que le travail survive aux mises à jour.
Suite du cas 4.3 — l'apparence mérite des ajustements précis et durables.
1. CSS additionnel et inspecteur
Le CSS additionnel (Apparence → Personnaliser → CSS additionnel, ou éditeur de site) permet d'ajuster l'apparence sans modifier les fichiers du thème : couleur d'un bouton, espacement d'une section, masquage d'un élément décoratif. C'est rapide et réversible.
Pour cibler le bon élément, l'inspecteur du navigateur (F12, clic droit → Inspecter) montre les classes et les styles appliqués. Samir écrit un sélecteur précis — une classe plutôt qu'une balise globale — et vérifie l'aperçu sur ordinateur et mobile avant de publier.
2. Thème enfant et pérennité
Le CSS change l'apparence, pas les fonctions. Pour modifier un modèle ou ajouter des fonctions, il faut toucher au thème — mais jamais directement au thème parent : sa prochaine mise à jour écraserait les modifications.
La solution durable est le thème enfant : il hérite du parent et reçoit vos fichiers (style.css, functions.php, modèles). Les mises à jour du parent continuent, vos changements restent. Samir ne crée un thème enfant que lorsque le besoin dépasse le CSS, pour éviter une complexité inutile.
🔎 Exemple concret — Ajuster le bouton de contact (cas Samir)
Inspecteur : bouton .btn-contact.
CSS additionnel :
.btn-contact { background:#21759b; padding:14px 28px; border-radius:8px; }
Vérification desktop + mobile.
→ Pour modifier le modèle de la page Collections :
créer un thème enfant et y copier le modèle à adapter.Résultat : un ajustement précis et conservé.
Leçon : on choisit l'outil selon la profondeur du changement.
Vocabulaire de la section
- CSS additionnel
- Règles de style ajoutées sans toucher au thème, via le Personnalisateur ou l'éditeur de site.
Exemple simple : changer la couleur du bouton de contact.
Ce que ce n'est pas : éditer directement style.css du thème parent.
Réflexe : petit ajustement visuel = CSS additionnel.
- Thème enfant
- Thème qui hérite du parent et reçoit les modifications durables.
Exemple simple : un modèle de page adapté dans l'enfant.
Ce que ce n'est pas : modifier le parent et perdre tout à la mise à jour.
Réflexe : modification durable = thème enfant.
- Inspecteur du navigateur
- Outil (F12) qui montre le HTML et le CSS d'un élément.
Exemple simple : trouver la classe du bouton.
Ce que ce n'est pas : deviner le sélecteur au hasard.
Réflexe : inspecter avant de styler.
- Sélecteur CSS
- Cible d'une règle de style : classe, identifiant ou balise.
Exemple simple : la classe .btn-contact plutôt que la balise button.
Ce que ce n'est pas : cibler toutes les balises button du site.
Réflexe : le plus précis possible.
- Ne pas modifier le parent
- Règle d'or : les modifications directes du thème parent sont écrasées aux mises à jour.
Exemple simple : passer par l'enfant ou le CSS additionnel.
Ce que ce n'est pas : éditer le parent « juste une fois ».
Réflexe : jamais le parent directement.
En pratique — Ajuster finement l'apparence proprement
- Repérez un élément à modifier et ouvrez l'inspecteur (F12) pour lire sa classe.
- Ajoutez une règle ciblée dans le CSS additionnel et observez l'aperçu.
- Vérifiez le rendu sur mobile et sur les autres pages.
- Si le besoin dépasse le style, créez un thème enfant pour les modèles ou fonctions.
Script prêt à dire — expliquer la personnalisation propre (20 s)
« Je peux ajuster des couleurs et des espacements sans toucher au thème, donc sans risque lors des mises à jour. Pour des modifications plus profondes, je passe par un thème enfant : vos changements restent, même quand le thème évolue. »
Relier la méthode à la tranquillité future du client.
Modèle copier-coller — fiche personnalisation
ÉLÉMENT À MODIFIER : _______________
SÉLECTEUR TROUVÉ (inspecteur) : _______________
RÈGLE CSS AJOUTÉE : _______________
VÉRIFIÉ DESKTOP / MOBILE : oui / non
BESOIN D'UN THÈME ENFANT : oui / non
FICHIERS CONCERNÉS : _______________Retouche légère
Quelques règles CSS suffisent : couleur, espacement, taille.
Modèle spécifique
Thème enfant pour adapter un modèle de page.
Fonctions ajoutées
Thème enfant pour functions.php, jamais le parent.
Thème FSE
Les styles globaux et le CSS additionnel couvrent la plupart des besoins.
✓ Bonnes pratiques
- Inspecter avant d'écrire du CSS.
- Rester précis dans les sélecteurs.
- Créer un thème enfant pour toute modification profonde.
✗ Pièges fréquents
- Modifier directement le thème parent.
- Utiliser des sélecteurs trop larges.
- Empiler du CSS non commenté et difficile à maintenir.
Points clés à retenir
- Le CSS additionnel ajuste l'apparence sans risque.
- L'inspecteur révèle le bon sélecteur.
- Le thème parent ne se modifie jamais directement.
- Le thème enfant rend les modifications durables.
Défi 48h — appliquez demain
Modifiez la couleur et l'espacement d'un bouton via le CSS additionnel, en trouvant le sélecteur à l'inspecteur. Vérifiez sur mobile. 20 minutes.
- Je trouve un sélecteur avec l'inspecteur.
- J'ajoute un CSS ciblé sans casser le site.
- Je sais quand créer un thème enfant.
Questions fréquentes
Où ajouter le CSS additionnel sur un thème de blocs ?
Dans l'éditeur de site, via les styles globaux ou l'option de CSS additionnel selon le thème. Le principe reste le même : un CSS ciblé, sans modifier les fichiers du thème.
Un thème enfant est-il toujours nécessaire ?
Non. Pour des couleurs ou des espacements, le CSS additionnel suffit. Le thème enfant devient utile pour modifier des modèles ou ajouter des fonctions qui doivent survivre aux mises à jour.
Que se passe-t-il si je modifie le thème parent ?
Vos modifications fonctionnent jusqu'à la prochaine mise à jour du thème, qui les écrase. C'est pourquoi on passe par le CSS additionnel ou un thème enfant.
Samir doit modifier le style d'un thème sans perdre ses changements à la mise à jour. Que fait-il ?