WordPress CSS und Javascript Dateien einbinden + Versionierung

So bindest du CSS und Javascript Dateien in dein WordPress Theme ein.

Inhaltsverzeichnis

Eine kleine Helper Funktion Theme Versionierung deiner Dateien

function get_version()
{
    $version = wp_cache_get('deine_theme_version');
    if (false === $version) {
        $theme = wp_get_theme();
        $version = $theme->get('Version');
        wp_cache_set('deine_theme_version', $version);
    }
    return $version;
}

Diese Funktion gibt die aktuelle Theme Version die du in deiner style.css definiert hast zurück. Nützlich um später bei neuen Releases deines Themes, den Cache zu zwingen die aktuelle Version aller eingebundenen Dateien zu laden.

Javascript einbinden mit wp_enqueue_script()

function system_enqueues() {
    $version = get_version();
    wp_enqueue_script( 'dein-handle', get_template_directory_uri() . '/assets/js/deine-javascript-datei.js', ['jquery'], $version, true );
}
add_action( 'wp_enqueue_scripts', 'system_enqueues' );

Mit get_version() erhalten wir die Theme Version z.B. ‘1.1.1’.

Das eingebundene Script sieht im Quellcode dann so aus:

<script type='text/javascript' src='https://www.deine-domain.de/wp-content/themes/dein-theme/assets/js/vendor/deine-javascript-datei.js?ver=1.1.1' id='dein-handle-js'>

wp_enqueue_script() hat mehrere Parameter

1. Das Handle
   mit dem von dir vergebenen Handle kannst du dein Script “ansprechen”. Zusätzlich wird es als CSS ID gesetzt.
2. Der Pfad zur Datei
   Hier mit get_template_directory_uri() den Pfad ins Theme und dann in den /assets/js Ordner
3. Abhängigkeiten
   Ein Array mit Abhängigkeiten. Im Normalfall nur 'jquery'. Du kannst es aber auch komplett leer lassen mit [''] .
4. Version
   Die Version der Datei
5. Position
   true bedeutet die Datei wird in den Footer geladen. Default ist hier false (im Header).

Daten mit wp_localize_script() mit PHP übergeben und im Javascript verfügbar machen

Manchmal benötigt man im Javascript die post_id, den post_type, die wp-ajax url oder sonst etwas das du per PHP aus deiner Datenbank ziehst und übergeben möchtest.

Dazu kannst du einem eingebunden Javascript mit wp_localize_script() ein Objekt (DEINOBJEKT) mit Eigenschaften mitgeben.

Wichtig hierbei ist das du das selbe handle benutzt, in unserem Fall ‘dein-handle‘.

function system_enqueues() {
    $version = get_version();
    wp_enqueue_script( 'dein-handle', get_template_directory_uri() . '/assets/js/deine-javascript-datei.js', ['jquery'], $version, true );
    wp_localize_script('dein-handle', 'DEINOBJEKT', [
        'url' => admin_url('admin-ajax.php'),
        'post_id' => get_the_ID(),
        'post_type' =>  get_post_type( get_the_ID() )
    ]);
}
add_action( 'wp_enqueue_scripts', 'system_enqueues' );

Das eingebundene Script sieht im Quellcode dann so aus:

<script type='text/javascript' src='https://www.deine-domain.de/wp-content/themes/dein-theme/assets/js/vendor/deine-javascript-datei.js?ver=1.1.1' id='dein-handle-js'>
<script type='text/javascript' id='dein-handle-js-extra'>/* <![CDATA[ */var DEINOBJEKT = {"url":"https:\/\/www.deine-url.de\/wp-admin\/admin-ajax.php","post_id":"123","post_type":"film"};/* ]]> */</script>

Du kannst in deinem Javascript nun die Werte aus deinem Objekt wie folgt benutzen.

let post_id = DEINOBJEKT.post_id
let post_type = DEINOBJEKT.post_type
// usw...

CSS einbinden mit wp_enqueue_style()

function system_enqueues() {
    $version = get_version();
    wp_enqueue_style( 'dein-css', get_template_directory_uri() . '/assets/css/deine-css-datei.css', [''], $version );
}
add_action( 'wp_enqueue_scripts', 'system_enqueues' );

wp_enqueue_style() hat mehrere Parameter

1. Das Handle
   mit dem von dir vergebenen Handle kannst du dein CSS “ansprechen”. Zusätzlich wird es als CSS ID gesetzt.
2. Der Pfad zur Datei
   Hier mit get_template_directory_uri() den Pfad ins Theme und dann in den /assets/js Ordner
3. Abhängigkeiten
   Ein Array mit Abhängigkeiten. Du kannst es komplett leer lassen mit [''] .
4. Version
   Die Version der Datei