ブラウザのキャッシュファイルをコントロールする

Web サーバから送出されるデータに Expires ヘッダーを追加して、ブラウザにキャッシュを持たせることで体感速度をあげてやるということは、良く行われていますね。
実際にどうやって設定するかは、以下のエントリで説明しています。

で、この時さらにキャッシュを長期間持ってもらおうと思って1年とか10年とか、とにかく長い有効期限を設定したりするわけです。
そうすると、困ったことに style.css とか修正しても、いつまでもブラウザのキャッシュが消えなくて、変更が反映されないとかいう事態も発生してしまう訳ですね。
そんな時は、名前を変えるとかクエリー文字列を変えるとかしてやれば良い訳です。
ただ style.css とか修正した時に、header.php の方を修正し直すのを忘れちゃうこともあるので、これを自動で更新して、ブラウザのキャッシュをコントロールしてあげようかという提案です。

例えば、テーマの style.css が変更されたときにクエリー文字列を自動で変更するには、テーマの header.php で、以下のように記述してあげます。
こうすることで、クエリー文字列として ?ver={ファイルの更新日時}が着きます。
style.css を変更したら自動で書き変わるので、安心ですね。

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

JavaScript の場合は、以下のように wp_enqueue_script() で読み込んであげましょう。
(もちろん CSS も、wp_enqueue_style() 使えば、同様に処理できます)
この関数の第4引き数がバージョン番号として script タグの src に追加されるので、安心です。

wp_enqueue_script(
  'example_js',
  get_stylesheet_directory_uri() . '/js/example.js' ,
  array() ,
  date('YmdHis', filemtime(get_stylesheet_directory() . '/js/example.js'))
  );

画像とかは名前を変えてアップロードし直した方が早いですね。

ブラウザのキャッシュファイルをコントロールする」への1件のフィードバック

  1. ピンバック: jQuery.autopagerをWordPressで利用して、ajaxで追加記事を読み込み、その後別のjsを動かす使い方 | Shinichi Nishikawa's blog

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください