Es gibt für WordPress unzählige Plugins
Jedes dieser Plugins benötigt meistens eigene CSS- und Javascript/jQuery-Dateien.
Üblicherweise werden diese dann über Funktionen im Plugin PHP Code mittels wp_enqueue_style() und wp_enqueue_script() aufgerufen und dann per add_action bzw. wp_register an entsprechender Stelle in den HTML-Code im <head>-Bereich eingebunden.
Ladezeiten
Im Interesse einer schnelleren Ladezeit einer Seite wäre es aber besser, diese Scripte am Ende der Website zu laden, denn die meisten Scripte werden gar nicht zu Anfang gebraucht.
Nun kann man mit einer Funktion, welche man in seiner functions.php integriert, dafür sorgen, dass alle Javascripte und jQuery Dateien im Footer geladen werden:
Scripte im Footer laden:
1 2 3 4 5 6 7 8 | <?php function evolution_clean_head() { remove_action('wp_head', 'wp_print_scripts'); remove_action('wp_head', 'wp_print_head_scripts', 9); remove_action('wp_head', 'wp_enqueue_scripts', 1); } add_action( 'wp_enqueue_scripts', 'evolution_clean_head' ); ?> |
Inzwischen ist das Ganze auch als Plugin zu finden:
Scripte im Footer laden – WordPress Plugin*
*Für dieses Plugin gab es wohl schon länger kein Update mehr! Also Vorsicht wenn das eingesetzt werden soll.
Manchmal aber funktionieren nicht alle Plugins und Funktionen wie erwartet und diese Möglichkeit, pauschal alle Scripte im Footer zu laden, fällt aus.
Das Feintuning
Hier kann man aber manuell ansetzen. Man sucht in den Dateien des Plugins die entsprechende Zeile, wo mit wp_enqueue_style() oder wp_enqueue_script() die entsprechende CSS-Datei oder das entsprechende Script geladen wird und kommentiert diese Zeile einfach mit # aus:
1 2 3 4 | <?php #wp_enqueue_style('crayon', plugins_url(CRAYON_STYLE_MIN, __FILE__), array(), $CRAYON_VERSION); #wp_enqueue_script('crayon_js_min', plugins_url(CRAYON_JS_MIN, __FILE__), array('jquery'), $CRAYON_VERSION); ?> |
Dann nimmt man die entsprechenden Zeilen aus dem HTML-Quelltext wo diese Dateien im <head> geladen werden und kopiert diese Zeile in seine footer.php, und zwar möglichst in der Nähe des schließenden <body>-Tags:
1 2 3 4 5 6 7 8 | <html> <body> <link rel='stylesheet' property='stylesheet' id='crayon-css' href='https://www.all4hardware4u.de/wp-content/plugins /crayon-syntax-highlighter/css/min/crayon.min.css?ver=2.5.0' type='text/css' media='all' /> <script type='text/javascript' src='https://www.all4hardware4u.de/wp-content/plugins/crayon-syntax-highlighter /js/min/crayon.min.js?ver=2.5.0'></script> </body> </html> |
Das kann man sogar für einzelne Seite steuern, sofern ein Plugin nicht auf jeder Seite zum Einsatz kommt und daher nicht auf jeder Seite geladen werden muss.
Hierzu steuert man die Ausgabe über die IDs der entsprechenden Seiten:
1 2 3 4 5 6 7 8 9 10 | ... <?php if($id==9 || $id ==914 || $id==924) { echo "<link rel='stylesheet' property='stylesheet' id='crayon-css' href='https://www.all4hardware4u.de/wp-content /plugins/crayon-syntax-highlighter/css/min/crayon.min.css?ver=2.5.0' type='text/css' media='all' />"; echo "<script type='text/javascript' src='https://www.all4hardware4u.de/wp-content/plugins/crayon-syntax-highlighter /js/min/crayon.min.js?ver=2.5.0'></script>"; } ?> </body> |
Soweit so gut. Es gibt aber Plugins, so wie den Crayon Syntax Highlighter, wo es nicht möglich ist die jQuery-Datei im Footer laden zu lassen. Das Plugin greift dann einfach nicht, auch nicht, wenn ich es manuell in der header.php eingebunden hatte. Dieses habe ich an mehreren Stellen in der header.php probiert. Also muss es doch über die Funktion des Plugins geladen werden.
Nun brauche ich aber das Plugin nicht auf jede meiner Seiten.
Ich habe dann überlegt, wie ich es steuern kann, dass das Script nur auf den dafür vorgesehenen Seiten geladen wird. Eine Abfrage per ID der Seite und dann das manuelle Einbinden im <head>- oder <body>-Bereich der Seite klappt ja nicht.
Die Lösung ist recht simpel. Ich habe meine entsprechende Template-Datei unter anderem Namen abgespeichert -> coding.php
Oben habe ich noch einen anderen Template Namen vergeben, damit ich im Backend dieses auch richtig auswählen kann:
1 2 3 4 5 6 7 | <?php /* Template Name: Full Width Page - Coding */ get_header(); ?> ... |
Nun habe ich allen Seiten, welche dieses Plugin nutzen, das entsprechende Template zugewiesen.
Die Plugindatei um die entsprechende Abfrage erweitern
Die Abfrage in der PHP-Datei des Plugins sieht so aus:
1 2 3 4 5 | <?php if ( !is_page_template( 'coding.php' ) ) return; wp_enqueue_script('crayon_js_min', plugins_url(CRAYON_JS_MIN, __FILE__), array('jquery'), $CRAYON_VERSION); ?> |
Durch diese Abfrage wird erreicht, dass die jQuery-Datei nur eingebunden wird wenn die coding.php als Template-Datei zugrunde liegt.
Inzwischen kann ich das Plugin Plugin Organizer sehr empfehlen. Hier kann man für jede Seite und jeden Beitrag auswählen, welches Plugin geladen werden soll.
Zur Optimierung der Seitengeschwindigkeit empfehle ich das Plugin Autoptimize. Es ist von den Einstellungen her recht simpel. Es fasst jeweils alle CSS- und JS-Dateien in eine zusammen und lädt alles im Footer. Die möglichen Optionen sind gut erklärt.
Ein weiteres Caching-Plugin wie Super Cache oder W3 Total Cache oder auch das sehr gute und schlanke Cachify setze ich nicht mehr ein. Autoptimize reicht bei mir völlig aus.