WordPressテーマのcssの末尾にクエリ文字を加えてキャッシュさせないようにする

凄く今更な話題かもしれませんが、知ってると便利なのでちょっと書いてみます。WordPressのテーマのcssに変更を加えたときに、表示をクライアントさん等に確認して貰う際、キャッシュの説明をするのがかなり面倒です。

というわけで、古来から伝わるcssファイルのキャッシュ(cssに限りませんけど)を防ぐ方法をWordPressで、という内容です。

この辺の理屈は、よく拝見させて頂いている小粋空間さんが書かれてますので合わせてご参照下さい。

get_bloginfo( ‘stylesheet_url’ )の方の方が多いかもですけど、今回はcssを読み込ませるのにこれ使います↓

href="<?php bloginfo('stylesheet_directory'); ?>/style.css"

これで以下のように出力。

href="http://example.com/wp-content/themes/example/style.css"

さきほどのような、キャッシュによる時間のロスを防ぐために末尾に更新時のタイムスタンプを加えます。

href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>"

filemtimeはファイルの更新時刻を取得する関数で、これをcssの後に?をかまし、その後に加えます。

以下のように出力

href="http://example.com/wp-content/themes/example/style.css?1324216986"

末尾にタイムスタンプが加わりました。

たとえばcssを修正して、再度アップロードした際は

href="http://example.com/wp-content/themes/example/style.css?1324217634"

と言った具合でcssを新たに更新した時間が加わります。気持ちが悪いなら修正後に元のコードに戻せばOKです。

キャッシュさせない方法はいろいろあるでしょうけど、こんな手軽な方法でも、先方に何度も確認してもらうというやり取りがある場合はキャッシュによる混乱を防げるんじゃないでしょうか。