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

Word­Press erlaubt es dir, spie­lend leicht eige­ne CSS und Java­Script Datei­en ein­zu­bin­den und das gan­ze ohne ein zusätz­li­ches Plug­in.

Dafür musst du ledig­lich die functions.php in dei­nem The­me (bzw. Child-The­­me) um ein paar Zei­len Code erwei­tern.

Einbinden von CSS Dateien #

Um dei­ne CSS Datei­en ein­zu­bin­den, kannst du ganz ein­fach den Action-Hook “wp_enqueue_scripts” ver­wen­den.

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 Bedin­gun­gen defi­nie­ren, zum Bei­spiel auf wel­cher Sei­te die CSS Datei ein­ge­bun­den wer­den sol­len.

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 dei­ne CSS Datei­en natür­lich auf meh­re­ren Sei­ten ein­bin­den.

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 Ein­bin­den von Java­Script Datei­en kannst du den Word­Press Hook ‘wp_enqueue_scripts’ ver­wen­den.

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 dei­nen Java­Script Datei­en auch auf jQuery zugrei­fen. Hier­zu musst du dein Skript nur mini­mal anpas­sen.

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

add_action('wp_enqueue_scripts', 'addCustomScripts');

Wei­te­re Skrip­te, die du eben­falls so leicht laden kannst, fin­dest du direkt in der Code-Refe­­renz von Word­Press (hier kli­cken um zur Word­Press Code Refe­rence zu gelan­gen).

So las­sen sich auch meh­re­re Skrip­te auf ein­mal ein­bin­den.

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

Dei­ne Skrip­te kannst du jeder­zeit auch in den Foo­ter dei­ner Sei­te ver­schie­ben. Hier musst du natür­lich dar­auf ach­ten, das die Skrip­te auch erst nach dem voll­stän­di­gen Laden der Sei­te zur Ver­fü­gung ste­hen.

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

Java­Script Datei­en müs­sen nicht immer auf allen Sei­ten gela­den wer­den. Das lässt sich ein­fach unter­bin­den und spart Res­sour­cen.

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 dei­ne Java­Script Datei­en auch regis­trie­ren und ande­ren Skrip­ten zur Ver­fü­gung stel­len.

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 Tuto­ri­al hast du gelernt wie du ein­zel­ne Java­Script und CSS Datei­en schnell und unkom­pli­ziert ein­bin­den kannst. Dar­über hin­aus haben wir gelernt, wie man CSS und Java­Script Datei­en nur für bestimm­te Sei­ten lädst um Res­sour­cen und Lade­zei­ten zu redu­zie­ren.

Zum Schluss haben wir uns ange­se­hen wie du für dei­ne Skrip­te Word­Press eige­ne Biblio­the­ken wie jQuery zur Ver­fü­gung stel­len kannst.

Du hast Fra­gen oder Anre­gun­gen? Dann hin­ter­las­se uns doch ein­fach einen Kom­men­tar.