jQuery in WordPress richtig einbinden und verwenden

Die Art und Weise wie man in WordPress Skripte richtig einbindet, verhindert zuverlässig Fehler wie jQuery is not definied.

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )

• $handle ist der Name des Skripts (für ein und dasselbe Skript sollte auch immer derselbe Name verwendet werden, das beugt nicht nur mehrfachem Einbinden vor, sondern lässt anderen Entwicklern den Zugriff für Optimierung oder das Entfernen, Ersetzen…
• $src die Quelle des Skripts, Link zum Skript
• $deps „Dependencies“ / Abhängigkeiten, hier wird festgelegt, welche Skripte bereits geladen sein müssen, bevor das eigene Skript an der Reihe ist (meistens jQuery)
• $ver Version des Skripts, oder leere Anführungszeichen
• $in_footer true legt fest, dass das Skript erst am Ende der Seite geladen wird, Standard ist false

Für ein eigenes Skript das jQuery benötigt, wird als Abhängigkeit ($deps) also array('jquery') angegeben.

Beispiel: Verwendung in functions.php Childtheme

wp_enqueue_script('main-script', get_stylesheet_directory_uri() .'/js/my-custom-script.js', array('jquery'), null, true);

Ist ein Skript hingegen auch noch von einem anderen jQuery-Skript abhängig, das bereits jQuery in den $deps angegeben hat, genügt der $handle des anderen Skripts. Das geht so auch über mehrere Skripte.

wp_enqueue_script('main-script', get_stylesheet_directory_uri() .'/js/my-custom-script.js', array('jquery'), null, true);
wp_enqueue_script('second-script', get_stylesheet_directory_uri() .'/js/second-custom-script.js', array('main-script'), null, true);
wp_enqueue_script('third-script', get_stylesheet_directory_uri() .'/js/third-custom-script.js', array('second-script'), null, true);
wp_enqueue_script('forth-script', get_stylesheet_directory_uri() .'/js/forth-custom-script.js', array('third-script'), null, true);

Priorität was die Position betrifft, hat das zuletzt aufgerufene Skript. Steht der Parameter $in_footer nicht auf true, werden die Abhängigkeiten, auch wenn für sie vorgesehen ist, dass sie erst im Footer geladen werden, vorgezogen, und befinden sich dann alle im Head der Site.

Oder mit dem als sicherer vorgeschlagenen Weg, um das Skript forth-script später an anderer Stelle mit wp_enqueue_script zu verwenden:

wp_register_script('main-script', get_stylesheet_directory_uri() .'/js/my-custom-script.js', array('jquery'), null, true);
wp_register_script('second-script', get_stylesheet_directory_uri() .'/js/second-custom-script.js', array('main-script'), null, true);
wp_register_script('third-script', get_stylesheet_directory_uri() .'/js/third-custom-script.js', array('second-script'), null, true);
wp_register_script('forth-script', get_stylesheet_directory_uri() .'/js/forth-custom-script.js', array('third-script'), null, true);
wp_enqueue_script('forth-script');

Die Action

function mychildtheme_scripts() {
wp_register_script('main-script', get_stylesheet_directory_uri() .'/js/my-custom-script.js', array('jquery'), null, true);
wp_register_script('second-script', get_stylesheet_directory_uri() .'/js/second-custom-script.js', array('main-script'), null, true);
wp_register_script('third-script', get_stylesheet_directory_uri() .'/js/third-custom-script.js', array('second-script'), null, true);
wp_register_script('forth-script', get_stylesheet_directory_uri() .'/js/forth-custom-script.js', array('third-script'), null, true);
}
add_action( 'wp_enqueue_scripts, 'mychildtheme_scripts' );

Ein über wp_enqueue_scripts() registriertes Skript kann potentiell auch jenseits des Hooks an der erforderlichen Position aufgerufen werden.

wp_enqueue_script('forth-script');

Was man über die jQuery-Library in WordPress wissen muss ist, dass sie nicht ganz auf dieselbe Weise anzuwenden ist, wie man es von jQuery kennt. Wer schon mal mit $(...) ist not a function konfrontiert war, hat das bereits erfahren.

Um in WordPress-Skripten $ zu verwenden, muss man sie entweder so

(function($) {
	// $ funktioniert, Prüfung:
	// console.log($);
})(jQuery);

oder so

jQuery(document).ready(function($) {
	// $ funktioniert, Prüfung:
	// console.log($);
});

einschließen. Wenn das nicht geht, und es zu einem “Uncaught TypeError: $ is not a function”-Fehler kommt, gibt es noch den Workaround (functions.php):

add_action('wp_enqueue_scripts', function(){
	wp_add_inline_script('jquery', 'var $ = jQuery.noConflict();');
});

Das Einbinden eines Skripts zeigt keine Wirkung? Schnellste Maßnahme um zu prüfen ob es geladen wird ist ein Alert in der ersten Zeile, z.B. alert('loaded');. Die Meldung kommt beim erneuten Laden der Seite nicht?

Häufigste Ursachen

• Javascript-Fehler (in der Konsole des Browsers sichtbar)
• der Link zum Skript ist nicht korrekt
• der Link zu einer der Abhängigkeiten ist falsch