TL;DR : Comment ajouter du CSS personnalisé dans WordPress
L'endroit où vous collez votre CSS est plus important que le CSS lui-même, car chaque emplacement se comporte différemment au moment où vous changez de thème.
- SeedProd : une boîte CSS personnalisé dans les paramètres globaux du constructeur, gratuite, avec des styles qui restent attachés à la page que vous avez construite.
- Le personnaliseur : Apparence, Personnaliser, puis CSS additionnel, si vous utilisez un thème classique.
- L'éditeur de site : Styles, puis le menu à trois points, si vous utilisez un thème basé sur des blocs.
- WPCode : un extrait de code CSS qui survit à tout changement de thème.
- Fichiers du thème : ils fonctionnent, mais la prochaine mise à jour du thème efface vos modifications.
- Pas d'option CSS additionnel ? C'est une permission sur votre compte, pas sur votre thème.
Avez-vous déjà essayé de changer une couleur ou de masquer quelque chose sur votre site WordPress, pour ensuite constater qu'il n'y avait aucune option pour le faire ? Je suis passé par là aussi. Je me souviens avoir passé beaucoup trop de temps à chercher dans les paramètres de mon thème une simple modification de police qui n'était tout simplement pas possible.
C'est à ce moment-là que j'ai découvert le CSS personnalisé. C'est un moyen rapide de corriger de petits problèmes visuels sur votre site, sans modifier les fichiers du thème ni engager un développeur.
Vous n'avez pas besoin de savoir coder pour tout cela. Il y a quatre endroits où vous pouvez ajouter du CSS personnalisé dans WordPress, et celui que vous choisissez détermine si vos styles survivront au prochain changement de thème.
Méthodes pour ajouter du CSS personnalisé dans WordPress :
- 1. Ajouter du CSS personnalisé avec SeedProd
- 2. Ajouter du CSS personnalisé sans constructeur de page
- 3. Utiliser un plugin CSS personnalisé
- 4. Modifier les fichiers de votre thème (non recommandé)
- Pourquoi l'option CSS additionnel est-elle manquante ?
- Quelle méthode devriez-vous utiliser ?
- Bonus : Cibler le CSS personnalisé pour des pages ou des blocs
Qu'est-ce que le CSS personnalisé ?
CSS signifie Cascading Style Sheets (Feuilles de style en cascade). C'est un langage simple qui contrôle l'apparence de votre site WordPress.
Par exemple, ce bout de CSS change la couleur d'un titre en rouge :
h1 {
color: red;
}Et celui-ci masque un élément de la page :
.hidden {
display: none;
}Vous n'avez pas besoin d'écrire du code comme celui-ci à partir de zéro. La plupart du temps, vous le copierez et le collerez simplement au bon endroit.
L'astuce est de savoir où placer votre CSS personnalisé, et c'est exactement ce que je vais vous montrer ensuite.
Pourquoi ajouter du CSS personnalisé dans WordPress ?
Parfois, vous voulez changer la couleur d'un bouton, centrer un titre, ou supprimer un espace supplémentaire, et votre thème ne vous offre pas de moyen de le faire.
C'est là qu'intervient le CSS personnalisé. Il vous donne le contrôle sur les petits détails de conception qui rendent votre site parfait.
Avec le CSS, vous n'êtes pas limité aux paramètres par défaut de votre thème WordPress. Vous pouvez affiner votre mise en page, votre style et vos espacements sans changer de thème ni installer de plugins WordPress supplémentaires.
N'oubliez pas : le CSS aide à peaufiner votre design, mais il ne corrigera pas les erreurs visuelles plus importantes que le CSS personnalisé ne peut pas corriger, comme les mises en page encombrées ou une mauvaise navigation.
Alors, comment ajouter concrètement du CSS personnalisé dans WordPress ?
Il existe plusieurs méthodes, mais je vais commencer par celle que j'utilise le plus souvent, et celle que je recommande si vous voulez un contrôle total sans les tracas.
1. Ajouter du CSS personnalisé avec SeedProd (Ma méthode préférée)
Si vous n'avez jamais utilisé SeedProd auparavant, c'est un constructeur WordPress par glisser-déposer qui rend la personnalisation de votre site très facile, même si vous n'êtes pas développeur.
Je l'utilise tout le temps car je peux créer des thèmes complets ou des pages de destination sans toucher à une seule ligne de code. Et quand je veux ajouter un peu de CSS, SeedProd me fournit un endroit simple pour le faire.
Avant de passer aux étapes, il est utile d'avoir SeedProd configuré sur votre site.
Si vous ne l'avez pas encore utilisé, voici quelques tutoriels pour débutants pour vous aider à démarrer :
- Comment créer un thème WordPress personnalisé sans code
- Comment créer une page de destination dans WordPress
Une fois que vous avez créé une page de destination ou un thème avec SeedProd, vous êtes prêt à ajouter votre propre CSS personnalisé. Commençons par la façon de le faire sur une seule page de destination.
Comment ajouter du CSS à une page de destination dans SeedProd
Pour commencer, ouvrez votre tableau de bord WordPress et accédez à SeedProd » Pages de destination.
Trouvez la page de destination que vous souhaitez modifier et cliquez sur le lien Modifier à côté.
Cela ouvrira le constructeur de pages SeedProd. Dans le coin inférieur gauche, cliquez sur l'icône d'engrenage pour ouvrir vos Paramètres globaux.
Dans la barre latérale gauche, cliquez sur l'onglet CSS personnalisé.
Collez maintenant votre CSS. Par exemple, voici un style pour le texte de votre paragraphe :
p {
font-style: italic;
color: #444;
}
Cliquez sur le bouton Enregistrer dans le coin supérieur droit.
Vous pouvez ensuite prévisualiser votre page pour voir les modifications enregistrées en direct sur votre site Web.
Comment ajouter du CSS global avec le constructeur de thèmes de SeedProd
Si vous utilisez le constructeur de thèmes de SeedProd pour concevoir l'ensemble de votre site, vous pouvez appliquer du CSS personnalisé qui fonctionne sur toutes les pages.
Pour commencer, ouvrez votre tableau de bord WordPress et accédez à SeedProd » Constructeur de thèmes.
Trouvez le modèle appelé CSS global et cliquez sur Modifier la conception.
À l'intérieur du constructeur, cliquez sur l'icône d'engrenage dans le coin inférieur gauche pour ouvrir les Paramètres globaux.
Dans la barre latérale gauche, cliquez sur l'onglet CSS personnalisé.
Cliquez sur le bouton Modifier le CSS personnalisé. Cela ouvre le personnaliseur WordPress dans une nouvelle fenêtre.
Dans le personnaliseur, cliquez sur CSS supplémentaire, puis collez votre code.
Par exemple :
p {
font-style: italic;
}Cela rendra tout le texte de paragraphe de votre site en italique.
Cliquez sur Publier pour enregistrer vos modifications et les appliquer à l'ensemble du site.
Vous pouvez maintenant actualiser votre page pour voir la mise à jour en direct.
Cette méthode est utile pour apporter des modifications de style globales telles que des ajustements de police, des espacements et des modifications de couleur.
La voie globale est le propre panneau de WordPress : ce bouton Modifier le CSS personnalisé ouvre le personnaliseur, donc vos styles globaux sont sauvegardés avec votre thème plutôt qu'à l'intérieur de SeedProd. La boîte de la page de destination plus haut est la partie véritablement SeedProd et elle fonctionne avec la version gratuite, bien que le constructeur de thème lui-même nécessite un plan Plus ou supérieur.
2. Ajouter du CSS personnalisé dans WordPress sans constructeur de pages
Si vous n'utilisez pas de constructeur de pages comme SeedProd, vous pouvez toujours ajouter du CSS personnalisé directement dans WordPress. Les étapes dépendent du type de thème que vous utilisez, qu'il s'agisse d'un thème classique ou d'un thème de blocs.
Les thèmes classiques utilisent l'ancien outil de personnalisation et s'appuient souvent sur des widgets et des modèles de pages. Les thèmes de blocs, quant à eux, utilisent le nouveau Éditeur de site, qui vous permet de concevoir l'ensemble de votre site avec des blocs.
Les deux boîtes sont intégrées à WordPress, il n'y a donc rien à installer. Je les utilise pour des modifications ponctuelles plutôt que pour quoi que ce soit que je veuille conserver, car WordPress classe le CSS sous le thème actif à ce moment-là.
Utiliser le personnaliseur WordPress (Thèmes classiques)
Dans votre tableau de bord WordPress, accédez à Apparence » Personnaliser.
Dans le menu du personnaliseur, cliquez sur CSS supplémentaire.
Une zone de texte apparaîtra où vous pourrez coller votre code personnalisé. Par exemple :
p {
color: #0073aa;
}Cela change tout le texte de paragraphe de votre site en une nuance de bleu.
Vous verrez un aperçu en direct de vos modifications sur la droite pendant que vous tapez.
Lorsque vous êtes satisfait du résultat, cliquez sur le bouton Publier pour enregistrer vos modifications.
Cette méthode fonctionne bien avec les anciens thèmes qui prennent en charge le personnaliseur, et elle ne nécessite aucun plugin WordPress.
Utiliser l'éditeur de site (thèmes blocs)
Si votre site WordPress utilise un thème bloc, vous gérerez votre design à l'aide de l'éditeur de site complet au lieu du personnaliseur.
Pour commencer, allez dans Apparence » Éditeur dans votre tableau de bord WordPress.
Dans la barre latérale gauche, cliquez sur l'icône Styles. Elle ressemble à un demi-cercle ou à une palette de peinture.
Cliquez ensuite sur la petite icône en forme de crayon intitulée Modifier les styles.
Vous verrez maintenant l'éditeur WordPress. Dans le coin supérieur droit de l'écran, cliquez sur le menu à trois points (⋮) et sélectionnez CSS additionnel dans le menu déroulant.
Collez votre code personnalisé dans la boîte. Par exemple :
p {
color: #0073aa;
}Cela changera la couleur du texte des paragraphes sur l'ensemble de votre site.
Cliquez sur Enregistrer dans le coin supérieur droit pour appliquer les modifications.
Pas d'option CSS additionnel dans ce menu ? Ce n'est presque jamais votre thème. Cela dépend d'une permission sur votre compte utilisateur, et la section ci-dessous explique comment la vérifier.
3. Utiliser un plugin CSS personnalisé
Si votre thème ne prend pas en charge le personnaliseur ou l'éditeur de site, ou si vous souhaitez simplement un moyen propre de gérer votre CSS en un seul endroit, je vous recommande d'utiliser un plugin comme WPCode.
WPCode est un plugin WordPress léger qui vous permet d'ajouter des extraits de code personnalisés, y compris du CSS, sans modifier les fichiers de votre thème.
Une fois que vous avez installé et activé WPCode, allez dans Extraits de code » + Ajouter un extrait dans votre tableau de bord WordPress.
Cliquez sur la boîte qui dit Ajouter votre code personnalisé (Nouvel extrait) et donnez un nom à votre extrait, par exemple Styles CSS personnalisés.
Sous Type de code, sélectionnez Extrait CSS dans le menu déroulant.
Collez maintenant votre CSS dans la boîte de code. Par exemple :
p {
color: #0073aa;
}Faites défiler vers le bas et choisissez Insertion automatique pour appliquer le CSS sur l'ensemble de votre site.
Cliquez ensuite sur Enregistrer l'extrait et activez le commutateur en haut sur Actif.
Et voilà ! Vos styles personnalisés sont maintenant en ligne sur votre site, et vous pouvez revenir à cet extrait à tout moment pour apporter des modifications.
4. Modifier les fichiers de votre thème (non recommandé)
Cette méthode ne fonctionne que si vous utilisez un thème classique. Les thèmes blocs n'incluent pas l'accès à l'éditeur de fichiers de thème dans le tableau de bord WordPress.
Si vous utilisez un thème classique et que vous êtes à l'aise avec la modification de code, vous pouvez ajouter du CSS personnalisé directement dans le fichier style.css de votre thème. Mais je ne le recommande pas, sauf si vous savez ce que vous faites.
Lorsque vous modifiez directement les fichiers de thème, vos modifications peuvent être perdues lors des mises à jour. Vous ne verrez pas non plus d'aperçu en direct, et même une petite faute de frappe peut casser votre mise en page.
Cela dit, si vous utilisez un thème enfant ou si vous savez comment restaurer votre site en cas de problème, voici comment procéder.
Allez dans Apparence » Éditeur de fichiers de thème dans votre tableau de bord WordPress.
Dans la liste des fichiers à droite, cliquez sur style.css.
Faites défiler jusqu'en bas du fichier et collez votre CSS. Par exemple :
p {
color: #0073aa;
}Cliquez sur Mettre à jour le fichier pour enregistrer vos modifications.
Ne modifiez les fichiers du thème qu'en utilisant un thème enfant : sans lui, la prochaine mise à jour du thème écrasera tout ce que vous avez ajouté. Si vous n'êtes pas sûr de la façon de restaurer votre site en cas de problème, utilisez SeedProd ou WPCode à la place.
Pourquoi l'option CSS additionnel est-elle manquante dans WordPress ?
WordPress masque le CSS additionnel de tout compte qui n'a pas la permission appelée edit_css, donc lorsque la boîte disparaît, c'est la permission qui a disparu, pas la fonctionnalité.
Le thème semble être le coupable évident, et il ne l'est presque jamais. WordPress applique la même vérification de permission pour la boîte du personnaliseur et la boîte de l'éditeur de site, donc changer de thème ne change rien.
Trois choses désactivent cette permission :
- Un réglage de sécurité dans wp-config.php. Lorsque
DISALLOW_UNFILTERED_HTMLest défini sur un site, WordPress retire la modification du CSS personnalisé à tout le monde, y compris aux administrateurs. - Multisite. Sur un réseau WordPress, seul le super administrateur qui gère le réseau conserve la permission, donc les administrateurs de sites individuels perdent la boîte.
- Un plugin de durcissement qui le supprime. La permission
edit_cssest basée sur une plus ancienne appeléeunfiltered_html, et certains plugins de sécurité suppriment celle-ci, ce qui emporte la boîte CSS avec elle.
Je suis allé lire cela dans le code de WordPress 7.1 lui-même plutôt que de répéter l'explication du thème, car l'option n'est pas du tout basée sur le support du thème.
Si vous êtes le seul administrateur et que rien d'évident ne devrait vous bloquer, demandez à votre hébergeur ou à celui qui a configuré le site si DISALLOW_UNFILTERED_HTML est défini dans votre fichier wp-config.php. C'est le plus rapide à exclure.
Si le réglage s'avère délibéré, respectez-le et placez votre CSS quelque part qui ne passe pas par la même vérification. La boîte CSS personnalisée de SeedProd s'enregistre via les propres permissions du constructeur et WPCode utilise sa propre permission de fragment, donc un panneau CSS additionnel manquant n'empêche aucun d'eux de fonctionner.
Quelle méthode devriez-vous utiliser ?
Choisissez en fonction de ce que vous voulez qu'il se passe lorsque vous changez de thème, car c'est la vraie différence entre ces quatre.
| Méthode | Idéal pour | Survit à un changement de thème ? | Nécessite un plan payant ? |
|---|---|---|---|
| SeedProd | Styliser les pages de destination et les modèles que vous avez créés vous-même | Oui, le CSS est enregistré avec la page | Non pour une seule page, Plus pour l'ensemble du site |
| Personnaliseur ou Éditeur de site | Une petite modification du thème que vous utilisez actuellement | Non, WordPress l'enregistre par thème | Non |
| WPCode | CSS que vous souhaitez conserver lors de tout changement de thème | Oui | Non |
| Fichiers du thème | Rien, sauf si vous travaillez dans un thème enfant | Non, la prochaine mise à jour l'écrasera | Non |
Si le CSS concerne l'ensemble du site et que vous voulez arrêter d'y penser, j'utiliserais WPCode, car c'est le seul des quatre qui ignore complètement votre thème. Si le style appartient à une page que vous avez conçue, conservez-le dans SeedProd avec la page.
Le personnaliseur convient toujours pour une petite modification que vous ne regretteriez pas après un re-thème. Sachez simplement ce que vous choisissez.
Bonus : Cibler le CSS personnalisé pour des pages ou des blocs
Parfois, vous ne voulez pas que votre CSS affecte tout le site, vous voulez juste qu'il s'applique à une seule page ou à un seul bloc. Vous pouvez le faire en utilisant des ID de page ou des classes CSS personnalisées.
Utilisation des ID de page dans WordPress
Chaque page dans WordPress a un ID unique, et vous pouvez l'utiliser pour cibler les styles d'une seule page.
Pour trouver l'ID de la page, visitez la page dans votre navigateur, faites un clic droit n'importe où et choisissez Inspecter.
Dans le code, recherchez la balise <body>. Elle inclura une classe comme page-id-37.
Vous pouvez ensuite l'utiliser dans votre CSS comme ceci :
.page-id-37 p {
color: green;
}
Cela ne changera la couleur du texte du paragraphe que sur cette page spécifique.
Utilisation des paramètres de bloc de SeedProd
Si vous utilisez SeedProd, vous pouvez cibler des blocs spécifiques en ajoutant un nom de classe personnalisé.
Ouvrez votre page dans l'éditeur SeedProd et cliquez sur le bloc que vous souhaitez styliser. Dans mon cas, je veux styliser un bloc de titre spécifique.
Dans le panneau de gauche, allez à l'onglet Avancé, recherchez l'option Attributs et développez-la.
Trouvez le champ intitulé Classe CSS et ajoutez un nom de classe comme my-special-style.
Ensuite, dans votre boîte CSS personnalisée globale ou au niveau de la page, ajoutez quelque chose comme ceci :
.my-special-style {
background-color: #fff7e6;
border-radius: 10px;
}
Après avoir enregistré et prévisualisé la page, vous verrez vos modifications sur ce bloc spécifique sans affecter le reste de votre site.
FAQ sur l'ajout de CSS personnalisé dans WordPress
Comment ajouter du CSS à une page spécifique ?
Vous pouvez cibler une page avec son identifiant de page unique, comme .page-id-123 p { color: red; }. Si vous utilisez SeedProd ou WPCode, ajoutez une classe CSS personnalisée au bloc ou à la section que vous souhaitez styliser et ciblez cette classe à la place.
Puis-je utiliser le HTML et le CSS ensemble ?
Oui. Vous pouvez ajouter du HTML dans les blocs ou les widgets WordPress et le styliser avec du CSS personnalisé, tant que votre CSS cible le bon élément ou la bonne classe.
Est-il sûr d'ajouter du CSS sans développeur ?
Oui, tant que vous restez en dehors des fichiers de votre thème. Le CSS ne modifie que l'apparence des choses, donc une erreur se manifeste par une bizarrerie visuelle plutôt qu'un site cassé, et vous pouvez supprimer la règle pour l'annuler. La modification directe des fichiers de thème est la seule partie de cette opération qui comporte un risque réel.
L'ajout de CSS à WordPress affectera-t-il les appareils mobiles ?
Votre CSS s'applique à toutes les tailles d'écran à moins que vous ne l'enveloppiez dans une requête média. Si vous travaillez dans SeedProd, vous pouvez passer à l'aperçu mobile dans le constructeur et l'ajuster là avant de publier.
Pourquoi mon CSS personnalisé ne fonctionne-t-il pas ?
Deux choses en sont le plus souvent la cause. Soit une règle de votre thème est plus spécifique que la vôtre, donc elle l'emporte, soit un plugin de mise en cache sert toujours la feuille de style précédente. Videz d'abord votre cache, puis faites un clic droit sur l'élément et choisissez Inspecter pour voir quelle règle est réellement appliquée.
Où WordPress stocke-t-il mon CSS personnalisé ?
Le CSS que vous ajoutez dans le personnaliseur va dans un article caché que WordPress nomme d'après votre thème actif, c'est pourquoi il ne vous suit pas lorsque vous changez. L'éditeur de site conserve son CSS avec les styles globaux de votre thème. SeedProd et WPCode stockent tous deux les leurs en dehors du thème.
Prêt à personnaliser votre site WordPress ?
Le CSS personnalisé est le moyen le plus rapide de contourner un thème qui ne vous permet pas de changer quelque chose, et rien de tout cela ne nécessite un développeur.
Vous n'avez pas à reconstruire quoi que ce soit ni à apprendre comment fonctionnent les feuilles de style pour l'utiliser. Décidez où le CSS doit vivre, collez-le et regardez la page dans votre navigateur.
Si vous préférez styliser visuellement et le conserver attaché à la page que vous avez créée, SeedProd gère les deux au même endroit.
Vous voulez continuer à personnaliser votre site WordPress ?
Voici quelques guides que je recommande ensuite :
- Comment modifier la page d'accueil de votre WordPress
- Comment personnaliser les en-têtes dans WordPress
- Comment ajouter des témoignages aux pages WordPress
- Comment créer une page 404 personnalisée dans WordPress
Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
