Cache stets die aktuelle style.css

Das Zwischenspeichern (cachen) von Seiteninhalten ist generell sinnvoll, da es die Ladezeiten erheblich verkürzt. [Info]
Wenn man jedoch am Styling der Website rumschraubt (also die style.css Datei bearbeitet) erscheint die Veränderung für die Besucher nicht automatisch richtig. Es wird hier auf die Cache Datei zugegriffen (also die bisherige style.css).
Kein Problem drückt man halt F5… aber ein Besucher wird beim Betreten der Seite kaum F5 drücken. Was ist zu tun?
Wie kann sichergestellt werden, dass stets die aktuelle style.css gecacht wird?

Cache Funktions-Beispiel:

Ein Bild namens poststraße.jpg ist in dem Beitrag „Mein Haus“ eingefügt. Das Bild landet im Zwischenspeicher und beim nächsten Besuch des Beitrags wird das Bild schnell geladen. Soweit so gut…

Nach dem Umzug wird ein neues Bild eingestellt schlossallee.jpg, dieses Bild hat einen neuen Namen und muss beim ersten Besuch erst neu zwischengespeichert werden. Beim zweiten Besuch ist wieder schnell geladen.

Resultat: Der geänderte Dateiname erzwingt ein neues Zwischenspeichern.

Cache Problem

Nach einiger Zeit wird das Haus gelb gestrichen und ein neues Foto namens schlossallee.jpg eingefügt. Es erscheint aber die alte graue Fassade. Drückt man F5 wird das Bild aktualisiert.

Cache Lösung

Nennt man das neue Bild schlossallee-gelb.jpg, so würde es automatisch beim Betrachten der Seite angezeigt. Beim ersten betrachten des Beitrags mit dem neuen Bild müsste man jedoch eine längere Ladezeit in Kauf nehmen.

für die style.css bedeutet das folgendes:
Der Name der Datei muss sich ändern! Aber wie?

style.css

Direkt den Namen der style.css jedesmal zu ändern ist nicht der sinnvolle Weg. Es lässt sich aber eine Art Versionsnummer anhängen, so dass ein neuer Dateiname entsteht.

Standard Einbau in der header.php
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Ergebnis (Seitenquelltext):
<link rel="stylesheet" href="http://house-of-chicago.de/wp-content/themes/funkygog-Theme/style.css" type="text/css" media="screen" />

Der Code lässt sich erweitern um die Ausgabe des Datums der aktuellen Datei
Mit Hilfe der php-Funktion filemtime erhält man einen Zeitstempel [mehr Infos]
<link rel="stylesheet" type="text/css" media="screen"
href="<?php echo get_stylesheet_uri();
echo '?'.filemtime( get_stylesheet_directory() . '/style.css'); ?>" />

Ergebnis:
<link rel="stylesheet" type="text/css" media="screen"
href="http://house-of-chicago.de/wp-content/themes/funky_house/style.css?1424457371" />

Resultat:

Mit jeder Aktualisierung der style.css Datei ergibt sich ein neue Zeitstempel und dieser wird (durch obigen Code) automatisch dem Dateinamen angehängt.
Nach jeder Aktualisierung muss demnach die Datei neu gecacht werden.
Das bedeutet, es können durch diese Methode keine alten Styling Angaben für den Besucher erscheinen – dennoch bleibt die Cache Funktionalität erhalten.