jQuery in WordPress richtig einbinden und verwenden

abstract 1588720 1920

Bildquelle: Pixabay, MasterTux

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

mehr Beiträge über:

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

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

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht

publicly queryable