Comment personnaliser le CSS de votre site WordPress ?
Personnaliser le CSS (Cascading Style Sheets) est le moyen le plus efficace de modifier l’apparence de votre site au-delà des options de base de votre thème. Que vous souhaitiez ajuster une couleur, modifier une police ou corriger un espacement, voici les méthodes recommandées en 2026.
Utiliser l’outil « CSS additionnel »
C’est la méthode la plus simple pour les modifications rapides. Elle est intégrée nativement à WordPress et permet de voir les changements en direct.
- Allez dans Apparence > Personnaliser.
- Cliquez sur l’onglet CSS additionnel.
- Saisissez votre code dans la zone de texte.
- Cliquez sur Publier pour enregistrer.
Utiliser l’Éditeur de Site (Thèmes de blocs)
Si vous utilisez un thème moderne basé sur les blocs (Full Site Editing), la procédure est légèrement différente :
- Rendez-vous dans Apparence > Éditeur.
- Cliquez sur l’icône Styles (le cercle bicolore en haut à droite).
- Cliquez sur le menu « Plus » (trois petits points) et sélectionnez CSS additionnel.
identifier les éléments avec l’Inspecteur de navigateur
Avant de modifier le CSS, vous devez connaître le « sélecteur » de l’élément à cibler. Voici comment faire :
- Faites un clic droit sur l’élément à modifier (ex: un bouton).
- Choisissez Inspecter.
- Repérez la classe CSS (ex:
.wp-block-button__link).
Exemple de code :
.mon-bouton-bleu {
background-color: #0073aa;
border-radius: 5px;
}
Utiliser un Thème Enfant (Child Theme)
Pour des modifications structurelles importantes, il est préférable d’utiliser un thème enfant. Cela évite que vos changements ne soient effacés lors de la mise à jour du thème principal (parent).
Le code doit être ajouté directement dans le fichier style.css situé dans le dossier de votre thème enfant via FTP ou l’éditeur de fichiers de thèmes.
Passer par une extension (Plugin)
Si vous préférez une interface plus complète, certaines extensions offrent des fonctionnalités avancées :
- Simple CSS : Offre un éditeur avec coloration syntaxique.
- CSS Hero : Un éditeur visuel premium pour modifier le design sans toucher une ligne de code.
- SiteOrigin CSS : Un éditeur puissant avec un mode inspecteur visuel intégré.
