Ajouter du code CSS personnalisé dans votre site WordPress peut être effectué de plusieurs méthodes que nous allons détailler. Beaucoup de Web designers ont ce besoin fondamental d’employer la CSS pour rendre leur thème unique.
Ajouter du CSS via WordPress sans utiliser de plugin
Depuis la version 4.7 de WordPress il est possible d’insérer nativement du CSS :
Allez dans Apparence puis Personnaliser, vous remarquerez un panneau nommé CSS additionnel, en cliquant dessus vous aurez accès à un petit éditeur de code CSS vous permettant de voir en direct vos modifications CSS.
Attention cependant à ne pas inclure trop de lignes de code, cet éditeur n’est pas conçu pour supporter de grandes feuilles de style pour des projets lourds sous peine de détériorations des performances de votre code ! Cet outil n’est utile que pour de petites modifications très basiques.
Aller plus loin grâce au plugin Anym Live Editor
J’en profite pour vous présenter notre plugin premium qui gère la CSS de manière bien plus poussée et professionnelle.
Le plugin Anym Live Editor vous permet d’écrire à l’infini des lignes de code CSS, SASS ou SCSS, avec un impact minimal sur les performances de votre site WordPress. De plus, si vous souhaitez bénéficier de performances totales, vous avez la possibilité d’exporter une compilation minifiée de votre CSS depuis le plugin afin de le faire charger dans votre thème comme un fichier de style. En effet, les fichiers CSS sont chargés bien plus rapidement grâce au cache généré par des plugins comme WP Rocket.
Pour ce faire, vous devez commander votre licence Anym Live Editor, puis de télécharger depuis votre espace anym live, l’installation peut se faire soit par insertion direct à votre FTP, ou bien depuis votre espace de gestion des plugins dans l’administration de votre site WordPress.
Naviguez ensuite sur une page de votre site, et vous verrez apparaître un nouveau bouton dans la barre d’administration WordPress : Anym Live Editor. Désormais, en cliquant dessus, cela vous ouvrira un éditeur dans une nouvelle fenêtre, celle-ci sera entièrement reliée à votre page, sur laquel vous pourrez commencer à styliser en direct lorsque vous écrirez votre code CSS (ou même du SCSS !)
Pour sauvegarder, vous n’avez alors qu’une seule manipulation à faire : cliquer sur le bouton « Sauvegarder » ou bien faire CTRL+S. Votre nouvelle insertion de CSS sera alors activée et vos visiteurs verront vos modifications.