WordPress offre des moyens simples d’ajouter du code CSS pour personnaliser votre site. Voici les deux méthodes détaillées :
- Utiliser l’éditeur de personnalisation du thème
- Utiliser le fichier style.css (via l’interface wordpress ou via FTP)
Enfin, votre thème comporte peut-être une option pour ajouter du code css. Si vous utilisez Divi par exemple, ce thème facilite l’ajout de code css (voir notre article sur les options d’ajout css du thème Divi)
1. Utiliser l’éditeur css de personnalisation du thème
Dans le menu de gauche de votre interface de gestion WordPress, allez dans « Apparence » et cliquez sur « Personnaliser ».
Cherchez l’option « CSS additionnel » ou « CSS Personnalisé ». Cette option peut être située différemment en fonction du thème que vous utilisez.
Collez votre code css dans la zone qui s’ouvre. N’oubliez pas de cliquer sur le bouton « publier » pour enregistrer vos modifications
Nous vous conseillons de systématiquement commenter vos ajouts css. Les commentaires sont des textes explicatifs qui ne sont pas pris en compte par WordPress. Ils vous serviront à identifier plus tard à quoi correspond le code ajouté. Pour insérer ce type de commentaires, « entourez » les par « /** » au début et « **/ » à la fin. Par exemple : /**ceci est le code de reglages de mes polices**/. Pour évitez les erreurs, ne mettez ni accents, ni caratères spéciaux.
Cette méthode est rapide et facile. Elle permet également d’avoir une vue immédiate des effets de votre code css. Cependant, si vous ajoutez plus de code css, la zone est petite ce qui peut rendre pénible d’y travailler. Dans ce cas, il est préférable de modifier directement le fichier style.css. C’est aussi une méthode plus fiable et pérenne lorsqu’il y un nombre plus important de lignes de code (au dessus de 50 lignes par exemple).
2. Ajouter du Code CSS dans WordPress via le fichier style.css
Cette méthode va venir modifier le fichier du site qui gère l’ensemble des styles. Nous vous recommandons de n’utiliser cette méthode que si vous avez mis en place un thème enfant (voir notre article sur la création d’un thème enfant pour wordpress). Vous garantissez ainsi que vos modifications CSS restent intactes même lors des mises à jour de votre thème principal. Sinon à la prochaine mise à jour de votre site, vos modifications seront perdues.
Pour venir modifier le fichier style.css, vous avez la possibilité de le faire de deux façons :
La méthode rapide, depuis l’éditeur WordPress de fichiers du thème
- Dans le menu de gauche de votre interface de gestion WordPress, allez dans « Apparence » et cliquez sur « Editeur de fichiers des thèmes ».
- Dans la liste des fichiers à droite, recherchez le fichier « style.css » et cliquez dessus. Vérifiez bien dans le menu déroulant juste au dessus de la liste des fichiers, que vous avez sélectionnez le bon thème (c’est à dire votre thème enfant)
- Ajoutez votre code CSS à la fin du fichier et cliquez sur « Mettre à jour le fichier » pour enregistrer les modifications. N’oubliez pas de vider le cache de votre navigateur avant de recharger votre page pour que ces changements soient pris en compte.
L’édition via l’éditeur des fichiers du thème donne plus de confort d’utilisation lorsque vous avez un code css long. Elle est aussi plus rapide que de travailler sur le fichier style.css en local comme décrit ci-dessous. Mais cette dernière méthode comporte quelques avantages.
La méthode avancée de modification du fichier style.css via FTP
La dernière option est de télécharger le fichier style.css qui se trouve dans le dossier wp-content/themes/’dossier-de-votre-theme-enfant’ de votre serveur. Vous pouvez ensuite éditer ce fichier avec un logiciel comme Notepad puis le transférer de nouveau sur votre serveur après modifications.
Pensez à vider votre cache après avoir passer une nouvelle version de fichier, sinon vous ne verrez pas vos changements.
Nous vous recommandons de ne pas écraser votre fichier style.css de votre serveur. Renommez l’extension en « style.bak » par exemple, puis transférez ensuite votre fichier style.css modifié. Cela permettra de revenir rapidement à l’ancienne version si votre nouveau fichier comporte des erreurs.
Les avantages sont d’offrir encore plus de confort pour travailler sur un code long et/ou si vous avez besoin d’options offertes par un logiciel comme Notepad : recherche dans le fichiers, remplacements automatiques, identification d’erreurs dans le code, etc.
Si cette dernière méthode plus avancée vous intéresse, lisez notre article sur la création d’un thème enfant pour apprendre comment échanger des fichiers via un logiciel FTP.