WordPress CSS und Javascript Dateien einbinden + Versionierung

Julian Lang
Julian Lang

07. Jul, 2022 | 2 Min. Lesezeit

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

Table of Content SVG Icon 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

    geschrieben von

    Autor Avatar
    Julian Lang

    ist PHP / WordPress Entwickler. Arbeitet außerdem als Allrounder bei docrelations.de und entwickelt zwei coole Projekte: jadento.de | lifeisabinge.com

    Schreibe einen Kommentar

    © 2015 - 2024 | Julian Lang Webentwickler | WordPress Entwickler | Webdesigner in Bayreuth und Umgebung
    Glücksrad drehen
    Wait Gif

    Das Glücksrad erscheint jetzt nur einmal!

    Nutze die Chance und gewinne einen Preis

    Neukunden Preise

    • 🏆: kostenlose lokale Google Font Einbindung
    • ⚡: kostenlose Performance Analyse deiner Webseite
    • 🤲: 50% Rabatt auf Stundensatz für eine Programmierstunde
      (30 Minuten kostenlos)