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 womöglich nicht mehr ganz 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)
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”
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.
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!
also functions.php und nicht header.php. Danke!
Die Kommentare sind geschlossen.
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.