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
/**
* Bindet das Script ein.
*
* @return void
*/
function pixelbuben_scripts() {
/* Pfad zur Datei */
$file = get_stylesheet_directory_uri() . '/js/script.js';
/**
* Bindet ein Script im Footer (true am Ende bestimmt ob Footer, nicht) ein.
*/
wp_enqueue_script( 'eindeutige-id', $file, array( 'jquery' ), 'version', true );
}
/**
* Bindet das Script ein. Das PHP_INT_MAX bestimmt die Reihenfolge. Hier wird das
* Script möglichst zuletzt ausgegeben.
*/
add_action( 'wp_enqueue_scripts', 'pixelbuben_scripts', PHP_INT_MAX );Code-Sprache: PHP (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:
(function($) {
// Hier kommt dein Code hin
})(jQuery)Code-Sprache: JavaScript (javascript)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:
/**
* Bindet das Script ein.
*
* @return void
*/
function pixelbuben_scripts() {
/* Pfad zur Datei */
$file = plugins_url( '/js/script.js' , __FILE__ );
/**
* Bindet ein Script im Footer (true am Ende bestimmt ob Footer, nicht) ein.
*/
wp_enqueue_script( 'eindeutige-id', $file, array( 'jquery' ), 'version', true );
}
/**
* Bindet das Script ein. Das PHP_INT_MAX bestimmt die Reihenfolge. Hier wird das
* Script möglichst zuletzt ausgegeben.
*/
add_action( 'wp_enqueue_scripts', 'pixelbuben_scripts', PHP_INT_MAX );Code-Sprache: PHP (php)Hier haben wir unsere Datei in den Ordner /wp-content/plugnis/plugin-name/js/script.js gepackt. Ist das erledigt, sollte auch das funktionieren.
Mit PHP_INT_MAX lässt sich eine hohe Zahl ausgeben. Das ist nützlich, wenn das Script ganz zum Schluss geladen werden soll.
Nützliche Links
Foto von Stanley Dai auf Unsplash