Manchmal möchte man in WordPress die vom Plugin gelieferten CSS-Dateien nicht nutzen, sondern lieber eigene Stylesheet-Files. Dann hilft nur das de-registrieren. Wie das geht, zeige ich hier…
Inhaltsverzeichnis:
Wann sollte ich CSS-Dateien von Plugins de-registrieren?
Installiert man ein Plugin in WordPress, bringt dieses häufig eigene CSS Stylesheet-Dateien mit. Möchte man die Formatierungen ändern, macht man dies normalerweise entweder über das Backend des Plugins (insofern dieses Einstellungsmöglichkeiten mitbringt, um die gelieferten Cascading-Style-Sheets zu überschreiben) oder aber über die theme-eigene CSS-Datei (z.B. style.css). Blöd nur, wenn das nicht geht, weil der Plugin-Entwickler die Stylesheets zum Beispiel mit dem Anhang „!important“ fixiert hat. Dann bleibt manchmal nur noch der Weg die CSS-Dateien des Plugins zu de-registrieren um selber das Styling in die Hand zu nehmen.
Übrigens gibt es für manchen Entwickler einen weiteren Grund die CSS Files zu de-registrieren: Performance-Optimierer versuchen gerne die Anzahl geladener Files einer Webseite zu minimieren. Indem die Plugin-CSS-Dateien de-registriert und der Inhalt dieser in der style.css geladen werden, entsteht ein Performance-Vorteil.
CSS-Dateien finden, die de-registriert werden sollen
Zuallererst sucht man den Handle, der in der Registrier-Funktion wp_enqueue_style als Argument mitgeliefert wird und das Stylesheet eindeutig identifiziert.
wp_enqueue_style('wp-pagenavi', get_stylesheet_directory_uri().'/pagenavi-css.css', false, '2.50', 'all');
Mit der Funktion wp_enqueue_style() können CSS-Dateien eines Plugins bei Auslieferung der Webseite geladen werden. Der Handle in diesem Beispiel ist „wp-pagenavi“.
De-Registrieren einer Stylesheet-Datei über den Handle
Hat man also den Handle gefunden, öffnet man die functions.php des eigenen Themes und fügt folgenden Code ein:
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'wp-pagenavi' );
// Hier kann man so viele Styles de-registrieren, wie man möchte.
}
Das war es auch schon: Über den Handle wird das Stylesheet lokalisiert und in einer eigens in der functions.php erstellten Funktion de-registriert. Das Ganze wiederholt man an selbiger Stelle mit beliebig vielen Dateien.
Lukas
Super Tipp, aber um beispielsweise nur die Anzahl der Stylesheets zu verringern, kann man auch auf ein PlugIn wie W3 Total Cache zurückgreifen.
metacowboy
Exzellent Tipp fast schon ein muss für jeden der einige Plugs laufen hat. die alle Ihr css und js einbinden. Gibt es die option auch Screen device abhängig ? z.B Besucher ist Mobile dann brauch ich das Flash js nicht und einige andere JS kann man de-registrieren ?
René Dasbeck Post author
Gute Frage. Da fällt mir aber aktuell nichts zu ein. Wenn du eine Lösung finden solltest, würde ich die gerne hier gepostet sehen.
Inserate-Börse
Ich habe zu dem Thema einige Fragen. Und zwar verwende ich ein Theme (Child Theme) mit einem Grid System. Das Theme hat ein eigenes style.css und für das grid System wird auch eine eigene css geladen.
Kann ich den inhalt des grid.css einfach in die style.css meine Child Themes kopieren und die grid.css wie in deinem Beitrag beschrieben „deregistrieren“? Oder muss ich irgendwo noch Anweisungen geben dass die CSS Angaben nun in der style.css liegen? Und verhält es sich mit css Dateien von Plugins genau so?
Und vielleicht interessiert dies jemanden. Auf der Seite hechtmediaarts.com habe ich einen Code Schnippsel gefunden der einfach in die Toolbox von Sergej Müller hochgeladen werden kann. Sämtliche Java Scripts wandern daraufhin vom Header in den Footer.
Kirsten
Ach ist das schön, wenn auf einen Schlag die ganzen hässlichen Formatierungen weg sind! :o)
Torsten
Wieso „vermeintlich“? So wird doch der http-request vermieden und definitiv Zeit gespart. Der Anteil mag deutlich geringer sein als z.B. bei der Bildoptimierung, aber „vermeintlich“ suggeriert, dass dem eigentlich nicht so ist. Und das wäre falsch.
@Klaus: Danke für die Idee! Wird gleich übernommen!
Klaus
Sehr nützlich! Mit der gleichen Methode kann man auch Scripts ausblenden, statt wp_print_styles setzt man wp_print_scripts ein. Hier der Code für das Script vom Contact-Form-7, dass ich nur auf der Kontaktseite (hier Page-ID 504) benötige:
add_action( 'wp_print_scripts', 'deregister_cf7_javascript', 100 );
function deregister_cf7_javascript() {
if ( !is_page(array(504)) ) {
wp_deregister_script( 'contact-form-7' );
}
}
Jo
Hi Klaus,
cooles Snippet, vielen Dank! Ich benutze CF7 auf zwei Seiten. Wie muss ich dein Snippet bearbeiten, um die JS-Dateien auf zwei Seiten drin zu lassen? Habe viel rum probiert, aber es will nicht recht.
Viele Grüße
Jo