CSS mit dynamischer Versionsnummer im WordPress Theme einbinden

Dieser Artikel beschreibt, wie du CSS Dateien mit automatisch generierten Versionsnummern in deinem WordPress Theme einbinden kannst. Damit lädt der Browser die Stylesheets bei CSS Änderungen neu, anstatt veraltete CSS Dateien aus dem Browser Cache zu verwenden.

Sinn einer Versionsnummer beim Laden von CSS

Moderne Browser speichern CSS Dateien lokal auf dem Gerät des Besuchers ab, um bei einem erneuten Aufruf der Website diese schnell aus dem Cache laden zu können. Während dieses Verhalten der Browser für wesentlich schnellere Ladezeiten sorgt, bringt es auch Nachteile mit sich.

Änderungen an den CSS Dateien werden nämlich nicht mehr sofort live auf der Seite angezeigt, weil Browser die gecachten Dateien erst nach einiger Zeit aktualisieren. Es kann auch zu Fehlern kommen, wenn sich der HTML Code geändert hat, aber eine veraltete CSS Datei aus dem Cache verwendet wird.

Abhilfe dafür schafft man mit dem Hinzufügen einer Versionsnummer der CSS Datei in Form eines GET Parameters.

/wp-content/themes/theme-slug/style.css?ver=1.0.2

Bei einer CSS Änderung kann man nun die Versionsnummer entsprechend anpassen, damit Browser die CSS Datei neu laden und das alte Stylesheet im Cache verwerfen.

Einbinden von CSS in WordPress

In WordPress sollten CSS Dateien immer mit wp_enqueue_style() eingebunden werden.

Der vierte Parameter der Funktion nimmt die Version der CSS Datei entgegen.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Fehlt der Parameter, verwendet WordPress automatisch die Version des Cores. Das ist aber wenig sinnvoll, weil dann die CSS Dateien vom Browser nur neu geladen werden, wenn ein Update des Core erfolgt, aber nicht bei Modifikationen des jeweiligen Stylesheets.

Es sollte deshalb grundsätzlich immer eine Versionsnummer für jede eingebundene CSS und JavaScript Datei übergeben werden.

Manuelle Versionsnummer im WordPress Theme

Die einfachste Variante ist die manuelle Angabe einer statischen Versionsnummer.

wp_enqueue_style( 'genericons', get_template_directory_uri() . '/css/genericons.css', array(), '3.4.1' );

Ich empfehle diese Methode vor allem bei der Einbindung von fremden CSS Dateien, wie beispielsweise einem Icon Font.

Dadurch kann man ideal angeben, welche Version des externen Stylesheets verwendet wird (z.B. Version 3.4.1 des Genericons Fonts), und erleichtert damit anderen Entwicklern die Anpassung des Themes.

Eine statische Version bietet sich ebenfalls bei Dateien an, welche sich nur sehr selten ändern. Sehr häufig wird als Version auch das Datum der letzten Änderung angegeben.

// Load the Internet Explorer specific stylesheet.
wp_enqueue_style( 'twentysixteen-ie', get_template_directory_uri() . '/css/ie.css', array(), '20160816' );

Beispiel aus TwentySixteen

Automatische Versionierung im WordPress Theme

CSS Dateien wie zum Beispiel die style.css des Themes ändern sich häufiger, weshalb sich eine automatische Generierung der Versionsnummer anbietet. Ansonsten muss nach jeder Änderung die Version manuell geändert werden, was sehr leicht einmal vergessen wird.

Für Themes, welche auf wordpress.org veröffentlicht oder allgemein für einen größeren Nutzerkreis erstellt werden, bietet sich die Verwendung der Versionsnummer des ganzen Themes als Versions-Parameter für CSS Dateien an.

Die Version des Themes lässt sich mit der Funktion wp_get_theme() ermitteln und mit folgendem Code Schnipsel zum Laden des Stylesheets einsetzen.

/**
 * Enqueue scripts and styles.
 */
function theme_slug_scripts() {

	// Get Theme Version.
	$theme_version = wp_get_theme()->get( 'Version' );

	// Register and Enqueue Stylesheet.
	wp_enqueue_style( 'theme-slug-stylesheet', get_stylesheet_uri(), array(), $theme_version );

}
add_action( 'wp_enqueue_scripts', 'theme_slug_scripts' );

Weil sich bei jedem Update des Themes die Version in der style.css sowieso ändert, spart man sich damit das Anpassen der Versions-Parameter für alle CSS Dateien. Damit werden zwingend bei jedem Update des Themes die CSS Dateien vom Browser neu geladen.

Dynamische Versionsnummer anhand des Bearbeitungsdatums

Bei Custom Themes auf der eigenen Website oder die eines Kunden ändert sich nicht zwangsläufig die Theme Version in der style.css, wenn eine Änderung an den CSS Dateien vorgenommen wird. Schließlich wird das Update nicht an viele Nutzer ausgerollt.

Um sich die Anpassung der Versionsnummer des Themes nach jeder kleinen Modifikation zu sparen, kann die Versionierung auch dynamisch anhand des letzten Bearbeitungsdatums der CSS Datei erfolgen. Wir nutzen dafür die praktische PHP Funktion filemtime().

/**
 * Enqueue scripts and styles.
 */
function theme_slug_scripts() {

	// Get modification time.
	$modificated = date( 'YmdHi', filemtime( get_stylesheet_directory() . '/style.css' ) );

	// Register and Enqueue Stylesheet.
	wp_enqueue_style( 'theme-slug-stylesheet', get_stylesheet_uri(), array(), $modificated );

}
add_action( 'wp_enqueue_scripts', 'theme_slug_scripts' );

Damit wird die CSS Datei mit dem Datum und Uhrzeit der letzten Modifikation eingebunden.

/wp-content/themes/theme-slug/style.css?ver=201702141743

Fazit

Eine dynamische Generierung der Version für das Laden von CSS Dateien stellt sicher, dass Browser bei einer Änderung auf alle Fälle die Stylesheets neu laden. Anzeigefehler, welche durch veraltetes CSS aus dem Browser Cache verursacht werden, können somit leicht ausgeschlossen werden.