jQuery in WordPress-Seiten

Frage: Wie binde ich ein jQuery-Plugin für ein Accordion korrekt in meine WordPress-Seite ein?

Wenn du in deiner Website jQuery-Funktionalität verwenden möchtest, ist erst zu klären, ob das über ein Plugin oder Theme erfolgen soll. Ein Plugin ist dann sinnvoll, wenn du mit einem Shortcode ein Akkordion zu beliebigen Beiträgen oder Seiten hinzufügen möchtest. Die Einbettung in ein (Child-)Theme ist hingegen sinnvoll, wenn eine Funktionalität als Teil der Gestaltung übergreifend für alle Seiten und Beiträge verwendet werden soll.

Hat man sich aus der Fülle an verfügbaren jQuery Accordion-Plugins für eines entschieden, stehen zur Einbindung verschiedene WordPress-Funktionen zur Verfügung:

wp_enqueue_script() ist eine Funktion, um JavaScript korrekt einzubinden. Durch die Verwendung dieser Funktion werden Konflikte vermieden, die sich z.B. ergeben könnten, wenn jedes jQuery-Plugin eine eigene Instanz von jQuery aufrufen möchte.

Um eine Javascript-Datei mit einem Accordion richtig einzubinden könnte die Funktion in etwa so aussehen:

add_action('wp_enqueue_scripts', 'my_accordion');
function my_accordion() {
  wp_enqueue_script(
    $handle    = "pix-accordion",
    $src       = get_template_directory_uri() . '/js/accordion.min.js',
    $deps      = array( 'jquery' ),
    $ver       = false,
    $in_footer = false );
}

Mehr Informationen zu wp_enqueue_script() findest du in der Code Reference.

Viele jQuery-Plugins verlangen zusätzlich die Angabe von Parametern, z.B. für welche CSS-Klassen das eingebundene jQuery-Plugin verwendet werden soll. Hierfür bietet WordPress die Funktion wp_localize_script();

Zusätzlich muss im (Child-)Theme natürlich auch noch das notwendige HTML und CSS eingegeben werden. Die Informationen lassen sich meistens aus der Dokumentation oder Muster-Dateien übernehmen.