kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

WordPress: interne jQuery-Version über Google CDN im Footer laden

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

11 Kommentare

  1. Freetagger

    Verfasst am 11. Oktober 2012 um 10:26 Uhr.

    Hi kurze Frage, du meinst sicherlich die functions.php im Theme oder?

    • Jonas Hellwig

      Verfasst am 11. Oktober 2012 um 11:36 Uhr.

      Wo genau meinst du? Es müssen zwei Files bearbeitet werden. header.php und functions.php

      • Kainer

        Verfasst am 17. Juli 2014 um 14:45 Uhr.

        Dein Kommentar sagt 2 Files, dein Artikel spricht nur von der functions.php …?

      • Jonas Hellwig

        Verfasst am 19. Juli 2014 um 20:14 Uhr.

        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

  2. Felix

    Verfasst am 12. Oktober 2012 um 13:34 Uhr.

    Vielen Dank für den sehr hilfreichen Artikel!

  3. Felix

    Verfasst am 12. Oktober 2012 um 14:24 Uhr.

    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?

    • Jonas Hellwig

      Verfasst am 12. Oktober 2012 um 16:27 Uhr.

      Die manuell eingebundene Version muss dann entfernt werden. Es reicht die Anpassung wie in diesem Beitrag beschrieben aus. Dann wird jQuery einmal geladen.

  4. Wordpresseballspieler

    Verfasst am 8. Mai 2013 um 19:46 Uhr.

    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

  5. MasterJedi

    Verfasst am 3. Juni 2013 um 14:10 Uhr.

    Leider werden meine Scripte nicht im Header geladen sondern am Ende.

    Habe es wie in der Anleitung steht gemacht.

  6. Rene

    Verfasst am 10. Juni 2013 um 2:34 Uhr.

    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?

  7. hans

    Verfasst am 2. Dezember 2013 um 15:12 Uhr.

    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.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.