知らなくて損してたcssの更新をブラウザに確実に反映させる方法 | WordPressのカスタマイズ

サイトの作成をしていると、cssやjavascriptを変更し、アップロードしてもすぐにはその更新がブラウザに反映されないことはよくあることです。これはアクセスしたことがあるサイトは、より速くそのページを表示させるよう、なるべくデータのやり取りを少なくするために、ブラウザによってデータがキャッシュされているがゆえに起こること。
その対処法としてネットで調べた以下のような文言、

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00 GMT">

を、headタグ内に記述したりしたこともあったのですが、これとても全く万全ではなく、更新がすぐに反映されないことはあたりまえのようによくありました。
改めて何か他にいい手はないものかと再びネットを徘徊していると、今回のこの手法がたくさん見つかりました。以前は見つからなかったんですけどね。以前からあったのか。ただ、検索がへたくそで見つける事が出来なかっただけなのか。ちょっと沈没気味ではあります。またしても無知損。

このファイルにクエリ文字列を付加する方法であれば、キャッシュも有効にしつつcssやjavascriptファイルの更新を確実に反映させることができるとのことで、こりゃまさに目からうろこです。
やり方は何のことはなくて指定するスタイルシートのファイルに識別用の文字列を付加するだけとのこと。

<link rel="stylesheet" href="http://strix.main.jp/wp-content/themes/first/style.css?ver=20141002165350" type="text/css" />

style.css?ver=20141002165350 の ?ver=20141002165350 の部分です。これはクエリ文字列とかパラメータとか呼ばれます。formでGETを使って情報を送信する時もこれと全く同じ方法です。formでいくつもの情報を送信する場合は”&”でつなげて?post=47824&action=edit&message=10などとして送信されるわけです。
で、自分などは単純なもので、そうなると指定するファイル側のたとえばver=の設定はどうやってすれば良いのだろうかと、再びネットを徘徊して探し回ってみたりしたのですが、そんなことは全く必要のないことでした。
というのは、付加するクエリ文字列はver=でもv=でもdate=でもそれこそ何でもよさそうで、要はブラウザがこのファイルを読みこむ時にこのクエリ文字列をも含めてキャッシュされるとのことで、クエリ文字列が違うことでファイルも別のものと認識され、キャッシュを使用せず読み込んだファイルの内容を反映させるとのことでした。
ということですが、更新するたびにheader.phpなどの変更をするのも面倒ではありますので、できる方々は該当ファイルの更新日時などを利用して自動的に変更されるようにしているのですね。自分もそれを利用させていただきました。

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' );echo '?ver=' . date( 'YmdHis', filemtime( get_stylesheet_directory() . '/style.css' ) ); ?>" type="text/css" />

と、いうことにしてます。
php の filemtime は指定したファイルの更新時刻を取得しますが、時刻の表記はUNIXタイムスタンプ値であり馴染めない値なので date で馴染みやすい数値にしているということです。
そしてこれは css のスタイルシートファイルだけではなく、javascript のファイル指定にも使えるということで、もちろん wordpress においてだけではなく、他の php や html のサイトにおいても適応可能ということなのでした。ありがたや～。

« wp enqueue style と wp enqueue script »

wordpressにはスタイルシートとjavascript 用のファイルを、依存する関連するファイルも含めて依存関係に従った適切なタイミングで生成されたページにリンクする関数があらかじめ用意されています。<link>や<script>タグを使用してテンプレートファイルに直に記述するのではなく、それらの関数を使用する方法が推奨されています。
これらの関数にもキャッシングに関わらず正しいバージョンがクライアントに送信されるようにするために使うバージョン番号を指定するためのパラメータがちゃんと用意されています。

<?php
	wp_enqueue_style( $handle, $src, $deps, $ver, $media );
?>

<?php
	wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
?>

パラメータはだいたい同じで以下の通り。

自分はというと以下のようにしてます。

<?php
	wp_enqueue_style( 'si_style', get_template_directory_uri() . '/style.css', false, filemtime( get_stylesheet_directory() . '/style.css' ) ), 'all' );
	wp_enqueue_script( 'si_jq', get_template_directory_uri() . '/si_jq.js', array('jquery'), date( 'YmdHis', filemtime( get_stylesheet_directory() . '/si_jq.js' ) ), true );
?>

まとめて書いて、header.php のwp_head() よりも前に記述すれば良いのですが、そうすると自js ファイルはwp_footer() で吐き出されますが、jquery 関連のファイルはwp_head() で吐き出されてしまうようです。全てのjquery 関連ファイルをwp_footer() で吐き出させるにはfooter.php においてwp_footer() の前に記述すればそのようになります。
ただし、codex において推奨されているのは以下のようにfunctions.php に記述して、ひとつのアクションフックでスクリプトとスタイルをエンキューする方法です。詳しくはcodex をご覧ください。

<?php
/**
 * スクリプトとスタイルを正しくエンキューする方法
 */
function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
?>