CSS Versionierung in das WordPress Theme integrieren
Gerade in der Entstehungs- und Optimierungsphase eines Themes schraubt man gerne mal Stylesheet herum. Bis der Browser dann mal das aktuelle Machwerk anzeigt, vergehen gut und gerne ein bis zwei herzhafte Reloadversuche. Ich weiß nicht, wie es euch geht, aber mich nervt so etwas – wohl wissend der Gefahr, dass die Besucher womöglich auch eine veraltete Version des Outfits zu sehen bekommen.
Dagegen gibt’s zwar nichts von Ratiopharm, wohl aber etwas aus der Trickkiste. Mit einer Versionierung des Stylesheets in der Form von ?ver=N verhindert man, dass die alte Version aus dem Cache geladen wird. So etwas kann man von Hand einfügen – man muss es aber nicht. Geht auch automatisch – wie von Geisterhand.
In die functions.php des Themes fügt man folgende Zeilen ein:
function fileVersion($filename)
{
// get the absolute path to the file
$pathToFile = TEMPLATEPATH.'/'.$filename;
//check if the file exists
if (file_exists($pathToFile))
{
// return the time the file was last modified
echo filemtime($pathToFile);
}
else
{
// let them know the file wasn't found
echo 'FileNotFound';
}
}
Anschließend entfernt man in der header.php den Aufruf des Stylesheets und fügt stattdessen jene Zeile ein:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>?v=<?php fileVersion('style.css'); ?>" />
Sollte euer Stylesheet einen anderen Namen als style.css haben, müsst ihr das selbstredend entsprechend ändern. Das war’s. Nun sollten alle Anpassungen am Theme sofort sichtbar sein.
Und falls ihr meint, ich habe mir das selbst ausgedacht – nein, habe ich hier gefunden und für euch blumig verpackt.
Update
Ok, es hat nicht sollen sein. Wenn ich schon mal einen Tipp zum Besten gebe, dann kommen die wahren Profis und zeigen, dass es besser geht. Ist aber nicht schlimm – man lernt ja nie aus. Ich teste gerade die Lösung von Frank, die er in den Kommentaren empfohlen hat. Die sieht so aus:
/**
* Smart cache-busting
* cacht css des Themes
*/
if ( ! function_exists( 'fb_css_cache_buster' ) ) {
function fb_css_cache_buster( $info, $show ) {
if ( ! isset($pieces[1]) )
$pieces[1] = '';
if ( 'stylesheet_url' == $show ) {
// Is there already a querystring? If so, add to the end of that.
if ( strpos($pieces[1], '?' ) === FALSE ) {
return $info . "?" . filemtime( WP_CONTENT_DIR . $pieces[1] );
} else {
$morsels = explode( "?", $pieces[1] );
return $info . "&" . filemtime( WP_CONTENT_DIR . $morsles[1] );
}
} else {
return $info;
}
}
add_filter( 'bloginfo_url', 'fb_css_cache_buster', 9999, 2 );
}
Vorteil hier: kein Anpassen der header.php und ganz viele Karma-Punkte bei Page Speed und Proxy-Servern.
Related posts:
Page Speed und Proxy-Server werden dich hassen
Ich bevorzuge style.version-datum-was-auch-immer.css. Den Rewrite-Part müsstest du in einem meiner Links im letzten Kommentar gesehen haben.
Ah. Du meinst die Problematik mit dem “?”. Muss mal schauen, wie sich das bemerkbar macht.
Ich hatte das, so wie ich es gelöst habe, immer im Thesis-Theme und fand das ganz praktisch…
Jo, praktisch ist es. Ist eine Frage der (Selbst)Disziplin
Alles nur Kleinigkeiten. Damit kann man sich beschäftigen, wenn sonst alles Tiptop ist.
Hey Sergej,
wir erzeugst du die Ausgabe á la default.15112011.css im Theme? Bzw. was wird außer der Rewrite Regel
RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg)$ $1.$3 [L]
noch benötigt damit es Reibungslos funktioniert und die Regel wie geplant greifen kann, habe da Probleme mit der Umsetzung. :/
***
Vielen Dank an den Autor für die Lösungsvorschläge, klappen super
“Page Speed und Proxy-Server werden dich hassen”
War auch mein erster Gedanke. Hast du nicht letztens noch gefragt wie du den Laden hier flotter bekommst? So sicher nicht
Bei jedem Aufruf den Zeitstempel von der Platte zu lesen macht die Sache sicher nicht flotter. Vielleicht lohnenswerter eine Versions-Nummer zu pflegen, in ner Variable zu speichern und an die CSS Datei zu hängen?
Ich schrieb ja oben was von “verhindert man, dass die alte Version aus dem Cache geladen wird”. Schon klar, dass das dann eher kontraproduktiv ist. Momentan ist wir die Versionierung aber wichtiger als die Geschwindigkeit. Zumindest bis ich nichts mehr am Theme mache.
Und falls die eine Anfrage nun wirklich gleich den Page Speed in den Abgrund reisst, dann weiß ich ja, woran es liegt.
Du kannst direkt über einen Filter gehen, kein Eingriff in die header.php und nur dann wird neu geladen, wenn wirklich was an der Datei geändert wurde.
/**
* Smart cache-busting
* cacht css des Themes
*/
if ( ! function_exists( ‘fb_css_cache_buster’ ) ) {
function fb_css_cache_buster( $info, $show ) {
if ( ! isset($pieces[1]) )
$pieces[1] = ”;
if ( ‘stylesheet_url’ == $show ) {
// Is there already a querystring? If so, add to the end of that.
if ( strpos($pieces[1], ‘?’ ) === FALSE ) {
return $info . “?” . filemtime( WP_CONTENT_DIR . $pieces[1] );
} else {
$morsels = explode( “?”, $pieces[1] );
return $info . “&” . filemtime( WP_CONTENT_DIR . $morsles[1] );
}
} else {
return $info;
}
}
add_filter( ‘bloginfo_url’, ‘fb_css_cache_buster’, 9999, 2 );
}
Hübsch. Das teste ich mal. Habe ich oben als (bessere) Alternative mal ergänzt.
Danke!
Momentan beschwert sich Google nicht allzu bei deiner seite (89/100 pagespeed)
grüße, vincent
Opps eh nicht relevanter Kommentar nach Franks Kommentar, sorry zu voreilig.
Den Wert hatte ich auch mit meiner Version. So relevant scheint das also nicht zu sein.