Avez-vous déjà essayé de changer une couleur ou de cacher quelque chose sur votre site WordPress, pour vous rendre compte qu'il n'y a pas d'option pour cela ? Cela m'est arrivé aussi. Je me souviens d'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 alors que j'ai appris l'existence des feuilles de style CSS personnalisées. C'est un moyen rapide de corriger de petits problèmes visuels sur votre site, sans avoir à modifier les fichiers du thème ou à engager un développeur.
Si vous êtes novice en la matière, ne vous inquiétez pas. Il n'est pas nécessaire de savoir coder ou de comprendre le fonctionnement des sites web.
Dans ce guide, je vous montrerai comment ajouter des feuilles de style CSS personnalisées à WordPress. Je vous guiderai également à travers mon outil préféré pour ce travail, SeedProd, qui rend l'ensemble du processus beaucoup plus facile.
Méthodes pour ajouter des CSS personnalisés dans WordPress :
- 1. Ajouter un CSS personnalisé avec SeedProd (ma méthode préférée)
- 2. Ajouter des CSS personnalisés dans WordPress sans constructeur de pages
- 3. Utiliser un plugin CSS personnalisé
- 4. Modifier les fichiers de votre thème (non recommandé)
- Bonus : Cibler les feuilles de style CSS personnalisées sur les pages ou les blocs
Qu'est-ce qu'une feuille de style CSS personnalisée ?
CSS est l'abréviation de Cascading Style Sheets (feuilles de style en cascade). Il s'agit d'un langage simple qui contrôle l'apparence de votre site WordPress.
Par exemple, cette partie de CSS change la couleur d'un titre en rouge :
h1 {
color: red;
}Et celui-ci cache un élément de la page :
.hidden {
display: none;
}Il n'est pas nécessaire d'écrire ce type de code à partir de zéro. La plupart du temps, il vous suffira de le copier et de le coller au bon endroit.
La clé est de savoir où placer votre CSS personnalisé, et c'est exactement ce que je vais vous montrer ensuite.
Pourquoi ajouter des CSS personnalisés dans WordPress ?
Il arrive que vous souhaitiez modifier la couleur d'un bouton, centrer un titre ou supprimer un espacement supplémentaire, mais votre thème ne vous permet pas de le faire.
C'est là qu'intervient le CSS personnalisé. Il vous permet de contrôler les petits détails de conception qui donnent à votre site l'aspect et la convivialité qu'il mérite.
Avec CSS, vous n'êtes pas bloqué par les paramètres par défaut du thème WordPress. Vous pouvez affiner votre mise en page, votre style et votre espacement sans changer de thème ni installer de plugins WordPress supplémentaires.
N'oubliez pas : Les feuilles de style en cascade permettent de peaufiner votre conception, mais elles ne corrigeront pas les erreurs visuelles plus importantes que les feuilles de style en cascade personnalisées ne peuvent pas corriger, comme les mises en page encombrées ou une navigation médiocre.
Comment ajouter des feuilles de style CSS personnalisées dans WordPress ?
Il y a plusieurs façons de procéder, mais je vais commencer par celle que j'utilise le plus souvent et celle que je recommande si vous voulez avoir un contrôle total sans les inconvénients.
1. Ajouter un CSS personnalisé avec SeedProd (ma méthode préférée)
Si vous n'avez jamais utilisé SeedProd, sachez qu'il s'agit d'un outil de création de site WordPress qui permet de personnaliser votre site très facilement, même si vous n'êtes pas un développeur.
Je l'utilise tout le temps parce que je peux construire des thèmes complets ou des pages d'atterrissage sans toucher au code. Et quand je veux ajouter un peu de CSS, SeedProd me donne un endroit simple pour le faire.
Avant de passer aux étapes suivantes, il est utile d'avoir installé SeedProd 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 d'atterrissage sur WordPress
Une fois que vous avez construit une page d'atterrissage 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 d'atterrissage.
Comment ajouter du CSS à une page d'atterrissage dans SeedProd
Pour commencer, ouvrez votre tableau de bord WordPress et allez dans SeedProd " Landing Pages.
Recherchez la page d'atterrissage que vous souhaitez modifier et cliquez sur le lien Modifier situé à côté.
Ceci ouvrira le constructeur de pages SeedProd. Dans le coin inférieur gauche, cliquez sur l'icône de l'engrenage pour ouvrir vos paramètres globaux.
Dans la barre latérale de gauche, cliquez sur l'onglet Custom CSS.
Collez maintenant votre CSS. Par exemple, en voici une qui stylise 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 des CSS globales avec le constructeur de thèmes de SeedProd
Si vous utilisez le Theme Builder de SeedProd pour concevoir l'ensemble de votre site, vous pouvez appliquer un CSS personnalisé qui fonctionne sur toutes les pages.
Pour commencer, ouvrez votre tableau de bord WordPress et allez dans SeedProd " Theme Builder.
Recherchez le modèle appelé Global CSS et cliquez sur Modifier la conception.
Dans le constructeur, cliquez sur l'icône en forme de roue dentée dans le coin inférieur gauche pour ouvrir les paramètres globaux.
Dans la barre latérale de gauche, cliquez sur l'onglet Custom CSS.
Cliquez sur le bouton Modifier le CSS personnalisé. Cela ouvre le Customizer de WordPress dans une nouvelle fenêtre.
Dans le Customizer, cliquez sur Additional CSS, puis collez votre code.
Par exemple :
p {
font-style: italic;
}Ainsi, tous les paragraphes de votre site apparaîtront en italique.
Cliquez sur Publier pour enregistrer vos modifications et les appliquer à l'ensemble du site.
Vous pouvez maintenant rafraîchir votre page pour voir la mise à jour en direct.
Cette méthode est utile pour effectuer des modifications globales de style telles que des ajustements de police, d'espacement et de couleur.
2. Ajouter des CSS personnalisés dans WordPress sans constructeur de pages
Si vous n'utilisez pas un constructeur de pages comme SeedProd, vous pouvez toujours ajouter des feuilles de style CSS personnalisées 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 bloc.
Les thèmes classiques utilisent l'ancien outil Customizer et s'appuient souvent sur des widgets et des modèles de page. Les thèmes à blocs, en revanche, utilisent le nouvel Éditeur de site, qui vous permet de concevoir l'ensemble de votre site à l'aide de blocs.
Commençons par les thèmes classiques.
Utiliser le Customizer de WordPress (Thèmes classiques)
Dans votre tableau de bord WordPress, allez dans Apparence " Personnaliser.
Dans le menu du Customizer, cliquez sur Additional CSS.
Une zone de texte apparaît, dans laquelle vous pouvez coller votre code personnalisé. Par exemple :
p {
color: #0073aa;
}Cette opération transforme tous les paragraphes de texte de votre site en une nuance de bleu.
Vous verrez un aperçu en direct de vos modifications sur la droite au fur et à mesure que vous tapez.
Lorsque vous êtes satisfait de la présentation, cliquez sur le bouton Publier pour enregistrer vos modifications.
Cette méthode fonctionne bien avec les thèmes plus anciens qui prennent en charge le Customizer, et ne nécessite aucun plugin WordPress.
Utiliser l'éditeur de site (blocs thématiques)
Si votre site WordPress utilise un thème en bloc, vous gérerez votre design à l'aide de l'éditeur de site complet et non du Customizer.
Pour commencer, allez dans Apparence " Éditeur dans votre tableau de bord WordPress.
Dans la barre latérale de gauche, cliquez sur l'icône Styles. Elle ressemble à une demi-lune ou à une palette de peinture.
Cliquez ensuite sur l'icône en forme de crayon intitulée Modifier les styles.
L'éditeur de WordPress s'affiche. Dans le coin supérieur droit de l'écran, cliquez sur le menu à trois points (⋮) et sélectionnez Additional CSS dans la liste déroulante.
Collez votre code personnalisé dans la case. Par exemple :
p {
color: #0073aa;
}Cette opération modifie la couleur du texte du paragraphe sur l'ensemble du site.
Cliquez sur Enregistrer dans le coin supérieur droit pour appliquer les modifications.
⚠️ Si vous ne voyez pas le panneau Additional CSS, il se peut que votre thème ne le prenne 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 Customizer ou l'Éditeur de site, ou si vous voulez 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 Code Snippets " + Add Snippet dans votre tableau de bord WordPress.
Cliquez sur la case Ajouter votre code personnalisé (Nouvel extrait) et donnez un nom à votre extrait, par exemple Styles CSS personnalisés.
Sous Code Type, sélectionnez CSS Snippet dans la liste déroulante.
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 à l'ensemble de votre site.
Cliquez ensuite sur Enregistrer l'extrait et faites basculer le commutateur en haut sur Actif.
Voilà, c'est fait ! Vos styles personnalisés sont maintenant en ligne sur votre site, et vous pouvez revenir à cet extrait à tout moment pour y 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 en bloc ne donnent pas accès à l'éditeur de fichiers de thème dans le tableau de bord de WordPress.
Si vous utilisez un thème classique et que vous êtes à l'aise avec l'édition de code, vous pouvez ajouter des feuilles de style CSS personnalisées directement dans la section style.css fichier. Mais je ne le recommande pas à moins que vous ne sachiez ce que vous faites.
Lorsque vous modifiez directement les fichiers du thème, vos modifications peuvent être perdues lors des mises à jour. Vous n'aurez pas non plus d'aperçu en direct, et même une petite faute de frappe peut perturber 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 " Editeur de fichier de thème dans votre tableau de bord WordPress.
Dans la liste des fichiers à droite, cliquez sur style.css.
Descendez au bas du fichier et collez votre CSS. Par exemple :
p {
color: #0073aa;
}Cliquez sur Mettre à jour le fichier pour enregistrer vos modifications.
⚠️ N'effectuez cette opération 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 les feuilles de style CSS personnalisées sur les pages ou les blocs
Il arrive que vous ne souhaitiez pas que votre feuille de style CSS affecte l'ensemble du site, mais qu'elle s'applique à une seule page ou à un seul bloc. Pour ce faire, vous pouvez utiliser des identifiants de page ou des classes CSS personnalisées.
Utiliser les ID de page dans WordPress
Chaque page de WordPress possède un identifiant unique, et vous pouvez l'utiliser pour cibler les styles de cette 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 ligne <body> . Elle comprendra une classe comme page-id-37.
Vous pouvez ensuite l'utiliser dans votre CSS comme ceci :
.page-id-37 p {
color: green;
}
Cette opération ne modifie que la couleur du texte du paragraphe sur cette page spécifique.
Utilisation des paramètres de blocage de SeedProd
Si vous utilisez SeedProd, vous pouvez cibler des blocs spécifiques en ajoutant un nom de classe personnalisé.
Ouvrez votre page dans le SeedProd builder et cliquez sur le bloc que vous souhaitez styliser. Dans mon cas, je veux styliser un bloc d'en-tête spécifique.
Dans le panneau de gauche, allez dans l'onglet Avancé, cherchez 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és dans WordPress
.page-id-123 p {color: red; }Ou, si vous utilisez SeedProd ou WPCode, vous pouvez créer une classe CSS personnalisée et l'appliquer manuellement à un bloc ou à une section.
Prêt à personnaliser votre site WordPress ?
Comme vous l'avez vu, il existe plusieurs façons simples d'ajouter des CSS personnalisés dans WordPress, même si vous n'êtes pas un développeur.
Vous pouvez styliser des blocs individuels, modifier l'ensemble de votre thème, ou faire de petits changements qui aideront votre site à ressembler exactement à ce que vous voulez. Que vous préfériez utiliser SeedProd, WPCode ou l'un des outils intégrés à WordPress, l'important est que vous n'ayez pas à vous sentir coincé dans les paramètres par défaut de votre thème.
Si vous voulez plus de contrôle sans avoir à éditer les fichiers du thème, SeedProd est le moyen le plus simple de construire et de styliser vos pages, sans code requis.
Vous voulez continuer à personnaliser votre site WordPress ? Voici quelques guides que je vous recommande :
- Comment modifier votre page d'accueil WordPress
- Comment personnaliser les en-têtes sur WordPress
- Comment ajouter des témoignages aux pages de WordPress
- Comment créer une page 404 personnalisée dans WordPress
- Comment ajouter un formulaire de contact dans WordPress
