web-dev-qa-db-fra.com

Le meilleur moyen de remplacer le plugin CSS?

Actuellement, j'utilise la spécificité CSS pour remplacer les styles de plug-in. Je préfère ceci pour l'édition du plugin car cela fait moins de maux de tête lorsque vous mettez à jour.

Ce serait bien si ma feuille de style était chargée après les plugins, de sorte que je n’aie besoin que d’être aussi spécifique, pas plus. Cela rendrait mes feuilles de style beaucoup plus jolies.

pluginscss
36
Mild Fuzz

Comme vous le suggérez, l'approche la plus élégante consiste à charger vos remplacements CSS après l'injection du CSS par les plugins. C'est assez facile à réaliser - vous devez simplement vous assurer que votre header.php appelle wp_head() avant de faire référence à votre feuille de style:

<head>
    <!-- all the usual preamble stuff goes here -->

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>
21
Tim Coulter

Les plugins peuvent gérer les CSS de plusieurs manières.

  • dans le meilleur des cas: le plugin met en file d'attente CSS et fournit l'option de le désactiver (le désactiver, copier le code CSS dans votre feuille de style et être heureux);
  • bon cas: fonction de hooks de plugins qui met en file d'attente le style (fonction de décrochage, accrochez votre propre avec des mods si nécessaire);
  • cas habituel: le plugin met directement en file d'attente CSS. Voir Comment retirer un script? (s'applique également aux styles). Version courte - il y aura une fonction de suppression de file d'attente dans la future version de WP, pour le moment, vous pouvez contourner le problème avec wp_deregister_*
  • mauvaise affaire: le plugin fait écho à CSS parmi beaucoup d'autres choses. Cas par cas...

Globalement, à mon avis, il est préférable et plus facile de désactiver des feuilles de style distinctes et de les incorporer dans le vôtre afin de minimiser les problèmes et d’améliorer les performances (moins de fichiers à récupérer).

19
Rarst

J'enregistre une copie du fichier CSS du plug-in "ne veut pas" dans le dossier du thème et l'importe dans le css du thème en ajoutant

@import url('name-of-the-plugin-css.css');

(en remplaçant, bien sûr, le nom du fichier .css par celui que j’injecte). Ensuite, je modifie la copie css dans le dossier du thème et l’enregistre sur le serveur comme je le fais pour les autres fichiers. Oh oui, il est parfois nécessaire de "clouer" les identifiants ou les classes modifiées en leur attribuant un "! Important".

Je ne sais pas si cela est à la pointe de la technologie, mais cela ne fait aucun mal et fonctionne très bien.

1
Sven Knoch

Une autre manière assez élégante consiste à utiliser la spécificité de CSS.

Donc si le css du plugin dit:

div.product div.images img {
  ......
}

vous définissez dans votre css:

body div.product div.images img {
  ......
}

Voir également la réponse de Michael Rader pour une question similaire.

1
Andreas

Pour remplacer le css du plugin, qui utilisait déjà la spécificité et! Important, j'ai utilisé l'id pour remplacer les classes. Cela a un peu nettoyé mon code. Bien sûr, ce n'est pas non plus une solution parfaite dans la mesure où cela ne fonctionne que s'il existe des identifiants attribués à des éléments ainsi qu'à des classes.

Vous pouvez également utiliser des sélecteurs d'attributs en théorie. Cependant, je n'ai pas encore testé cette théorie.

0
Sean H. Smith

J'ai fini par utiliser! Important pour mon css personnalisé et cela remplace le style du plugin avec lequel j'avais des problèmes. Le développeur du plugin utilisait! Important tout au long du plugin css et c’est pourquoi je ne pouvais pas l’écraser sans! Important.

body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;    
}
0
Randy D