smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

WordPress: JavaScript-Dateien richtig einbinden

21. Oktober 2013
Stephan
WordPress: JavaScript-Dateien richtig einbinden

Vor einigen Wochen hatte Sylvi bei der Umsetzung ihrer manuellen „Back to Top-Button“-Lösung ein Problem mit dem Einbinden einer JavaScript-Datei in ihren WordPress-Blog. Als Wordkaround hat sie die Datei einfach in ihrer footer.php ihres Themes eingebunden.

Der bessere und auch von WordPress empfohlene Weg ist aber die Einbindung von JavaScript-Dateien über die dafür vorgesehene Funktion wp_enqueue_script.

In diesem Artikel zeige ich euch nun, wie ihr diese Funktion einsetzen könnt.

JavaScript-Dateien einbinden

Die Funktion wp_enqueue_script dient zum Einbinden von JavaScript-Dateien und ist wie folgt aufgebaut:

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

Dabei haben die Parameter, bei denen nur der erste angegeben werden muss, folgende Bedeutung:

$handle
Der Name der einzubindenen JavaScript-Datei.

$src
Der Pfad der einzubindenen JavaScript-Datei.

Den Pfad solltet ihr nicht hartcodiert angeben. Besser ist es ihr verwendet plugins_url für Plugins bzw. get_template_directory_uri für Themes.

$deps
Die Abhängigkeiten der einzubindenen JavaScript-Datei. Hierbei handelt es sich um alle JavaScript-Dateien, die vor eurer einzubindenen JavaScript-Datei geladen werden sollen.

$ver
Die Version der einzubindenen JavaScript-Datei. Die Version wird als Query-String an den Pfad eurer JavaScript-Datei angehängt.

$in_footer
Standardmäßig werden die JavaScript-Dateien im <head>-Bereich eurer Webseite eingebunden. Hiermit könnt ihr angeben, dass die einzubindene JavaScript-Datei im Footer-Bereich (vor dem schließenden </body>) eingebunden wird.

Den Funktionsaufruf müsst ihr für den korrekten Gebrauch in einer Funktion kapseln und an eine sogenannte WordPress-Action binden:

function my_script()
{
    wp_enqueue_script( $handle );
}

add_action( 'wp_enqueue_scripts', 'my_script' );

In diesem Fall wird die JavaScript-Datei nur im Frontend eingebunden. Zum Einbinden in den Admin-Bereich (Backend) müsst ihr anstatt der wp_enqueue_script-Action die admin_enqueue_scripts-Action verwenden.

Den ganzen Code packt ihr entweder in die functions.php eures Themes oder in eure entsprechende Plugin-Datei.

Beispiel

Als Beispiel mal ein Auszug aus meinem „In Image Ads Manager“-Plugin:

// in-image-ads-manager
public function enqueue_admin_scripts( $page )
{
    if ( $page === $this->add_page || $page === $this->edit_page ) {
        wp_enqueue_script( 'wp-color-picker' );
        wp_enqueue_script(
            'iiam-admin',
            plugins_url( 'js/iiam-admin.js', __FILE__ ),
            array( 'jquery', 'jquery-ui-draggable', 'jquery-ui-slider', 'wp-color-picker' ),
            '1.1',
            true
        );
    }
}

Hier binde ich meine iiam-admin.js-Datei ein und gebe an, dass diese jQuery & Co. als Abhängigkeit hat, erst im Footer eingebunden werden soll und in der Version 1.1 vorliegt.

Weiterführende Informationen

Für weitere Beispiele empfehle ich euch direkt die WordPress Codex-Seite zum Thema wp_enqueue_script oder aber den Artikel „How to Include JavaScript and CSS in Your WordPress Themes and Plugins“ durchzulesen.

Fazit

Möchtet ihr in eurem Theme oder in einem eurer Plugins JavaScript-Dateien einbinden, solltet ihr die vorgestellte Funktion von WordPress verwenden.

Der Vorteil ist, dass ihr zum einen zusätzliche Abhängigkeiten angeben könnt. Benötigt ihr für eine eurer JavaScript-Dateien z.B. die JavaScript-Bibliothek jQuery, dann könnt ihr das als zusätzlichen Parameter beim Aufruf der wp_enqueue_script-Funktion angeben. WordPress kümmert sich dann automatisch darum, dass jQuery vor eurer JavaScript-Datei eingebunden und geladen wird.

Zum anderen besteht der Vorteil, dass WordPress sicherstellt, dass eine JavaScript-Datei nur einmal und nicht unnötigerweise mehrmals eingebunden wird.

Wie habt ihr bisher immer eure individuellen JavaScript-Dateien in WordPress eingebunden? Wusstest ihr, dass WordPress hierfür bereits eine Funktion bereitstellt?

Kommentare  
7 Kommentare vorhanden
1 Sylvi schrieb am 24. Oktober 2013 um 20:31 Uhr

Hallo Stephan,

find ich super, dass Du das Thema noch einmal aufgegriffen und dokumentiert hast.

Für mich sind solche Scripte oftmals böhmische Dörfer und ich freue mich immer, wenn Blogger ihr Wissen teilen und ergänzende Tipps in den Kommentaren abgeben. Davon profitieren schließlich auch meine Besucher.

Lieben Dank für’s Erwähnen. Leider ist ein Trackback bei mir nicht angekommen. Aber ich habe Deinen Feed ja abonniert. 🙂

Gruß Sylvi

2 Stephan L. schrieb am 27. Oktober 2013 um 14:59 Uhr

Hallo Sylvi,

ja dachte mir, dass genauso wie du auch andere vielleicht mal vor der Frage bzw. dem Problem stehen, wie sich JavaScript-Dateien denn nun wirklich korrekt in WordPress einbinden lassen. Insofern hoffe ich, dass der Artikel diesen Leuten weiterhilft. 🙂

Freut mich, dass du meinen Feed abonniert hast! 😉

Beste Grüße

Stephan

3 Andy schrieb am 29. Oktober 2013 um 11:29 Uhr

Vielen Dank für den Artikel – genau danach habe ich gesucht.

4 Janette D. schrieb am 12. November 2013 um 22:13 Uhr

Diesem Beitrag kann ich nur 5 von 5 Sternen geben! Hätte ich nicht besser schreiben können. Schön das es solche hochwertigen Artikel noch gibt.

5 Martin schrieb am 24. November 2013 um 17:04 Uhr

Vielen Dank für den Beitrag. Habe lange gesucht, aber nachdem ich ihn gefunden hatte, hat das Einbinden funktioniert. Vielen Dank!

6 Alexander schrieb am 24. Februar 2015 um 18:45 Uhr

Hallo, danke für diesen Artikel mit super Erklärungen Daumen Hoch.

MfG Alexander

7 Arno Heider schrieb am 19. Juni 2015 um 09:20 Uhr

Mit dem Plugin „Raw HTML Snippes“ kannst Du Javascript in Deine WordPress Seite (Deinen WordPress Beitrag) einbinden: http://www.arno-heider.de/?p=1434

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!