jQuery richtig einbinden mit wp_enqueue_script

Dieser Artikel ist ursprünglich am 24. 11. 2011 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist wahrscheinlich nicht mehr aktuell.

Wenn man in einem WordPress-Theme Javascript-Effekte nutzen will, muss man diese Scripts in die Theme-Dateien einbauen. Dazu gibt es verschiedene Methoden, einige davon können zu Problemen führen. Am Beispiel von jQuery zeige ich, wie man Javascripts sicher einbinden kann. 

In manchen Themes ist das jQuery-Script fest in die header.php eingebaut. Diese Anweisung steht meistens irgendwo oben zwischen den head-Tags; dort, wo auch die Stylesheets aufgerufen werden.

Konflikte sind vorprogrammiert

Diese Methode kann zu Problemen führen. Nämlich dann, wenn ein PlugIn dieselbe Bibliothek noch einmal lädt und die zuerst aufgerufenen Dateien wieder überschreibt. Die Folge ist, dass plötzlich Effekte in PlugIns oder Themes nicht mehr funktionieren. Ausserdem ist in WordPress die jQuery-Bibliothek schon eingebaut und muss nicht eigens eingebunden werden.
Baut man jeQuery noch einmal ein, ist das doppelt gemoppelt.

Die sichere Lösung

Um ein Script in ein WordPress-Theme einzubinden, sollte man es mit der Funktion wp_enqueue_script einbinden. Das Wort enqueue bedeutet etwa „in die Reihe stellen“. Damit nutzt man eine sehr praktische wordpress-eigene Funktion: WordPress reiht die Script aneinander und prüft, ob irgendetwas zweimal geladen wird. Mit dieser Zeile ruft man das die eingebaute jQuery-Bibliothek zentral über die functions.php auf:

wp_enqueue_script( 'jquery');

Scripts nur auf den Seiten laden, auf denen sie gebraucht werden

Ein weiterer, großer Vorteil von wp_enqueue_script ist, dass man damit steuern kann, auf welchen Seiten ein Script geladen wird. Oder besser gesagt: Auf welchen Seiten es nicht geladen werden soll.

Ein Javascript jederzeit und überall zu laden, drückt erstens auf die Ladezeit und zweitens kann es auch hier wieder zu Konflikten kommen. Klassischerweise dann, wenn ein Script auch im Adminbereich (Dashboard) geladen wird.

Um zu erreichen, dass ein Script im Dashboard nicht geladen wird, baut man eine if-Abfrage ein. Diese Abfrage prüft mit is_admin, ob gerade das Dashboard angesprochen wird oder nicht. Das sieht dann so aus:

function my_init_method() {
    if (!is_admin()) {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js');
        wp_enqueue_script( 'jquery' );
    }
}

add_action('init', 'my_init_method');

Man kann die Abfrage um alle möglichen Seiten erweitern. Aber es ist schon viel gewonnen, wenn der Admin-Bereich ausgenommen ist.


ZUM WEITERLESEN
Einen sehr ausführlichen Artikel zum Thema wp_enqueue_script  gibt es bei wp.tutsplus.com (englisch)

Hat Dir der Artikel weitergeholfen?

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

4 Kommentare zu “jQuery richtig einbinden mit wp_enqueue_script

  • francoise:::absolute Anfängerin 23. März 2012

    deine Beschreibung ist sehr gut, das einzige was ich nicht verstanden habe, ist WO (in welcher Datei) diese Funktion eingefügt werden soll?
    Ist es die header.php oder alleine in einer Javascript datei?
    Da ich fast keine Programmierungs-Kenntnisse habe (bin ganz am Anfang) bin ich ein bißchen ratlos.

    • francoise:::absolute Anfängerin 23. März 2012

      ich glaube, ich habe die Antwort selbst gefunden:
      habe die Function mit foldenden Tags in der Header.php datei eingebunden:

      ich hoffe ich liege richtig

      • Du hast recht, es ist die functions.php. Mitten im Text steht’s zwar mal drin, aber das übersieht man sehr leicht. Mein Fehler!

  • francoise:::absolute Anfängerin 27. März 2012

    also functions.php und nicht header.php. Danke!

Die Kommentare sind geschlossen.