So bindest du CSS und JavaScript Dateien in deine WordPress Seite ein.

WordPress erlaubt es dir, spielend leicht eigene CSS und JavaScript Dateien einzubinden und das ganze ohne ein zusätzliches Plugin.

Dafür musst du lediglich die functions.php in deinem Theme (bzw. Child-Theme) um ein paar Zeilen Code erweitern.

Einbinden von CSS Dateien #

Um deine CSS Dateien einzubinden, kannst du ganz einfach den Action-Hook “wp_enqueue_scripts” verwenden.

function addCustomStyles(){
    wp_enqueue_style('{CSS-handle}',get_stylesheet_directory_uri().'/{custom-css}.css');
}

add_action('wp_enqueue_scripts', 'addCustomStyles');

Einbinden von CSS Dateien mit bestimmten Seiten #

Du kannst aber auch Bedingungen definieren, zum Beispiel auf welcher Seite die CSS Datei eingebunden werden sollen.

function addCustomStyles(){
    global $post;

    if(null == $post){
        return;
    } 
    
    // Lade die CSS Datei nur für die Seite mit der ID 500.
    if($post->ID == 500){
         wp_enqueue_style('{CSS-handle}',get_stylesheet_directory_uri().'/{custom-css}.css');
    }
}

add_action('wp_enqueue_scripts', 'addCustomStyles');

Registrieren von CSS Dateien und einbinden auf mehreren Seiten #

Du kannst deine CSS Dateien natürlich auf mehreren Seiten einbinden.

function registerCustomStyles(){
    // Style registrieren
    wp_register_style('{CSS-handle-1}',get_stylesheet_directory_uri().'/{custom-css}.css');
    wp_register_style('{CSS-handle-2}',get_stylesheet_directory_uri().'/{custom-css-2}.css');
}

add_action('init', 'registerCustomStyles');

function addCustomStyles(){
    global $post;

    if(null == $post){
        return;
    } 
    
    // Lade die CSS Datei nur für die Seite mit der ID 500.
    if($post->ID == 500){
        wp_enqueue_style('{CSS-handle-1}');
    }
    // Lade die CSS Datei nur für die Seite mit der ID 600.
    if($post->ID == 600){
        wp_enqueue_style('{CSS-handle-2}');
    } 
    // Lade beide CSS Dateien für die Seite mit der ID 700
    if($post->ID == 700){
        wp_enqueue_style('{CSS-handle-1}');
        wp_enqueue_style('{CSS-handle-2}');
    }
}
add_action('wp_enqueue_scripts', 'addCustomStyles');

Einbinden von JavaScript Dateien #

Für das Einbinden von JavaScript Dateien kannst du den WordPress Hook ‘wp_enqueue_scripts’ verwenden.

function addCustomScripts(){
    wp_enqueue_script('JS-Handle',get_stylesheet_directory_uri().'/{custom-js}.js');
}

add_action('wp_enqueue_scripts', 'addCustomScripts');

Einbinden von JavaScript Dateien zusammen mit jQuery #

Du kannst in deinen JavaScript Dateien auch auf jQuery zugreifen. Hierzu musst du dein Skript nur minimal anpassen.

function addCustomScripts(){
    wp_enqueue_script('JS-Handle',get_stylesheet_directory_uri().'/{custom-js}.js', array('jquery'));
}

add_action('wp_enqueue_scripts', 'addCustomScripts');

Weitere Skripte, die du ebenfalls so leicht laden kannst, findest du direkt in der Code-Referenz von WordPress (hier klicken um zur WordPress Code Reference zu gelangen).

So lassen sich auch mehrere Skripte auf einmal einbinden.

function addCustomScripts(){
    wp_enqueue_script('JS-Handle',get_stylesheet_directory_uri().'/{custom-js}.js', array('jquery', 'jquery-form'));
}

add_action('wp_enqueue_scripts', 'addCustomScripts');

Einbinden von JavaScript Dateien im Footer #

Deine Skripte kannst du jederzeit auch in den Footer deiner Seite verschieben. Hier musst du natürlich darauf achten, das die Skripte auch erst nach dem vollständigen Laden der Seite zur Verfügung stehen.

function addCustomScripts(){
    wp_enqueue_script('JS-Handle',get_stylesheet_directory_uri().'/{custom-js}.js', array(), null, true);
}

add_action('wp_enqueue_scripts', 'addCustomScripts');

Einbinden von JavaScript Dateien auf festgelegten Seiten #

JavaScript Dateien müssen nicht immer auf allen Seiten geladen werden. Das lässt sich einfach unterbinden und spart Ressourcen.

function addCustomScripts(){
    global $post;

    if(null != $post){
       return;
    }

    // Laden des JavaScripts auf der Seite mit der ID 500
    if($post->ID == 500){
        wp_enqueue_script('JS-Handle',get_stylesheet_directory_uri().'/{custom-js}.js');
    }
}

add_action('wp_enqueue_scripts', 'addCustomScripts');

Bereitstellen von JavaScript Dateien zum Einbinden auf bestimmten Seiten #

Du kannst deine JavaScript Dateien auch registrieren und anderen Skripten zur Verfügung stellen.

function registerCustomScript(){
    // Script registrieren
    wp_register_script('{JS-handle-1}',get_stylesheet_directory_uri().'/{custom-js}.js');
    wp_register_script('{CSS-handle-2}',get_stylesheet_directory_uri().'/{custom-js-2}.js', array('jquery'));
}

add_action('init', 'registerCustomScript');

function addCustomScript(){
    global $post;

    if(null == $post){
        return;
    } 
    
    // Lade die JS Datei nur für die Seite mit der ID 500.
    if($post->ID == 500){
        wp_enqueue_script('{JS-handle-1}');
    }
    // Lade die JS Datei nur für die Seite mit der ID 600.
    if($post->ID == 600){
        wp_enqueue_script('{JS-handle-2}');
    } 
    // Lade beide JS Dateien für die Seite mit der ID 700
    if($post->ID == 700){
        wp_enqueue_script('{JS-handle-1}');
        wp_enqueue_script('{JS-handle-2}');
    }
}
add_action('wp_enqueue_scripts', 'addCustomScript');

Fazit #

In dem Tutorial hast du gelernt wie du einzelne JavaScript und CSS Dateien schnell und unkompliziert einbinden kannst. Darüber hinaus haben wir gelernt, wie man CSS und JavaScript Dateien nur für bestimmte Seiten lädst um Ressourcen und Ladezeiten zu reduzieren.

Zum Schluss haben wir uns angesehen wie du für deine Skripte WordPress eigene Bibliotheken wie jQuery zur Verfügung stellen kannst.

Du hast Fragen oder Anregungen? Dann hinterlasse uns doch einfach einen Kommentar.