Comment ajouter du CSS personnalisé à WordPress (4 méthodes faciles)

Les feuilles de style en cascade (CSS) définissent la manière dont les éléments HTML apparaissent sur une page web, en contrôlant les polices, les couleurs, l’espacement et la mise en page. Les thèmes WordPress comprennent des paramètres de conception intégrés, mais vous avez souvent besoin de CSS personnalisés pour ajuster les éléments visuels que les options par défaut ne peuvent pas atteindre.

Il existe quatre façons fiables d’ajouter un style personnalisé à votre site WordPress :

• L’éditeur de blocs. Ajoutez une nouvelle classe CSS dans l’éditeur de site, puis attribuez-la à des blocs spécifiques dans le panneau des paramètres Avancé.
• Le personnalisateur du thème. Ouvrez le panneau CSS additionnel dans votre tableau de bord et collez votre code pour prévisualiser les modifications en temps réel.
• Un thème enfant. Créez un répertoire de thème enfant et modifiez le fichier style.css afin que vos modifications soient prises en compte lors des mises à jour du thème parent.
• Un plugin. Installez un gestionnaire d’extraits de code pour insérer, organiser et faire basculer les règles CSS personnalisées sans modifier les fichiers du thème.

Comment ajouter une classe CSS personnalisée à l’aide de l’éditeur de blocs

Si vous utilisez un thème à blocs (WordPress 5.9 et supérieur), vous pouvez appliquer des feuilles de style CSS personnalisées à des éléments spécifiques dans l’éditeur de blocs. Cette méthode nécessite la définition d’une classe dans l’éditeur de site, puis l’affectation de cette classe à un bloc.

Tout d’abord, ajoutez le code CSS dans l’éditeur de site :

1. Connectez-vous à votre tableau de bord WordPress et allez dans Apparence → Éditeur.
2. Cliquez sur l’icône Styles dans la barre latérale gauche (le cercle noir et blanc) et sélectionnez CSS additionnel.

3. Définissez votre nouvelle classe CSS. Pour cet exemple, créez une classe nommée custom-highlight qui ajoute un fond vert et un texte blanc :

.custom-highlight {
   background-color: #28a745;
   color: #ffffff;
   padding: 10px;
}

4. Cliquez sur Passer en revue 1 modification → Enregistrer pour appliquer vos modifications.

Une fois la classe définie, vous pouvez l’attribuer à n’importe quel bloc de vos articles ou pages :

1. Allez dans Articles → Tous les articles et modifiez l’article que vous souhaitez mettre à jour.
2. Sélectionnez le bloc que vous souhaitez modifier (par exemple, un bloc Paragraphe).
3. Dans la barre latérale droite, ouvrez la section Avancé.
4. Dans le champ Classe(s) CSS additionnelle(s), saisissez le nom de la classe que vous avez créée.

5. Cliquez sur Enregistrer. Le bloc reflète maintenant le style défini dans votre feuille de style.

Cette méthode vous permet d’appliquer des styles à des blocs individuels plutôt qu’à des éléments de l’ensemble du site. Il est idéal pour un style unique, par exemple pour mettre en évidence un paragraphe ou un appel à l’action, sans affecter les autres blocs du même type sur votre site.

Comment ajouter du CSS personnalisé à l’aide du personnalisateur du thème

Si vous utilisez un thème classique, le personnalisateur de WordPress est le moyen le plus convivial d’ajouter des CSS personnalisés. Introduit dans WordPress 4.7, il vous permet d’écrire du CSS et de voir les changements immédiatement avant la publication.

1. Allez dans Apparence → Personnaliser.
2. Dans la barre latérale gauche, cliquez sur CSS additionnel.

3. Un éditeur de code s’ouvre. Tapez ou collez vos règles CSS. Par exemple, pour styliser le texte d’un paragraphe :

p {
   color: green;
   font-size: 16px;
}

4. Le volet de prévisualisation à droite est mis à jour instantanément.
5. Lorsque vous êtes satisfait du résultat, cliquez sur Publier.

Cette méthode permet d’enregistrer vos feuilles de style CSS dans la base de données plutôt que dans les fichiers du thème, de sorte que vos modifications restent intactes lorsque vous mettez le thème à jour. Toutefois, ils disparaîtront si vous changez de thème. Si vous changez fréquemment de thème, envisagez plutôt d’utiliser un plugin.

Comment ajouter du CSS personnalisé à l’aide d’un thème enfant

Il est risqué de modifier le fichier style.css du thème parent, car les mises à jour du thème l’écrasent et effacent vos personnalisations. Un thème enfant évite cela en stockant vos modifications dans un répertoire séparé que WordPress charge après le thème parent, ce qui permet à vos modifications de remplacer les styles du thème parent.

1. Accédez aux fichiers de votre site via le gestionnaire de fichiers de votre panneau de contrôle d’hébergement ou un client FTP tel que FileZilla.
2. Allez dans le répertoire wp-content/themes/.
3. Ouvrez le dossier de votre thème enfant actif.

4. Localisez et ouvrez le fichier style.css.
5. Ajoutez votre CSS personnalisé en bas de page. Par exemple :

body {
   background-color: #f0f0f1;
}

6. Enregistrez le fichier ou téléchargez-le à nouveau sur votre serveur.

Cette approche convient mieux aux développeurs ou aux propriétaires de sites qui prévoient d’importantes mises à jour de leur conception, car elle permet d’organiser le code personnalisé et de le protéger contre les futures mises à jour du thème.

Comment ajouter du CSS personnalisé à l’aide d’un plugin

Si vous préférez ne pas modifier les fichiers du thème ou utiliser l’outil de personnalisation, un plugin offre une alternative sûre et organisée. Nous recommandons l’utilisation de WPCode pour sa gestion robuste des snippets et sa bibliothèque de plus de 100 snippets pré-fabriqués.

1. Installez et activez le plugin à partir d’Extensions → Ajouter une extension.
2. Allez dans Extraits de code → + Ajouter un extrait.
3. Passez la souris sur Ajoutez votre code personnalisé (nouvel extrait) et cliquez sur + Ajouter un extrait personnalisé.

4. Sélectionnez Extrait CSS comme type de code.
5. Saisissez un titre pour votre extrait (par exemple, “Styles d’en-tête personnalisés”).
6. Collez votre CSS dans l’éditeur de code. Par exemple :

/* Surligner le texte important */
.highlight {
   background-color: #fffa9c;
   padding: 4px 6px;
   border-radius: 4px;
}

7. Activez la fonction Actif, puis cliquez sur Enregistrer l’extrait.

Les plugins sont particulièrement utiles si vous changez fréquemment de thème, car le CSS reste actif quel que soit le thème sélectionné. Vos styles personnalisés sont stockés indépendamment des fichiers de votre thème.

Dépannage des problèmes courants liés au CSS personnalisé dans WordPress

Vous pouvez résoudre la plupart des problèmes liés aux CSS personnalisés de WordPress en vidant votre cache, en vérifiant la spécificité des sélecteurs et en corrigeant les erreurs de syntaxe.

Les modifications de style n’apparaissent pas

La raison la plus fréquente pour laquelle les nouveaux styles n’apparaissent pas est la mise en cache. Les navigateurs et les plugins de mise en cache stockent des versions statiques de votre site pour améliorer la vitesse, ce qui peut empêcher les feuilles de style CSS mises à jour de s’afficher immédiatement.

• Cache du navigateur. Videz le cache de votre navigateur ou procédez à une actualisation complète (Ctrl+Shift+R sous Windows, Cmd+Shift+R sous Mac). Vous pouvez également ouvrir la page dans une fenêtre Incognito ou privée pour contourner les fichiers mis en cache.
• Cache du serveur ou du plugin. Si vous utilisez un plugin de mise en cache tel que WP Super Cache, W3 Total Cache ou LiteSpeed Cache, effacez le cache dans les paramètres du plugin. Si votre hébergeur WordPress utilise une mise en cache au niveau du serveur (comme le Gestionnaire de cache d’Hostinger), supprimez-la également de votre panneau de contrôle.

Spécificité du sélecteur CSS

Si votre code est présent mais ne s’applique pas, il se peut que les styles de thèmes existants le remplacent. CSS hiérarchise les règles en fonction de leur spécificité – un système de notation dans lequel les styles en ligne l’emportent sur les ID, les ID sur les classes et les classes sur les sélecteurs d’éléments.

Pour y remédier, utilisez un sélecteur plus spécifique. Par exemple, au lieu de cibler .button, ciblez div.content .button ou incluez un conteneur parent dans votre sélecteur.

En dernier recours, vous pouvez utiliser la déclaration !important :

.button {
   background-color: #ff0000 !important;
}

N’oubliez pas d’utiliser !important avec parcimonie. Son utilisation excessive rend la maintenance plus difficile, car les modifications futures auront également besoin de !important pour remplacer les règles antérieures. Cela conduit à des “guerres de spécificité”, qui rendent vos styles plus difficiles à gérer au fil du temps.

Syntaxe CSS mal orthographiée

Un seul crochet } ou point-virgule ; manquant peut casser toute la feuille de style. Si vous modifiez les fichiers manuellement, vérifiez que votre syntaxe est correcte.

Nous vous recommandons d’utiliser un éditeur de code comme Visual Studio Code, qui met en évidence les erreurs de syntaxe en temps réel. L’outil de mise en évidence de la syntaxe intégré au Customizer de WordPress signale également les erreurs en rouge avant que vous ne les enregistriez.

Le nouveau design n’est pas réactif

Les feuilles de style CSS personnalisées peuvent parfois perturber la mise en page sur les appareils mobiles. Testez toujours vos modifications sur différentes tailles d’écran à l’aide des outils de développement de votre navigateur (Inspecter → Basculer la barre d’outils de l’appareil).

Pour améliorer la réactivité, intégrez votre code dans une requête média :

@media only screen and (max-width: 600px) {
   body {
      font-size: 14px;
   }
}

Comment ajouter d’autres codes personnalisés à WordPress ?

Vous pouvez ajouter d’autres types de codes personnalisés à WordPress en utilisant deux méthodes principales, selon le langage de programmation et selon que vous avez besoin de modifier les fonctionnalités côté serveur ou le comportement de l’interface.

• PHP. Pour modifier les fonctions de base – telles que la création de types d’articles personnalisés ou le filtrage du contenu – il faut ajouter du code PHP à WordPress. Ce code s’exécute sur le serveur avant le chargement de la page.
• JavaScript. Pour les fonctions dynamiques telles que les animations, la gestion des événements ou les scripts de suivi, envisagez d’ajouter JavaScript à WordPress. Ce code s’exécute dans le navigateur de l’utilisateur après le chargement de la page.

Quelle que soit la méthode choisie, assurez-vous toujours de disposer d’une sauvegarde récente de votre site web avant d’ajouter un code personnalisé afin d’éviter toute perte de données ou erreur de site.

Tout le contenu des tutoriels de ce site est soumis aux normes éditoriales et aux valeurs rigoureuses de Hostinger.