In WordPress mit PHP CSS und JS Dateien selektiv entfernen
In diesem Beitrag soll es um das Gegenteil davon gehen, was ich in einem anderen Beitrag ausgeführt habe, wo es um das selektive Einbinden von CSS und JS Dateien geht.
Ausgangssituation
Das schöne an WordPress ist, daß man seine Funktionalität mit vielen Plugins erweitern kann. Die Auswahl ist riesig, und die Möglichkeiten, die man dadurch erhält, sind großartig. Und sehr viele Plugins sind kostenlos. Ob das nun Contact Form 7 ist für Formulare, oder ein Table of Contents-Plugin für Blogbeiträge, oder ein Tabellenplugin für die Darstellung von tabellarischen Inhalten – man installiert sich viele Plugins, weil man sie braucht. All diese Plugins binden ihre JS- und CSS-Dateien in den Quellcode ein.
In der Regel braucht man dieses oder jenes Plugin aber nur auf bestimmten, wenn nicht sogar nur auf einer Unterseite oder nur auf der Startseite. Das hängt von der Funktion des Plugins ab, ein SEO Plugin brauche ich auf jeder Seite, aber das Contact Form 7-Plugin natürlich nur auf der oder den Seiten, wo ein Kontaktformular eingebaut wird. Nehmen wir mal an, daß es nur ein Kontaktformular auf der Kontaktseite gibt, und ein Plugin für die Darstellung der letzten Blogbeiträge in der Sidebar nur im Blogbereich genutzt wird, weil nur der Blogbereich die Sidebar hat.
Es gibt einige Plugins, die ihre CSS- und JS-Dateien nur auf Seiten einbinden, wo sie verwendet werden, aber der größte Teil der Plugins macht das leider nicht. Ein Beispiel ist z.B. Contact Form 7. Seine CSS-Datei wird in jede Seite eingebunden, egal ob da ein Kontaktformular verwendet wird, oder nicht.
Das ist ärgerlich, oder? Gibt es Möglichkeiten das zu ändern? Ja, das geht mit ein paar Zeilen PHP.
Voraussetzungen
Siehe hierzu meine Ausführungen zu Child Themes hier.
Vorbereitungen
Mein Tipp: einfach mal den Quellcode der Startseite studieren, und zwar ohne Caching- und Optimierungs-Plugins, dann sieht man den original Quellcode der Seite. Dort mal in den Header und Footer schauen wo hintereinander sehr viele CSS- und JS-Dateien eingebunden werden. Einige sind sofort erkennbar,
Beispiel Contact Form 7:
In dem Screenshot sieht man eine CSS-Datei, die von Contact Form 7 eingebunden wird. Man achte auf die id, diese ist von großer Bedeutung. In diesem Fall heisst sie contact-form-7-css. Jede eingebundene CSS- und JS-Datei hat eine eigene id und wird für die PHP-Scripte benötigt. Und natürlich kann die id dabei helfen eine CSS- oder JS-Datei besser zuzuordnen. Zu beachten ist noch Folgendes: der Zusatz ‘-css’ am Ende des Namens wird von WordPress drangehängt, d.h. die id lautet eigentlich: contact-form-7.
Beispiele
CSS-Dateien werden mit der Funktion wp_dequeue_style() entfernt, JS-Dateien werden mit der Funktion wp_dequeue_script() entfernt.
CSS-Datei generell entfernen ohne Einschränkungen
Das bedeutet also überall soll sie weg. Ich hatte das Plugin ‘Happy Elementor Addons’ installiert für irgendwas, aber nicht für seine Icon Bibliothek. Wie ich im Quelltext sehen konnte, wurde aber auf allen Seiten eine CSS-Datei engebunden um irgendwelche Icons zu laden. Also muß die wieder weg, um Ladezeiten zu optimieren. Um die Datei zu referenzieren ist wieder die id entscheidend. Es spielt also keine Rolle wie die CSS-Datei benannt ist, es spielt auch keine Rolle, wo die Datei liegt, nur die id ist wichtig, und die holt man sich aus dem Quelltext. In diesem Fall war die id: happy-icons.
Die dritte Zeile entfernt die Gutenberg Block Library CSS-Datei aus dem Quellcode. Das macht natürlich nur Sinn wenn man Gutenberg nicht nutzt.
1 2 3 4 5 | function wp_remove_scripts() { wp_dequeue_style('happy-icons'); wp_dequeue_style('wp-block-library'); } add_action( 'wp_enqueue_scripts', 'wp_remove_scripts', 100 ); |
Die Zahl ‘100’ am Ende der letzten Zeile steuert die Priorisierung. Je höher die Zahl desto niedriger die Priorisierung. Die CSS-Dateien, welche entfernt werden sollen, müssen nämlich erst mal geladen sein, damit man sie wieder entfernt. Mit der Zahl ‘100’ und damit einer niedrigeren Priorisierung kann man davon ausgehen, daß die CSS-Dateien bereits geladen wurden.
CSS-Datei nur auf der Startseite lassen
… also von allen anderen Seiten entfernen. Zurück zum Beispiel mit Contact Form 7, nehmen wir an es existiert nur ein Kontaktformular auf der Startseite. Mit diesem PHP-Script nehmen wir die CSS-Datei aus allen anderen Seiten und Bereichen raus, sie wird nur auf der Startseite eingebunden:
1 2 3 4 5 6 | function wp_remove_scripts() { if ( !is_front_page() ) { wp_dequeue_style('contact-form-7'); } } add_action( 'wp_enqueue_scripts', 'wp_remove_scripts', 100 ); |
CSS-Datei nur auf einer Unterseite lassen
Wir bleiben bei Contact Form 7 und haben fast die gleiche Situation wie oben, unser Kontaktformular ist aber nicht auf der Startseite, sondern auf der Unterseite ‘Kontakt’.
1 2 3 4 5 6 | function wp_remove_scripts() { if ( !is_page(1571) ) { wp_dequeue_style('contact-form-7'); } } add_action( 'wp_enqueue_scripts', 'wp_remove_scripts', 100 ); |
Zu beachten: in der Abfrage wird die Page-ID abgefragt. Jede Seite in WordPress hat eine eigene Page-ID, und keine kommt doppelt vor. Um sich die Page-ID der Unterseite zu holen muß man die Seite im Browser öffnen und dann die Dev Tools des Browsers öffnen und im BODY nachsehen.
Beispiel:
JS-Datei nur auf einer Unterseite laden
Folgendes PHP-Script entfernt eine JS-Datei mit der id “kontakt” von allen Seiten außer der mit der page-id 1571.
1 2 3 4 5 6 | function wp_remove_scripts() { if ( !is_page(1571) ) { wp_dequeue_script('kontakt'); } } add_action( 'wp_enqueue_scripts', 'wp_remove_scripts', 100 ); |
Fazit
Das alles funktioniert sehr gut, ich habe keine Probleme mit meinen PHP-Scripten gehabt. Und man tut etwas für bessere Ladezeiten 😉
