サーバリクエストを減らすためにキャッシュを効かすと、内容を書き換えたときでも即時反映されず表示が崩れて困ることがあります。
リロードすれば治るんですけど、作り手が強要するのも何だよな…と言うことで対処することにしました。
外部ファイルのバージョン管理方針
CSS や JavaScript にバージョンナンバーとしてユニークIDを付記します。今回はバージョンナンバーとして日付を使いました。
ファイルの更新日を見てバージョン情報を付加し、ローカルキャッシュと違うものが入ったら新しいファイルを読み込むようにします。テンプレートタグの使い分けで実装方法が複数あるのでいくつか書き出してみました。
場合によってはフォントファイルなどにも適応可能です。対処範囲はサイト構成に応じて適当に読み替えて下さい。
ファイルの更新日を直接指定する方法
例としてテーマファイルの style.css を取りに行き、header.php の CSS 呼び出し部に更新日を付記します。
【header.php】
<?php
$pathCSS = get_stylesheet_directory().'/style.css';
if (file_exists($pathCSS)) {
$modCSS = date('Ymd', filemtime($pathCSS));
}
?>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri().'?v='.$modCss; ?>" media="all">
これでファイルネームにバージョン情報が入るので、違う日付のものが入ってきたらキャッシュを捨てて現在のものを読み込みに行きます。
CSSやJavaScriptであれば更新頻度はせいぜい日付単位になると思いますが、もし一日に何度も書き換える可能性があるファイルなら時間情報も足して下さい。
style.css の取得方法
ちなみに、スタイルシートのパスは別の書き方でも取得可能です。（WordPress2.1以降）
【PHP】
$pathCss = STYLESHEETPATH.'/style.css';
関係するテンプレートタグを探すと get_stylesheet_directory() と get_stylesheet_directory_uri() があって使い分けに迷いますね。前者はサーバ上のパス、後者はWebアドレスを返すもので微妙に挙動が違うので注意です。
wp_enqueue_style()を使った外部ファイルの管理
【2015/07/18：本章追記】外部ソースを適切にエンキューするテンプレートタグ wp_enqueue_style() というのを知ったので追記。
単純なバージョン管理にはこっちを使う方が良さそうですね。（汗）
wp_enqueue_style() USAGE
【PHP】
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
関数リファレンス/wp enqueue style – WordPress Codex
- $handle
- (必須) CSSの名称。(テーマ名)-style などの書式でHTML側でidが付与される。初期値： なし
- $src
- （オプション） CSSのURL。URL直書きではなくget_template_directory_uri等での呼び出し推奨。初期値： false
- $deps
- （オプション） CSSが依存する他のスタイルシートのハンドル名。子テーマから見たときの親テーマなど。初期値： array()
- $ver
- （オプション） CSSのバージョン番号を指定する文字列。初期値： false
- $media
- （オプション） CSSのメディアタイプ。’all’,’screen’,’handheld’,’print’など。初期値： ‘all’
親テーマのCSS呼び出し方法とバージョン管理
まずは親テーマでCSSを管理する方法です。
【functions.php】
wp_enqueue_style(
'twentyten-style', // 使用テーマ
get_template_directory_uri() . '/style.css',
array(),
date('Ymd', filemtime(get_template_directory() . '/style.css'))
);
子テーマのCSS呼び出し方法とバージョン管理
次は子テーマを設定している場合です。親テーマのときと比べると細かく設定項目が変わります。特にディレクトリを指定するテンプレートタグまわりに注意して下さい。
【functions.php】
wp_enqueue_style(
'twentyten-child-style', // 使用テーマ
get_stylesheet_uri(),
array('twentyten-style'),
date('Ymd', filemtime(get_stylesheet_directory() . '/style.css'))
);
ちなみに、functions.phpにてテーマCSSの設定をする場合、適切に呼び出されてれば親テーマ側に書いても子テーマ側に書いても動くようです。
dogmap.jp/functions.php at master · wokamoto/dogmap.jp · GitHub
付表：主な日付の書式
ここでバージョン管理の日付で ‘Ymd’ という書式を使いましたが、表記は好みや更新頻度に合わせて好みの形式を利用できます。
以下に標準的な日付の書式を挙げておくのでご参考マデ。視認性が悪いときは間にハイフン入れて整形すると読みやすくなると思います。
- 年
- Y 4桁数字
- y 2桁数字
- 月
- m ゼロつき数字
- n ゼロなし数字
- F フルスペル英字
- M 3文字 英略字
- 日
- d ゼロつき数字
- j ゼロなし数字
- 曜日
- l フルスペル英字
- D 3文字 英略字
- 時刻
- a 午前または午後（小文字）
- A 午前または午後（大文字）
- h ゼロつき12時間
- j ゼロなし12時間
- H ゼロつき24時間
- G ゼロなし24時間
- i ゼロつき分
- s ゼロつき秒
おわりに
CSSやJavaScriptにIDを割り振って、適切にキャッシュを行うための対処法でした。
割り振った日付情報はHTMLソースに反映されるので、手を加えたファイルが本当に読み込めてるか確認するときにも便利です。
頻繁にデザインや機能を書き換えているサイトオーナーさんは試してみて下さい。
キャッシュ設定でサイト表示を3倍速くする.htaccessの書き方
コメントをどうぞ(´ω｀*)