Votre site internet sous WordPress a besoin d’un rafraîchissement mais vous n’avez pas les moyens ou le temps nécessaire de vous offrir une refonte ? La personnalisation des feuilles de style (CSS) est un moyen simple et rapide de donner un « coup de jeune » à votre site.
Pour personnaliser votre site WordPress en jouant simplement sur les feuilles de style, plusieurs possibilités s’offrent à vous :
1ère option : identifier les feuilles de style et le modifier directement
C’est une solution plutôt réservée aux professionnels du webdesign car il faut modifier directement le code source des feuilles de style concernées. De plus, une erreur de code est vite arrivée, ce qui peut entraîner au mieux quelques anomalies en front-office, au pire un site totalement cassé. Enfin, si vous mettez régulièrement à jour votre thème (sans utiliser le thème enfant), vos modifications seront écrasées par la nouvelle version et vous devrez recommencer…
2ème option : utiliser un plugin
C’est de loin la solution la plus sage si vous ne disposez pas des compétences en matière de webdesign. Il existe de nombreux plugins (extensions pour WordPress) qui permettent d’agir sur les feuilles de style en ajoutant une « surcouche » sur les feuilles de styles existantes.
Parmi ces extensions nous avons une préférence pour Simple Custom CSS qui est totalement gratuite et qui fait parfaitement son office. Avec plus de 300.000 installations actives, c’est une valeur sûre parmi les extensions gratuites pour WordPress.
Pour pouvoir identifier le code CSS à surcharger, vous pouvez utiliser l’inspecteur de code de Google Chrome ou Mozilla Firefox. Par exemple, sous Google Chrome, faites un « Clic-droit » sur l’élément que vous souhaitez modifier pour afficher le code CSS correspondant :
Vous pouvez changer directement les valeurs dans la console et visualiser instantanément les changements au niveau du front-office. Vous pouvez également ajouter des instructions sur l’élément actif :
Si le rendu vous convient, vous devez copier le code que vous avez généré (sélectionnez-le puis CTRL+C). Rendez-vous ensuite dans le menu « Apparence » et sélectionner « Custom CSS ». Puis collez le code dans la fenêtre et sauvegardez.
Option 3 : un plugin oui, mais sans connaissance en CSS !
Vous n’y connaissez rien ou pas grand chose en webdesign ou vous avez peur de manipuler le code CSS ? Utilisez CSS Hero, un plugin ultra convivial pour modifier votre code CSS en toute tranquillité et en mode WISYWYG.
Pour ce faire rien de plus simple : rendez-vous sur https://www.csshero.org/ et téléchargez le plugin. Installez-le normalement depuis votre back-office, puis activez-le. Rendez-vous ensuite sur votre site (connecté en tant qu’administrateur) et vous verrez apparaître dans la barre d’outils une nouvelle entrée dans le menu :
Cliquez pour activer l’éditeur, puis sélectionner avec la souris l’élément que vous souhaitez modifier. Une barre d’outils à gauche vous permet d’intervenir pour modifier à votre convenance l’apparence de cet élément.
Cliquez sur « SAVE AND PUBLISH » pour enregistrer les changements. Une fois vos modification terminées, quittez simplement l’éditeur.
C’est tout ! Nul besoin de connaître le langage CSS et un résultat impeccable, tout de suite !
Vidéo : CSS HERO en action
Conclusion
Modifier l’apparence de son site internet sous WordPress sans passer par une refonte globale par un professionnel est à la portée de tout le monde ou presque ! En fonction de vos connaissances, choisissez juste la méthode la plus appropriée.
En cas de besoin, n’hésitez pas à nous contacter, nous nous ferons un plaisir de vous aider.
