Le meilleur moyen de remplacer le plugin CSS?

36

Actuellement, j'utilise la spécificité CSS pour remplacer les styles de plug-in. Je préfère ceci pour éditer le 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.

    
posée Mild Fuzz 07.10.2010 - 12:54
la source

7 réponses

21

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>
    
réponse donnée Tim Coulter 08.01.2011 - 17:08
la source
19

Il existe plusieurs manières pour les plugins de gérer les CSS.

  • dans le meilleur des cas: le plugin place les files d'attente CSS et fournit une option pour 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-la avec des mods si nécessaire);
  • cas habituel: le plugin met directement CSS en file d'attente. Voir Comment supprimer un script? (s'applique également aux styles). Version courte - il y aura une fonction de suppression de file d'attente dans la prochaine version de WP; pour l'instant, vous pourriez contourner wp_deregister_* .
  • mauvaise affaire: le plugin fait écho à CSS parmi beaucoup d'autres choses. Au cas par cas ...

Globalement, à mon avis, il est préférable et plus simple 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).

    
réponse donnée Rarst 07.10.2010 - 13:09
la source
1

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');

(remplace, bien sûr, le nom du fichier .css par celui que je suis en train d’injecter). 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 s'il s'agit de l'état de la technique, mais cela ne fait aucun mal et fonctionne très bien.

    
réponse donnée Sven Knoch 27.07.2011 - 03:49
la source
1

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.

    
réponse donnée Andreas 05.01.2012 - 17:36
la source
0

Pour remplacer le css du plugin, qui utilisait déjà la spécificité et! important, j’ai utilisé l’identifiant 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.

    
réponse donnée Sean H. Smith 28.08.2013 - 08:02
la source
0

J'ai fini par utiliser! important pour mon css personnalisé et cela remplace le style du plug-in 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 n’aurais pas pu le remplacer sans! Important.

body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;    
}
    
réponse donnée Randy D 18.02.2017 - 16:13
la source
-1

Pour remplacer le css du plugin, qui utilisait déjà la spécificité et! important, j’ai utilisé l’identifiant 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ù il 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 mis cette théorie à l’épreuve.

    
réponse donnée dsdsd 03.11.2017 - 09:51
la source

Lire d'autres questions sur les étiquettes