Sommaire
Les feuilles de style en cascade (CSS) personnalisées vous permettent de concevoir votre site en contrôlant davantage l’aspect et le comportement des pages. Le script qui entre dans les CSS peut tout régir, de l’imagerie aux types de polices qui s’affichent sur vos pages.
Des éléments tels que les couleurs des liens, les images d’arrière-plan et même les sons intégrés peuvent tous provenir de ces fichiers. Cependant, cela soulève la question suivante : comment ajouter un CSS personnalisé dans WordPress ?
En réalité, modifier le fichier CSS est beaucoup plus simple que vous ne le pensez et j’ai rassemblé 3 méthodes que vous pouvez utiliser pour ajouter du CSS personnalisé.
De quelles connaissances en codage ai-je besoin ?
Si vous avez fait une rapide recherche Google sur CSS auparavant, je suis sûr que vous avez vu d’innombrables exemples d’extraits de code CSS. De nos jours, vous pouvez trouver à peu près tout sur Internet, et le code CSS n’est pas différent.
Et comme vous le verrez dans les méthodes suivantes, l’ajout de feuilles de style CSS personnalisées n’a rien à voir avec des compétences en codage. Il s’agit plutôt de trouver le bon emplacement ou le bon fichier pour y coller le code.
Ainsi, vous n’avez pas besoin d’être un expert en codage pour ajouter un CSS personnalisé.
3 méthodes pour ajouter un CSS personnalisé dans WordPress
1. Changements sur le niveau de codage
De nombreux propriétaires de sites Web trouvent que la modification directe du fichier CSS est la voie la plus simple à suivre. Et en toute honnêteté, c’est la méthode la plus simple car elle peut être effectuée directement à partir de WordPress sans plugins supplémentaires.
Pour ce faire, cliquez sur Apparence et sélectionnez l’option Éditeur de thème.
Cela affichera tous les fichiers associés au thème que vous utilisez actuellement. Par conséquent, vous devez simplement vous assurer que vous modifiez le bon fichier CSS. Et le fichier que vous choisissez d’éditer dépend de l’élément spécifique que vous voulez personnaliser.
Bien que de nombreuses personnes trouvent cette partie de la personnalisation plus facile, elle présente des inconvénients.
Par exemple, vous devrez peut-être recoder le CSS si vous décidez de changer de thème. La plupart des thèmes utilisent leur propre fichier CSS pour la conception générale. Ainsi, les modifications que vous apportez au fichier d’un thème n’auront aucun impact sur un autre.
Toutefois, il convient de noter que vous ne changerez pas de thème très souvent.
Une bonne solution consiste à enregistrer dans un bloc-notes toutes les feuilles de style CSS personnalisées que vous ajoutez au fichier d’un thème. Ainsi, vous pourrez utiliser le même code sur un autre thème si vous le souhaitez.
Cependant, de nombreux propriétaires de sites choisissent d’utiliser des thèmes enfants. Ainsi, les modifications apportées au CSS ne seront pas supprimées si le développeur met à jour le thème principal. Vous bénéficiez de tous les avantages sans perdre le codage personnalisé.
2. Plugins CSS pour la personnalisation
Comme tout développeur WordPress le sait, les plugins vous permettent de personnaliser n’importe quelle partie de votre site Web sans écrire une seule ligne de code dans la plupart des cas. Il n’est donc pas surprenant d’apprendre qu’il existe une variété de plugins qui font de l’ajout de CSS personnalisés un jeu d’enfant.
Et cette méthode présente un avantage majeur par rapport à la dernière méthode.
Au lieu que le CSS soit enregistré directement dans un fichier de thème, il est enregistré dans le fichier du plugin. Cela signifie que vous pouvez utiliser librement le même CSS dans plusieurs thèmes sans le réécrire. C’est un gain de temps considérable pour les développeurs qui changent souvent de thème.
Un autre avantage considérable est que de nombreux plugins ont des protections qui empêchent le code de planter votre site Web. Après tout, il suffit de peu de choses pour faire tomber un site Web lors de la modification d’un fichier de thème et cette méthode permet de l’éviter complètement.
C’est donc probablement la meilleure méthode à envisager pour les débutants.
Voici quelques excellents plugins à envisager d’utiliser :
Éditeur de style CSS visuel
Le plugin Visual CSS Style Editor est un choix incroyable pour ajouter des CSS personnalisés à WordPress. Il est conçu avec un éditeur visuel et vous permet de contrôler plus de 60 propriétés de style sur le site Web.
Son outil réactif vous permet de modifier n’importe quelle page, article, page de connexion et élément. Bien que la version pro vous offre une foule d’autres fonctionnalités, comme plus de 800 polices Google, la version gratuite est très puissante pour l’édition du CSS.
CSS personnalisé simple
Simple Custom CSS est le plugin le plus populaire pour ajouter des CSS personnalisés à votre site Web. Ce plugin vous permet d’ajouter des CSS personnalisés qui remplacent tous les fichiers de plugin ou de thème. Par conséquent, vous pouvez personnaliser l’ensemble de votre site Web avec un seul plugin.
Il comprend également une vérification des erreurs, ce qui est idéal pour les débutants.
WP Add Custom CSS
Peu importe si vous avez besoin d’ajouter des modifications au CSS pour l’ensemble du site ou seulement pour une poignée de pages, WP Add Custom CSS peut les accueillir. Les modifications que vous apportez dans ce plugin remplaceront la feuille de style principale pour vous donner l’apparence que vous souhaitez sur votre site. Il est disponible en anglais, allemand et espagnol.
3. Modification du thème CSS
La plupart des thèmes ont des sections intégrées qui vous permettront d’ajouter du codage à partir de la zone “Personnaliser” de WordPress. Cela vous permet d’ajouter directement du CSS dans les fichiers du thème et beaucoup d’entre eux vous permettent de voir les changements en temps réel.
Il s’agit de fichiers CSS enfant (à ne pas confondre avec les thèmes enfant de WordPress) et ils fonctionnent en conjonction avec votre feuille de style principale.
Comme pour le premier, le principal inconvénient de cette méthode de modification du CSS est que vous risquez de perdre vos modifications si vous changez de thème. Ceux-ci sont spécifiques au design et ne seront pas conservés si vous changez de thème.
Cependant, il peut s’agir d’un excellent moyen d’apporter des changements spécifiques basés sur le thème lui-même. Par exemple, les couleurs ou polices spécifiques utilisées dans ce CSS enfant peuvent ne pas être visuellement attrayantes dans le nouveau thème de toute façon.
Après avoir cliqué sur “Personnaliser”, le personnalisateur de WordPress s’affiche. Faites défiler vers le bas et cliquez sur l’option “Additional CSS”.
Cela ouvrira un éditeur CSS. Vous pourrez y ajouter votre propre code CSS personnalisé.
Voici un bon exemple de la façon dont l’ajout d’un code CSS personnalisé se répercute immédiatement sur le site, de sorte que vous pouvez voir les modifications et leur aspect avant de les publier.
Dans ce code, nous modifions la couleur de l’ombre du titre 1 sur le site.
Avant le code ajouté
Après le code ajouté
Le code que nous avons utilisé pour obtenir ce look a été simplement ajouté directement dans le personnalisateur.
Vous pouvez ajouter tout le code CSS personnalisé que vous souhaitez directement dans cette zone du personnalisateur. Il est ainsi plus facile de voir toutes les modifications en temps réel.
Utiliser le CSS personnalisé dans WordPress
L’utilisation du CSS pour modifier votre site peut améliorer ses performances, vous donner un plus grand contrôle et vous aider à affiner votre conception. Tant que vous avez une compréhension de base du fonctionnement du codage, ou au moins que vous voyez ce que les changements font en temps réel, il peut être relativement simple d’ajouter du CSS à WordPress.
Cela peut être l’un des meilleurs moyens d’offrir une expérience totalement unique à votre public cible. Et avec la popularité de WordPress en tant que CMS, se démarquer n’a jamais été aussi important.
Quelles sortes de choses avez-vous modifiées dans le fichier CSS ? Avez-vous trouvé plus facile de modifier la feuille de style directement, ou préférez-vous utiliser un plugin ?
