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.