Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 11 Kommentare

  1. hans
    schrieb am 02.12.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.

    Antworten
  2. Rene
    schrieb am 10.06.2013 um 02: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?

    Antworten
  3. MasterJedi
    schrieb am 03.06.2013 um 14:10 Uhr:

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

    Habe es wie in der Anleitung steht gemacht.

    Antworten
  4. Wordpresseballspieler
    schrieb am 08.05.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

    Antworten
  5. Felix
    schrieb am 12.10.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?

    Antworten
    • Jonas Hellwig
      schrieb am 12.10.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.

      Antworten
  6. Felix
    schrieb am 12.10.2012 um 13:34 Uhr:

    Vielen Dank für den sehr hilfreichen Artikel!

    Antworten
  7. Freetagger
    schrieb am 11.10.2012 um 10:26 Uhr:

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

    Antworten
    • Jonas Hellwig
      schrieb am 11.10.2012 um 11:36 Uhr:

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

      Antworten
      • Kainer
        schrieb am 17.07.2014 um 14:45 Uhr:

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

      • Jonas Hellwig
        schrieb am 19.07.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

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →