So bindest du deine eigenen Scripte in WordPress ein

Heute fragte jemand im WPDE Forum wie man eigene JS-Scripte einbindet und jQuery verwendet. Er hat damit angefangen jQuery in den <head> einzubinden und im Anschluss versucht, eigene Scripte im Footer zu laden. Das hat nicht ganz so geklappt und damit in Zukunft alles richtig gemacht wird, gibt es hier eine kurze Anleitung zum Einbinden von JavaScript und jQuery.

Erst einmal ist es wichtig, dass wir zum Einbinden von Scripten in die functions.php des Themes müssen – alternativ können wir auch ein Plugin dafür erstellen, damit die Scripte auch wirksam sind, wenn wir das Theme mal nicht im Einsatz haben. Erst erkläre ich kurz und knackig wie das mit der functions.php im Theme funktioniert und danach gibt es das Beispiel auch noch als Plugin.

In unserem Beispiel, wollen wir die JavaScript Datei in unserem Theme einbinden. Diese befindet sich in unserem Theme und dort in einem Unterordner den wir js genannt haben. Also /wp-content/themes/theme-name/js/script.js und diese Script wollen wir nun einbinden. Dafür öffnen wir die functions.php und fügen folgende Zeile ganz unten ein:

Scripte via Theme einbinden

functions.php

Anhand der Kommentare kannst du erkennen, wie das Script eingebunden wird. Außerdem sieht man an welcher Stelle man WordPress erklärt, dass jQuery geladen werden soll bzw. unser Script damit arbeiten möchte. In WordPress muss man kein jQuery einbinden – es ist längst da. Es muss nur abgerufen werden.

Eigentlich ist unser Script jetzt eingebunden und auch Javascript sollte darin funktionieren. Damit wir aber auch jQuery verwenden können, müssen wir unserem Script noch sagen, dass wir damit arbeiten wollen. Damit das Ganze klappt, musst du folgendes erledigen:

Hier habe ich zwei Ausführungen eingetragen. Einmal die längere und einmal die kurze Version. Beide Möglichkeiten funktionieren.

Scripte via Plugin einbinden

Im nächsten Beispiel, wollen wir mit Hilfe eines Plugins unsere Scripte einbinden, damit wir diese auch in einem anderem Theme verwenden können. Dafür musst du erst einmal ein Plugin erstellen. Wie das funktioniert, erkläre ich hier. Hast du das erledigt, gehst du in deinen Plugin Ordner und in deine Plugin-Datei. Dort haben wir in PHP-Kommentaren den Namen usw. definiert. Hier packst du nun ein abgewandeltes Script von oben, ein:

Hier haben wir unsere Datei in den Ordner /wp-content/plugnis/plugin-name/js/script.js gepackt. Ist das erledigt, sollte auch das funktionieren.

Nützliche Links

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.