CSS Stylesheets von WordPress Plugins de-registrieren

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… CSS Dateien von WordPress Plugins de-registrieren

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 gelandener Files einer Webseite zu minimieren. Indem die Plugin-CSS-Dateien de-registriert und der Inhalt dieser in der style.css geladen werden, entsteht ein vermeintlicher 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.

Letzte Version vom 5. Juli 2016 von Netzgänger
Jetzt WordPress Newsletter in dein Postfach

Melde dich jetzt für meinen Newsletter an und du erhältst regelmäßig Tipps und Tricks zu WordPress in dein Postfach. Natürlich kannst du ihn jederzeit abbestellen.


8 Kommentare

  1. Lukas sagt:

    Super Tipp, aber um beispielsweise nur die Anzahl der Stylesheets zu verringern, kann man auch auf ein PlugIn wie W3 Total Cache zurückgreifen.

  2. metacowboy sagt:

    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 ?

  3. Inserate-Börse sagt:

    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.

  4. Kirsten sagt:

    Ach ist das schön, wenn auf einen Schlag die ganzen hässlichen Formatierungen weg sind! :o)

  5. Torsten sagt:

    Indem die Plugin-CSS-Dateien de-registriert und der Inhalt dieser in der style.css geladen werden, entsteht ein vermeintlicher Performance-Vorteil.

    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!

  6. Klaus sagt:

    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 sagt:

      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

Kommentar schreiben

Mit Absenden deines Kommentars erklärst du dich mit der Verarbeitung deiner hier angegebenen Daten einverstanden (Datenschutzerklärung). Diese werden nur zur Verwaltung der Kommentare verwendet und keinem anderen Zweck zugefügt. Du kannst jederzeit per E-Mail an info@netz-gaenger.de der Speicherung deiner Daten widersprechen.

* Notwendige Angaben

Netzgänger Webdesign | Rohrersmühlstraße 22 in Schwabach | Bayern
Kontakt: info@netz-gaenger.de
↑ oben
Inhalt