[AUTOMATIQUE] Cet article a plus de 5 ans.
Il se peut donc que les informations qu'il fournit ne soient plus totalement exactes.

Vous avez certainement déjà installé un module WordPress qui correspond tout à fait à vos besoins mais qui ne s’intègre pas du tout à votre charte graphique.

Il va donc falloir toucher au CSS de cette extension pour l’harmoniser avec le reste de votre site.

La méthode est simple, une fois votre extension installée, vous avez deux possibilités pour éditer le style CSS du nouveau plugin :

Méthode 1

La première méthode consiste à copier le fichier CSS du plugin (il peut y avoir plusieurs feuilles donc ce n’est pas forcément une bonne idée) et de le copier dans votre thème:

Puis vous devez dire à votre thème de ne pas tenir compte de la feuille de style du plugin. Pour ce faire, inspecter le header de votre thème où sont déclarées les feuilles de style, trouvez celle que vous voulez surcharger, et relevez l’ID de la feuille de style :

<link rel="stylesheet" id="CE QUE VOUS DEVEZ COPIER" href="..." type="text/css" media="all">

Attention : il ne faut pas sélectionner la fin de l’ID qui se termine toujours par « -css » !

Rendez-vous enfin dans votre fichier functions.php (dans votre thème donc) pour y coller deux lignes. La première permet d’ajouter votre nouvelle feuille de style (celle que vous venez de dupliquer) et la seconde permet de ne plus appeler celle du plugin :

wp_enqueue_style( 'mon-custom-style', get_template_directory_uri().'/mon-custom-style.css' );
wp_deregister_style('CE QUE VOUS VENEZ COPIER');

Vous êtes maintenant libre d’éditer le style que vous venez de copier depuis le plugin.

Méthode 2

Pour cette seconde méthode bien plus simple, rendez-vous dans votre fichier functions.php (dans votre thème donc) pour y coller les lignes suivantes. Elles permetent de déclarer une nouvelle feuille de style qui sera là pour surcharger le style de vos différents plugins, on y a ajouter un hook afin de définir sa priorité en dernier. De cette manière la feuille de style sera normalement la dernière appelée dans le page et donc celle qui sera la plus à même de surcharger les styles précédemment définis.

function high_priority_style() {
  wp_enqueue_style( 'mon-custom-style', get_template_directory_uri().'/mon-custom-style.css' );
}
add_action('wp_enqueue_scripts', 'high_priority_style', '999');

Vous devez donc créer un fichier mon-custom-style.css dans votre thème.

Inspecter maintenant le style de votre page et copier le style que vous voulez modifier dans votre nouveau fichier de style pour le modifier et donc surcharger celui du plugin.

Vous pouvez lire également cette article pour plus de détails.

Article rédigé parBrice CAPOBIANCO

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager !

Coorganisateur des Meetups WordPress Rennes et fondateur de bweb.
Partager cet article

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Afficher les 12 commentaires

12 commentaires

  1. Bonjour,

    je souhaiterais modifier le css de woocommerce (pas grand chose mais couleur des boutons etc.) mais directement depuis le css de mon thème enfant, sans modifier le plugin woocommerce pour éviter de tout perdre lors d’une mise à jour du plugin. Il faudrait je crois faire en sorte que mon style.css de mon thème enfant écrase ceux de woocommerce, mais je n’y parviens pas. Pourriez-vous m’aider à ce sujet ? Merci de votre retour.

    • Pour modifier le fichier css du plugin, il faut le prendre via ftp dans le répertoire wp-content/nom-du-thème/plugins/

    • @Web Site Story : Vous avez faux sur toute la ligne… Il ne faut JAMAIS toucher à un plugin. En plus, à la prochaine mise à jour, vous perdrez vos « bidouilles » dans les fichiers du plugin. C’est une très mauvaise pratique.
      @devis demenagement : il doit exister des plugins pour ça, mais je ne les connais pas et ne les recommande pas non plus.

  2. Salut Cédric,
    en effet, si le plugin est mis à jour, tu peux tout perdre. Le but du topic est de montrer qu’un plugin peut être arrangé en fonction du style de son blog directement via l’interface de son blog (pour les plus novices).
    Pour ne pas perdre ses modifs css lorsqu’elles ont été faites directement dans le module il faut faire un backup du dossier de ce dernier avant de le mettre à jour. Personnellement, je préfère surcharger le style du module dans la feuille de style de mon theme. De cette manière, il n’y a pas de risque (ou peu) que les modifications visuelles soit écrasées par une maj.

    • Merci Brice pour ton retour,

      C’est ce que je fais effectivement, j’ajoute les styles modifiés du pluggin (module) dans ma feuille de style.css dans mon thème enfant. Mais lorsqu’il y a beaucoup de modifictions celle-ci peut-être conséquente. Je me demandais s’il n’y avait pas mieux à faire…
      Merci pour ton partage de connaissances à travers ton blog.

    • Autre solution que j’emploie fréquemment,
      j’utilise @import pour inclure une copie de la feuille de style du module que j’ai préalablement placée dans le répertoire de mon thème. Ainsi, j’ai tout sous la main, je n’ai pas à m’embêter à surcharger la feuille de style du module mais juste à modifier sa copie. Il suffit donc de supprimer dans le plugin une simple ligne qui sert à appeler le css d’origine et le tour est joué ! En cas de mise à jour du module, supprimer cette ligne à nouveau devrait être la seule chose nécessaire, sauf si bien évidemment la mise à jour en question est majeure et que la feuille de style est complètement modifiée.
      Tu l’aura sans doute remarqué, je ne suis pas friands de plugins lorsque ceux si agissent sur le front-end des sites, notamment à cause des problèmes de mise à jour qui nécessitent de re-modifier le plugin en conséquence. Par contre je suis tout à fait friand des modules back-end qui permettent d’ajouter un nombre incalculable de fonctionnalités à wordpress.