ランダムなGET引数をURLに付加してクライアント側のキャッシュを制御

静的ファイルのブラウザキャッシュ制御とは？

WordPressのテーマ開発時やサイトを制作をする場合にブラウザのキャッシュ適切に把握して効率的に開発(制作)できるようにしたい。

その場合の方法としてスタイルシートのリクエストURLにGET引数を添加してクライアント側で毎回異なるリソースにアクセスしていると認識させることにより、スタイルシートへ行った更新を適切に反映させる方法がある。具体的には以下のようにする

<link rel='stylesheet' href='http://test.com/wp-content/themes/launcher-kid/style.css?1390286073' type='text/css' />

URLの最後のほうにある?マークの後にランダムな文字列を付加することで、毎回異なるURLを生成できる。上の例は、現在のUnixタイムスタンプをGET引数にしている。

wp_head actionにフックする方法

wordpressのwp_headアクションでhreflang属性を追加するにエントリーしたとおり、wordpressのアクションフックであるwp_headを利用してスタイルシートやjavascriptファイルを追加で読み込むように設定することができる。

まず、change_head関数をwp_headアクションにフックする。

add_action('wp_head', array($this, 'change_head'));

change_head関数は以下のようにした。

function change_head() {
	echo "<link rel='stylesheet' href='".get_bloginfo('stylesheet_url').'?'.time()."' type='text/css' />";
}

この設定でランダムなGET引数付のURLがHTMLのhead領域に追加される。

wp_enqueue_styleを利用する方法

wp_headアクションを利用する方法の他に、wp_enqueue_style関数を利用してhead領域にスタイルシートの読み込み設定を追加することができ、その場合でURLの末尾にランダムなGET引数を追加するやり方は以下のとおり

wp_enqueue_style( 'other', get_bloginfo('stylesheet_url'), false, time() );

上のコードは以下のHTMLを出力する

<link rel='stylesheet' id='other-css'  href='http://test.com/wp-content/themes/launcher-kid/style.css?ver=1390287551' type='text/css' media='all' />

4番目の引数としてtimeを設定することで、GET引数verとしてタイムスタンプ値が追加される。この方法でもブラウザキャッシュをコントロールすることが可能。

wp_enqueue_styleを利用する場合には、wp_headアクションにフックしてもうまく機能させることはできない。代わりに、

• init
• setup_theme

といったアクションフックに設定したところ、wp_enqueue_styleはうまく動作した。