D(r)ivingralle

Multi Medial – analog bis ziemlich digital

JS- und CSS-Dateien in WordPress Theme einbinden und zukünftig Versionsnummer nur einmal ändern müssen

| 2 Kommentare

Ordnungsgemäß in WordPress eingebundene JS- und CSS-Dateien werden bei der Ausgabe mit einer Versionsnummer als GET-Parameter ausgestattet. Dieses Verhalten dient dem sg. Cache-Busting. Eine sinnvolle Core-Funktion finde ich.

Allerdings gibt es in meinen Augen ein generelles Problem mit dem Fallback, der einspringt wenn beim entwickeln etwas sparsam gearbeitet wurde. Ein Punkt der durch automatische (Sicherheits-)Updates nur verstärkt wird. Beschrieben habe ich dies bereits vor einiger Zeit in diesem Trac-Ticket.
Da eine automatische Lösung kompliziert erscheint, bleibt erst mal nur der Weg es richtig zu machen.

Bedeutet es muss immer wenn die Version des Theme angehoben wird an mehreren Stellen geschaut werden ob auch dort der String angepasst werden muss. Namentlich:

  • Header-Info in der (Child-)Theme: style.css
  • Alle Enqueue-Funktionen für (Child-)Theme CSS-Datei in functions.php
  • Alle Enqueue-Funktionen für (Child-)Theme JS-Datei in functions.php
  • ggf. weitere Code-Stellen

Etwas das wenn wir mal ehrlich sind gerne mal untergeht und dann zu defekten Darstellungen bei Website-Besuchern führen kann.

Automatisieren was geht

Um sich den Aufwand des suchen und ersetzen der Versionsnummer innerhalb eines Theme zu sparen, sieht man immer wieder die Verwendung von PHP-Konstanten. Ein halb-garer Weg. Man reduziert den Aufwand zwar aber es verbleiben 2 Code-Stellen, die zu editieren sind.
Close, but not yet there.

Kurz zur Erinnerung wir arbeiten mit einem Content-Managment-System, das in der Lage ist uns Informationen über Inhalte und sich selber geben zu können.
WordPress basiert alle Aussagen im Backend über die Version von Themes auf die Information im Header in der erforderlichen style.css-Datei. Diesem Beispiel bin ich gefolgt und habe für mich die folgende Lösung zusammen gestellt.

Was es macht

Zunächst werden mittels Core-Funktion alle verfügbaren Infos über die aktiven Theme(s) in eine Variable gespeichert und anschließend die entsprechende Versionsnummer des Parent- bzw. Child-Theme in der Einbindungs-Funktion eingesetzt.

Man beachte den kleinen Unterschied: parent()

Das Beispiel zeigt die Methode für CSS-Dateien. Es ist in gleicher Art und Weise auch für Javascripte anwenden.

Ergebnis

Wenn sich nun die Versionsnummer in der Style.css-Datei eines Themes ändert egal ob Parent- oder Child-Theme wird der GET-Parameter zum Cache-Busting ohne weiteres Zutun geändert.
Die Veränderung der Version kann z.B. durch ein Update eines Free-/Premium-Themes geschehen.

Einschränkung

Ich verwende diese Methode für alle Ressourcen, die speziell für das Theme erstellt wurden. Bei JS-Bibliothek oder Ähnliches verwende ich die Version des entsprechenden Script.


PS: Ob dies hier ein Advents-Kalender wird, werden die kommenden Tage zeigen … .

2 Kommentare

  1. Coolio! Wer was Ähnliches für Plugins sucht: get_file_data(). Hier ein einfaches Beispiel-Plugin, das die entsprechende Ausgabe kommentarlos auf den Bildschirm dumpt. https://gist.github.com/glueckpress/b720341600e13d31d4f5

  2. Hey Ralf,

    gute Idee, die Theme-Version für Assets zu verwenden. Der einzige Haken an der Sache ist, dass man auch tatsächlich jedes Mal, nachdem man auch nur eine einzige Zeile in einer Theme-CSS- oder -JS-Datei geändert hat, die Theme-Version anheben muss.

    Um nicht zwischen Theme- und Plugin-Assets zu unterscheiden, verwende ich seit langem das Änderungsdatum der eigentlichen CSS- bzw. JS-Datei. Das sieht dann in etwa so aus:


    $file = 'path/to/assets/some-script' . ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min' ) . '.js';
    wp_enqueue_script(
    'some-script-handle',
    plugin_dir_url( $main_file ) . $file,
    [ 'jquery' ],
    filemtime( plugin_dir_path( $main_file ) . $file ),
    true
    );

    Viele Grüße,
    Thorsten

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.