beste Möglichkeit, Plugin-CSS zu übersteuern?

Derzeit verwende ich CSS-Spezifität, um Plugin-Stile zu überschreiben. Ich bevorzuge das Bearbeiten des Plugins, da es weniger Kopfschmerzen beim Update verursacht.

Was schön wäre, wenn mein Stylesheet nach den Plugins geladen wird, so dass ich nur so spezifisch sein muss, nicht mehr. Dies würde meine Stylesheets viel schöner machen.

Solutions Collecting From Web of "beste Möglichkeit, Plugin-CSS zu übersteuern?"

Wie Sie vorschlagen, ist der eleganteste Ansatz, wenn Ihre CSS-Überschreibungen nach dem von den Plugins injizierten CSS geladen werden. Das ist ziemlich einfach zu erreichen – Sie müssen nur sicherstellen, dass Ihre header.php wp_head() bevor sie auf Ihr header.php wp_head() :

   < ?php wp_head(); ?>   

Es gibt mehrere Möglichkeiten, wie Plugins mit CSS umgehen können.

  • best case: plugin stuft CSS ein und bietet die Option, es zu deaktivieren (deaktivieren Sie es, kopieren Sie CSS-Code in Ihr Stylesheet und seien Sie glücklich);
  • Guter Fall: Plugins Hooks funktionieren im Queue-Stil (Unhook-function, hook your own mit Mods, falls nötig);
  • üblicher Fall: Plugin queues CSS direkt. Siehe So entfernen Sie ein Skript aus der Warteschlange? (gilt auch für Stile). Kurze Version – es wird in der zukünftigen WP-Version eine Auszugsfunktion geben, denn jetzt könnte mit wp_deregister_*
  • Schlechter Fall: Plugin echo CSS unter vielen anderen Dingen. Von Fall zu Fall…

Insgesamt ist es meiner Meinung nach besser und einfacher, separate Stylesheets zu deaktivieren und sie in Ihre eigenen zu integrieren, um Probleme zu minimieren und die performance zu verbessern (weniger Dateien zu holen).

Ich speichere eine Kopie des “nicht willigen” CSS-Plugins in den Theme-Ordner und importiere es in das Theme CSS, indem ich hinzufüge

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

dazu (natürlich den Namen der .css durch den, den ich injiziere, ersetze). Dann ändere ich die css-Kopie im Theme-Ordner und speichere sie wie bei den anderen Dateien auf dem Server. Oh ja, manchmal kann es notwendig sein, die IDs oder classn zu verändern, indem Sie ihnen ein “! Wichtig” zuweisen.

Ich weiß nicht, ob das der Stand der Technik ist, aber es schadet nicht und funktioniert gut.

Ein anderer, ziemlich eleganter Weg ist die Spezifität von CSS.

Also, wenn die CSS des Plugins sagt:

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

Sie definieren in Ihrem CSS:

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

Siehe auch die Antwort von Michael Rader für eine ähnliche Frage.

Um die CSS des Plugins zu überschreiben, das bereits die Spezifität und! Wichtig verwendete, habe ich die ID verwendet, um die classn zu überschreiben. Das hat meinen Code etwas aufgeräumt. Natürlich ist es auch keine perfekte Lösung, da es nur funktioniert, wenn IDs sowohl Elementen als auch classn zugewiesen sind.

Sie könnten auch Attributselektoren in der Theorie verwenden. Allerdings muss ich diese Theorie noch testen.

Ich benutze schließlich! Wichtig für meine benutzerdefinierte CSS und das Styling für das Plugin, mit dem ich Probleme hatte, überschreiben. Der Entwickler des Plugins verwendet! Wichtig im gesamten Plugin CSS und deshalb konnte ich es nicht ohne! Wichtig überschreiben.

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

Um die CSS des Plugins zu überschreiben, das bereits die Spezifität und! Wichtig verwendete, habe ich die ID verwendet, um die classn zu überschreiben. Das hat meinen Code etwas aufgeräumt. Natürlich ist es auch keine perfekte Lösung, da es nur funktioniert, wenn IDs sowohl Elementen als auch classn zugewiesen sind.

Sie könnten auch Attributselektoren in der Theorie verwenden. Allerdings muss ich diese Theorie noch testen.