CSS und Javascript von WordPress Plugins deaktivieren

Kennt ihr das? Ihr installiert ein Plugin, das fügt eine neue Funktion hinzu und kurze Zeit später erkennt ihr, wie viel Ballast dieses Plugin eigentlich mitbringt.

Plötzlich merkt ihr, dass diese eine kleine Erweiterung, mehrere CSS- oder Javascript-Dateien in euren WordPress Blog integriert. Das mag weder Google Pagespeed, noch macht es in irgendeiner Art und Weise Sinn und viele dieser Dateien sind noch nicht einmal notwendig und erst recht nicht auf jeder einzelnen Seite eures Blogs.

Wir ihr solche, von Plugins automatisch hinzugefügten, Styles und Scripte schnell und einfach entfernen könnt, ohne dass euer WordPress Blog fehlerhaft wird, möchte ich euch heute zeigen.
Ein bisschen WordPress-Wissen wird dafür natürlich vorausgesetzt.

Fehlerhafte Integration von Scripten und Styles

Ein großer Punkt ist, dass selbst Plugins, die ihre Funktion nur im Admin bereitstellen, ihre Scripte und CSS-Dateien auch im Frontend, also der eigentlichen Seite integrieren. Weil eben nicht darauf geachtet wird, wie und wo sie diese einfügen.

Weil viele WordPress-Entwickler außerdem keine Profis sind, kommt es auch immer wieder zu Fehlern. Schließlich könnte jeder ein Plugin entwickeln, selbst wenn er nur ein Tutorial als Grundlage dafür verwendet hat. WordPress ist offen, auch untalentierte oder Anfänger dürfen also ihre Werke veröffentlichen.

Auch kann es vorkommen, dass Scripte und CSS-Dateien zwar richtig integriert sind, aber eben einfach überall. Ein Kontaktformular brauche ich aber nur auf der Unterseite »Kontakt«, nicht auf allen Seiten, nicht auf der Startseite und auch nicht in den Beiträgen. Wozu also das Script dahinter überall einfügen?

Für genau solche Gründe macht es Sinn zu wissen, wie Scripte und Styles gefunden und deaktiviert werden können. Zum Glück macht WordPress vieles sehr einfach.

IDs herausfinden

Um die ID einer CSS-Datei zu finden, reicht es meist in den Quellcode eures WordPress Blogs zu schauen. Haltet im Head einfach Ausschau nach den entsprechenden Dateien. Das sieht dann zum Beispiel so aus:

<link rel='stylesheet' id='supergeiler-style-css' href='https://beispiel.de/wp-content/plugins/supergeil/style.css' type='text/css'>

 

Die ID ist in diesem Fall, deutlich ersichtlich, der Teil im Code, der mit ID beginnt. Nun müsst ihr aber wissen, dass WordPress an diese IDs noch das »-css« anhängt. Die tatsächliche ID ist demnach nicht »supergeiler-style-css«, sondern lediglich»supergeiler-style«. Ihr müsst das »-css« also selbst erkennen und entfernen.

Einfacher geht es mit einem Snippet. Das fügt automatisch eine Liste aller IDs hinzu und wichtiger noch, es funktioniert auch für Scripte, die im Quellcode eigentlich keine zugewiesene ID ausgeben. Letztere sind also nur mit dem Snippet sichtbar.

function inspect_script_style() {
	global $wp_scripts, $wp_styles;
	echo "\n" .'<!--'. "\n\n";
	echo 'SCRIPT IDs:'. "\n";
	foreach($wp_scripts->queue as $handle) echo $handle . "\n";
	echo "\n" .'STYLE IDs:'. "\n";
	foreach($wp_styles->queue as $handle) echo $handle . "\n";
	echo "\n" .'-->'. "\n\n";
}
add_action('wp_print_scripts', 'inspect_script_style');

 

Das Snippet wird einfach in die functions.php eures Themes eingefügt und zeigt fortan im Head eurer Seite (also im Quellcode) die korrekten IDs aller CSS-Dateien und Scripte an. Denkt daran, das Snippet wieder zu entfernen, sobald ihr euch die überflüssigen IDs gemerkt habt. Es wird nur für die Recherche benötigt.

Scripte und Styles sauber entfernen

Okay, wir haben nun, mit etwas Aufwand, die verschiedenen IDs aller Scripte und Styles der WordPress-Installation herausgefunden. Wir wissen also genau, was alles eingefügt wird und welche ID es besitzt. Mit dieser können wir nun dafür sorgen, dass genau das nicht mehr passiert, wenn wir es uns wünschen.

Nehmen wir das Beispiel von oben und entfernen die CSS-Datei mit dem Namen»supergeiler-style«. Dafür brauchen wir die ID, die wir bereits kennen und ein kleines Snippet in der functions.php. Das geht einfach und ist mit minimalem Aufwand verbunden.

function disable_styles() {
	wp_dequeue_style('supergeiler-style');
}
add_action('wp_enqueue_scripts', 'disable_styles', 100);

 

Um das Einfügen eines Scripts zu verhindern, wird ein anderer Befehl verwendet. Dafür braucht es den wp_dequeue_script() Parameter, der dann das folgende Snippet ergibt. Auch das gehört wieder in die functions.php.

function disable_scripts() {
	 wp_dequeue_script()('supergeiles-script');
}
add_action('wp_enqueue_scripts', 'disable_scripts', 100);

 

So können die Einbindungen entfernt werden, die dort nichts zu suchen haben. Das Snippet kann natürlich noch weiter angepasst werden, je nachdem was ihr genau benötigt. Anfänger übergeben solche Sachen aber lieber einen Profi und dieser weiß dann, wie es geht. Daher verzichte ich hier darauf, nun noch weitere Abwandlungen und Möglichkeiten zu präsentieren.

Warum das Deaktivieren von CSS und Javascript in WordPress so wichtig ist

Nun fragt sich manch einer vielleicht, warum er ein Script oder ein Style deaktivieren sollte, wo es doch extra vom Plugin eingefügt wird. Dafür gibt es ganz unterschiedliche Gründe.

Einer wäre, dass der Style nicht mehr notwendig ist, weil ihr euren eigenen erstellt habt und ihn sauber in die vorhandene CSS-Datei integriert habt. Oder ihr verändert ein Script, benötigt das Original also nicht mehr, weil ihr eine angepasst Version verwendet.

Auch aus Performancegründen kann es sinnvoll sein, diese automatische Integrationen zu unterbinden, zumal einige Plugins auch Dateien hinzufügen, die nicht immer oder nur manchmal benötigt werden.

Wer sich besser auskennt, kann die Integration auch einfach umschreiben. Dann wird das Script oder der Style nur dort integriert, wo es Sinn ergibt und erwünscht ist. Beispielsweise nur auf der Kontakt-Seite oder nur innerhalb von Beiträgen. Denkbar ist hier vieles. In erster Linie geht es darum, Ladezeiten und Ballast zu reduzieren, weil die Dateien nicht gebraucht werden.

Es gibt am Ende also viele gute Gründe, warum vorhandene Scripte und CSS-Dateien nicht so eingebunden werden sollten, wie es der Entwickler oft vorsieht. Manchmal ist es auch einfach so, dass Plugins nicht richtig arbeiten und die Einbindung leider fehlerhaft Erfolg. Auch dann ist ein händisches eingreifen gefragt. Ebenso dann, wenn mehrere Plugins dieselben Dateien nutzen und integrieren.

Am Ende sei gesagt, dass sich der Artikel an versierte Nutzer richtet. Alle anderen beauftragen also lieber jemanden, der sich um die Verwaltung und Umsetzung in ihrem WordPress Blog kümmert. Auch deshalb, weil für die effektive Nutzung meist weitere Anpassungen notwendig sind.