WordPress: interne jQuery-Version über Google CDN im Footer laden
In diesem Beitrag erfahrt ihr, wie ihr jQuery über Googles CDN im Footer einer WordPress-Seite laden könnt.
Wer jQuery in WordPress verwenden will, integriert das Script häufig manuell im Header oder Footer der Seite. Das Script wird dazu heruntergeladen, in den Website-Ordner kopiert und von dort aus verknüpft. Alternativ wird es über ein Content Delivery Network (CDN) von Google & Co. geladen.
WordPress verfügt jedoch auch über eine eigene Version von jQuery, die genutzt werden kann. Diese Version wird auch von Plugins verwendet. Wenn ihr jQuery also manuell hinzufügt, kann es passieren, dass jQuery mehrfach geladen wird. Das dauert länger und kann zu erheblichen Konflikten mit Plugins führen.
Warum sollte man Scripte über ein externes CDN laden?
jQuery (und andere Scripte) über ein CDN zu laden hat mehrere Vorteile. Zum einen wird das Script über die Highspeed-Server von Google oder Microsoft ausgeliefert; diese Systeme sind ganz einfach schneller sind als der eigene Webspace. Darüber hinaus binden sehr viele Websites ihre Scripte über Google & Co ein. Die Wahrscheinlichkeit, dass sich jQuery bereits im Cache des Seitenbesuchers befindet ist daher groß. Der Einsatz eines CDN beschleunigt also für gewöhnlich eine Website.
Problemfall WordPress
Wer WordPress benutzt muss eine Entscheidung treffen. Entweder wird die interne Version von WordPress verwendet, die über den eigenen Server ausgeliefert wird und evtl. sogar veraltet ist. Oder es wird ein CDN verwendet, was zwar schneller ist, aber auch dazu führen kann, dass jQuery doppelt geladen wird und Kompatibilitätsprobleme verursacht.
Im Idealfall greift WordPress selbst auf ein CDN zurück. Dann wird immer die schnelle Version ausgeliefert und es kann auch keine Konflikte mit verschiedenen Versionen geben.
Mit folgenden Anpassungen ersetzt ihr die in WordPress integrierte Version von jQuery durch die von Google gehostete Version. Gleichzeitig bindet WordPress das Script im Footer der Website ein. Beachtet bitte, dass dann auch Plugins, die auf die interne jQuery-Version zugreifen, die „neue“ Version laden.
jQuery über Googles CDN im Footer laden – functions.php anpassen
Öffnet die functions.php
und fügt folgenden Code ein. Das Beispiel verwendet das CDN von Google – es können aber auch andere Quellen verwendet werden. Achtet auch darauf die korrekte jQuery-Version zu laden.
/* jQuery von WordPress deaktivieren und über Google im Footer laden */
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"), false, '1.10.2', true);
wp_enqueue_script('jquery');
}
Das war auch schon alles. Ab sofort nutzt euer Theme die externe jQuery Version. Wenn ihr das Thema weiter beleuchten könnt, freue ich mich über einen Kommentar.
Links zum Thema
- WordPress-Codex zu diesem Thema
- Use Google Libraries – WordPress-Plugin
- 3 reasons why you should let Google host jQuery for you – Encosia
- jQuery im Footer laden – WP Recipes
- Why Loading Your Own jQuery is Irresponsible
mann mann mann … hatte jquery immer einfach über den header aufgerufen und wollte das jetzt mal auf die koschere art machen, es steht auch überall was in die functions.php muss aber hier lese ich den entscheidenden tipp über „wp_enqueue_script“ im header ;)
und dann viel mir auf das die scripte NACH diesme aufruf eingebaut werden müssen, also am besten (sowieso) im footer.
Danke für die hilfreiche Anleitung. Ich baue gerade meine erste Homepage und versuche ein Stapel mit jQuery einzubinden, hoffe es wird mir gelingen. Die ersten Schritte habe ich jetzt befolgt und zumindest einmal die Codes in die functions.php/header.php geschrieben. Habe nur nicht so wirklich eine Ahnung an welcher Stelle ich den Code von dem Plugin „jQuery Stapel“schreiben muss.
Kannst du mir da weiterhelfen?
Leider werden meine Scripte nicht im Header geladen sondern am Ende.
Habe es wie in der Anleitung steht gemacht.
Schöne Anleitung, hab ich gleich ausgetestet und nach der Anleitung jquery „eingebaut“ – hab jedoch ein Problem, weil ich noch mehr jSkripte auf der Seite benötige – z.B. für Booklet-Anzeige. Deswegen die Frage: hat mir jemand einen Tipp, wo und wie bau ich diese ein?
„Was bisher geschah“: Hatte die Scripte mal im Beitrag und danach auch im Header eingebaut, die Umblätterfunktion ging aber leider beidesmal nicht…. vermute, die Scripte (jquery.easing.1.3.js und jquery.booklet.1.2.0.min.js), die ich im header über … eingebaut habe, werden nicht geladen?
()
Zusatzfrage: An welcher Stelle ist es denn sinnvoll, ein Script über eine Abfrage (soll z.B. geladen werden, wenn die Seite „Triumph der Liebe…“ heißt) einzubauen?
Vielen Dank schon mal
Sam
Ich hätte noch eine Frage um das Ganze besser zu verstehen:
ich habe eine WordPress-Seite und bei dieser wird jquery zweimal geladen.
Nun nehme ich die im Artikel beschriebenen Ergänzungen vor und dann wird jquery nur noch einmal geladen? Habe ich das richtig verstanden?
Oder müsste ich manuell noch die anderen jquery-Aufrufe entfernen?
Die manuell eingebundene Version muss dann entfernt werden. Es reicht die Anpassung wie in diesem Beitrag beschrieben aus. Dann wird jQuery einmal geladen.
Vielen Dank für den sehr hilfreichen Artikel!
Hi kurze Frage, du meinst sicherlich die functions.php im Theme oder?
Wo genau meinst du? Es müssen zwei Files bearbeitet werden.
header.php
undfunctions.php
Dein Kommentar sagt 2 Files, dein Artikel spricht nur von der functions.php …?
Dieser Artikel ist überarbeitet worden. Lies bitte zusätzlich auch folgenden Beitrag, dann sollte hoffentlich alles funktionieren und verständlich sein: jQuery über WordPress laden