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.
Si vous débutez, ne vous inquiétez pas. Vous n'avez pas besoin de savoir coder ni de comprendre comment fonctionnent les sites web en coulisses.
Dans ce guide, je vais vous montrer des méthodes simples pour ajouter du CSS personnalisé à WordPress. Je vous présenterai également mon outil préféré pour cette tâche, SeedProd, qui rend l'ensemble du processus beaucoup plus facile.
Méthodes pour ajouter du CSS personnalisé dans WordPress :
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 installé sur votre site. Si vous ne l'avez pas encore utilisé, voici quelques tutoriels pour débutants qui vous aideront à 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.
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.
Commençons par les thèmes classiques.
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.
⚠️ Si vous ne voyez pas le panneau CSS additionnel, votre thème bloc ne le prend peut-être pas en charge. Dans ce cas, vous pouvez utiliser un plugin comme WPCode ou passer à un constructeur comme SeedProd.
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 en toute sécurité des extraits de code personnalisés, tels que CSS, HTML, JavaScript ou PHP, 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 faites cela que si vous utilisez un thème enfant ou si vous savez comment restaurer votre site en toute sécurité. Pour la plupart des utilisateurs, des outils comme SeedProd ou WPCode sont des options beaucoup plus sûres.
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
.page-id-123 p {color: red; }Or, if you’re using SeedProd or WPCode, you can create a custom CSS class and apply it to a block or section manually.
Prêt à personnaliser votre site WordPress ?
Comme vous l'avez vu, il existe plusieurs façons simples d'ajouter du CSS personnalisé dans WordPress, même si vous n'êtes pas un développeur.
Vous pouvez styliser des blocs individuels, ajuster l'ensemble de votre thème ou apporter de petites modifications qui aident votre site à avoir exactement l'apparence que vous souhaitez. Que vous préfériez utiliser SeedProd, WPCode ou l'un des outils intégrés de WordPress, l'important est que vous n'ayez pas à vous sentir bloqué par les options par défaut de votre thème.
Si vous souhaitez plus de contrôle sans modifier les fichiers du thème, SeedProd est le moyen le plus simple de créer et de styliser vos pages, sans code.
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
- Comment ajouter un formulaire de contact dans WordPress
