web-dev-qa-db-fra.com

Les styles par défaut du thème écrasent le CSS personnalisé de mon plugin

J'ai créé un petit plugin qui crée un widget que j'ai créé, essentiellement un joli élément <ul>. Malheureusement, tous les styles de widgets par défaut remplacent mon CSS personnalisé, et l'ajout de !important à certains styles a eu des conséquences néfastes en raison de la taille et des variations de couleur.

Y a-t-il un moyen de contourner ceci? Je veux juste que la feuille de style fonctionne pour le widget que j'ai créé et qu'elle ne soit pas chargée à partir des valeurs par défaut.

Tous les conseils/suggestions seraient grandement appréciés.

1
Eddie

Je veux d’abord commencer par dire que je suis d’accord avec ce que @Wyck a dit

C'est généralement une mauvaise idée de remplacer le CSS d'un thème par votre plugin, mais l'ajout d'un identifiant/classe unique à votre widget devrait suffire.

Vous avez dit que la recommandation de @ Wyck ne fonctionnait pas. Je penserais probablement que c'est la voie à suivre et la seule façon de ne pas interférer avec le style d'un thème. Vous devez utiliser un identifiant ou une classe unique, puis cibler ce sélecteur. Je pense juste que votre exécution ici est fausse, c'est pourquoi cela ne fonctionne pas.

Tout d’abord, vous devriez éviter d’utiliser !important dans votre css. Cela signifie généralement que votre priorité d'une feuille de style n'est pas correctement définie

Deuxièmement, la priorité est votre problème ici. Tout votre style est remplacé par la feuille de style principale car vos styles sont chargés en premier et non en dernier. Je crois que vous avez mis votre feuille de style dans la file d'attente avec wp_enqueue_style() , puis vous l'avez accrochée au wp_enqueue_scripts

function my_plugin_style() {
       wp_enqueue_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
   }

add_action( 'wp_enqueue_scripts', 'my_plugin_style' );

Si vous regardez add_action( $hook, $function_to_add, $priority, $accepted_args ); , vous verrez que le troisième paramètre ($priority) est l'endroit où vous définissez la priorité à laquelle votre hook doit être exécuté. . Plus le nombre est élevé, plus la priorité est basse. Dans votre cas, vous devez définir une priorité très basse pour vous assurer que vos styles sont chargés en dernier. Donc, vous aurez besoin de faire quelque chose comme ça

add_action( 'wp_enqueue_scripts', 'my_plugin_style', 9999 );
1
Pieter Goosen