Einbinden von JavaScript in WordPress

---

Möglichkeiten und Wege für die Einbindung von JavaScripts

Für die Einbindung von JavaScripts in WordPress gibt es unterschiedliche Möglichkeiten. So können JavaScripts mit Hilfe einer Funktion, die in der functions.php vom jeweiligen Theme notiert wird, in den Head oder Footer geschrieben werden. Immer dann, wenn ein JavaScript nur in einem Beitrag benötigt wird, bieten sich jedoch weitere Möglichkeiten an. Nachfolgend möchten wir die unterschiedlichen Möglichkeiten und Wege für die Einbindung kurz vorstellen.

Einbinden von JavaScript in einem Beitrag

Wie eine JavaScript-Datei in einem “gewöhnlichen” HTML-Dokument eingebunden wird, sollte bekannt sein. Ein Beispiel für die Einbindung in einer Webseite:

<script type="text/javascript" src="http://www.example.com/datei.js"></script>

Auch in einem WP-Beitrag lassen sich JavaScript-Dateien nach diesem Muster einfach mit Script-Tags einfügen, nur die Wahrscheinlichkeit, dass diese bei einem Wechsel der Ansicht im Editor oder beim Abspeichern wieder entfernt werden, ist relativ hoch. Ein möglicher Grund könnte sein, dass der Beitragsersteller nicht als Administrator angemeldet ist, doch Autoren nicht das Recht besitzen, Scripts in Beiträge einzufügen.
Ein weiterer möglicher Grund könnte sein, dass in direkter Nachbarschaft die Ausgabe einer Funktion von WP oder vom Editor erwartet wird. Obwohl es seit Generationen von Browsern nicht mehr erforderlich ist, eine Funktion als HTML-Kommentar zu tarnen, scheint WP aber genau nach diesem HTML-Kommentar zu suchen. So verhielt es sich zumindest vor der WP-Version 3.9, bei einem Test mit der Version 3.9.1 ging es auch ohne einen wie im nächsten Beispiel Kommentar ab.

<script type="text/javascript" src="http://www.example.com/datei.js"></script>
<!-- Ein Kommentar -->

Soll hingegen eine Funktion notiert und ausgegeben werden, empfiehlt es sich bislang diese innerhalb des Script-Bereichs in einem CDATA-Abschnitt einzuschließen. Der Beginn und das Ende des CDATA-Abschnittes sollten dabei mit // auskommentiert werden

<script src="http://www.example.com/ein_script.js"></script><script>// <![CDATA[
eine_Funktion();
// ]]></script>

Sollte es dennoch zu kleineren Problemen bei der Einbindung kommen, stellen Sie sicher, dass Sie als Administrator eingeloggt sind und führen eine Testreihe durch.

Einbinden mit der WP-Funktion wp_enqueue_scripts

Die ersten Beispiele bezogen sich auf die Einbindung von JavaScripts in einzelne Beiträge. Soll hingegen ein JavaScript in allen Dateien zur Verfügung stehen, empfiehlt sich die Verwendung der WP-Funktion wp_enqueue_scripts, gegebenenfalls in Verbindung mit der WP-Funktion wp_register_script.

/**
 * Einfuegen von JavaScripts in Head oder Footer
 */
function fuege_javascripts_ein() {

    $url_h = get_template_directory_uri().'/verzeichnis/js-datei-fuer-header.js';
    $url_f = get_template_directory_uri().'/verzeichnis/js-datei-fuer-footer.js';

    wp_enqueue_script( 'handler_name_eins', $url_h, false, null, false );
    wp_enqueue_script( 'handler_name_zwei', $url_f, false, null, true );
}
add_action( 'wp_enqueue_scripts', 'fuege_javascripts_ein' );

Noch offene Fragen?