Editer le CSS de son site Wordpress

Editer le CSS de son site WordPress

Si vous voulez être capable de personnaliser certains éléments de votre blog ou de votre site, vous avez besoin de connaître un peu de CSS.

Connaître les règles du CSS est une chose, et je reviendrai sur quelques bases à connaître dans un autre article. Aujourd’hui, je veux surtout vous montrer comment et où éditer la feuille de style de votre blog.

Comment éditer sa feuille de style dans WordPress

Il y a plusieurs façon d’éditer sa feuille de style dans WordPress. Et certains me diront que oui! c’est super, dans WordPress il y a dans l’ onglet Apparences  un « Editeur ». Cet éditeur vous permet d’accéder aussi bien à la feuille de style qu’aux fichiers php.

NON !

Non on édite pas ses fichiers à partir de là. Personnellement, je trouve  que cet éditeur est une très mauvaise idée. Une mauvaise manipulation, un signe mal écrit, un faux pas…et vous risquez l’Ecran Blanc de la Mort qui Tue. En gros vous êtes mis à la porte de votre back-office WordPress et pouvez observer un bel écran blanc en place de votre site. Dans ce cas il faut se connecter via FTP pour aller corriger l’erreur dans le fichier en question (et donc se souvenir de son erreur…vous voyez le topo).

En outre, si vous n’avez pas de thème enfant et que vous éditez directement votre feuille de style ici, à la prochaine mise à jour de votre thème, vous perdrez tout.

Utiliser Jetpack

  • Cliquer sur l’onglet Jetpack
  • Dans Réglages activez « CSS personnalisé »
  • Allez dans l’onglet Apparences, une option « Modifier le CSS » est apparue.
  • Ajouter vos règles de CSS dans l’éditeur
  • Cliquez sur enregistrer la feuille de style

[Tweet « J’édite facilement mon css depuis #jetpack dans WordPress! Voici comment… « ]

Utiliser son thème premium

Si vous avez un thème premium, il se peut que votre thème possède une sorte de tableau de bord qui lui est propre et où vous pouvez choisir vos couleurs, vos polices, insérer votre logo etc.
Souvent dans ces panneaux à options, les développeurs ajoutent un encart appelé Quick CSS ou Custom CSS.

Il vous suffit d’ajouter vos règles à cet endroit et d’enregistrer. Aussi simple!

Via FTP

Pour ceux qui gèrent les fichiers de leur site via FTP (je recommanderais Filezilla que je vais utiliser dans cette vidéo) vous pourrez accéder à la feuille de style afin d’y appliquer vos changements.

Ressources: Filezilla – Textwrangler

A savoir

Si votre site utilise un plugin de cache, il vous faudra certainement le désactiver pour pouvoir observer vos changements instantanément. N’hésitez pas également à rafraichir votre navigateur si vous ne voyez aucun changement.
Enfin, chez ovh il y a un fichier .ovhconfig avec une ligne comportant ceci:
environment:production
Pour avoir la possibilité de voir vos changements en direct, vous devez passer cette ligne en
environment: development
N’oubliez pas de remettre « production » une fois les modifications terminées.

Laisser un commentaire