Javascript seitenspezifisch in WordPress einbinden

Es kommt immer mal wieder vor, dass man etwas Javascript auf einer bestimmten Seite einsetzen möchte. Ich zeige dir, wie du Javascript sauber in WordPress einbindest und das Laden der Datei auf eine (oder mehrere) Unterseiten beschränkst.

Der Vorteil liegt auf der Hand: Das Script wird nur geladen, wenn es wirklich gebraucht wird. Damit sparst du dir auf allen anderen Seiten überflüssige Datenübertragungen.

Bitte komme nicht in die Versuchung, deine Scripts einfach in die header.php zu schreiben. Der direkte Aufruf kann Konflikte produzieren, Scripte doppelt laden oder Performance-Einbußen bedeuten.

WordPress bietet von Haus aus eine Möglichkeit, Scripts sauber zu laden. Dazu werden die Funktionen wp_register_script und wp_enqueue_script genutzt.

wp_register_script: Registriert das Script mit diversen Parametern. Hier gibst du den Namen und den Pfad des Scripts an. Weitere Parameter erlauben dir zum Beispiel anzugeben, an welcher Stelle im Quelltext das Script geladen werden soll (im <head> Bereich oder vor dem </body> Tag).

wp_enqueue_script: Lädt dein vorher registriertes Script für die Ausgabe in der WordPress Seite.

Script richtig einbinden

Diese beiden Funktionen werden wir jetzt nutzen und mit einer Bedingung versehen – einer bestimmten Seiten ID. Folgenden Codeschnipsel musst du dazu in deine functions.php eintragen:

//Loading javascript for specific pages
function load_scripts() {
    global $post;
    wp_register_script( 'scriptname', get_stylesheet_directory_uri() . '/js/scriptname.js', array(), false, true);

    if( is_page() || is_single() )
    {
        switch($post->ID) 
        {
            case '1':
                wp_enqueue_script('scriptname');
                break;

            case '34':
                wp_enqueue_script('scriptname');
                break;
        }
    } 
}

Der Pfad zum Script zielt aktuell auf deinen Theme-Ordner ab. Du kannst dort natürlich auch einen absoluten Pfad unterbringen.

Per switch-Statement fragen wir ab, ob die aktuell aufgerufene Seite die gewünschte ID hat. Ist das der Fall, wird wp_enqueue_script ausgeführt und unser gewünschtes Script geladen.

In der Funktion load_scripts() kannst du beliebige weitere Scripts registrieren und auf gewünschten Seiten laden.

Schreibe einen Kommentar