BBH
-Biz Branding Hub-
投稿日 : 
2019/08/28
更新日 : 
2019/08/28

WordPressでCSSのクエリパラメタを自動更新する

WordPressでCSSを変更したい場合は、該当のCSSファイルを更新し、WordPressにアップしてやればいいです。
しかし、訪問者のブラウザにCSSがキャッシュされてしまうと、新しいスタイルが摘要されない可能性があります。
今回はCSSを更新した時に、確実に新しいスタイルで閲覧されるための方法を紹介します。

そもそもキャッシュとは何か

標準的なブラウザでは、webサイトを閲覧した時にいろいろなデータをブラウザに保存する機能があります。
そうすることで、再び同じwebサイトに訪れた時に、そのデータを使用することで表示を速くすることができます。
こうした表示を速くするためにブラウザ内部に保存するデータのことをキャッシュと言います。

ブラウザキャッシュで起こる最新のスタイルが当たらない問題

キャッシュされる対象としては、javascriptや画像データなどがあるのですが、CSSもその対象となります。
キャッシュは非常に便利な機能なのですが、場合によっては問題となることがあります。
その一つが、最新のCSSが当たらないという問題です。

例えば、ユーザーがX月1日にサイトを訪問したとします。
その時点で、CSSがキャッシュされます。
X月2日にサイト運営者がデザイン変更のためCSSを更新して、WordPresssにアップしました。
再びユーザーがX月3日にサイトを訪問します。
既にブラウザに1日時点のCSSがキャッシュされているので、そのCSSを使ってサイトを表示します。
これが、最新のスタイルが当たらないという問題です。

ブラウザキャッシュ問題の解決方法

では、一度サイトに訪問した閲覧者はずっと過去のCSSでサイトを見るしかないのでしょうか。
実は、閲覧者のブラウザキャッシュを強制的に更新する方法があります。
そのために使用するのが、クエリパラメタです。

クエリパラメタとは、以下の「?」以下の文字列のことです。
「?190824212300」の部分ですね。

https://bbh.bz/wp-content/themes/WP_bbh_theme/library/css/bbh-style.css?190824212300

これは、サーバにページやファイルを要求する際のパラメタ―になります。
これをつけてもつけなくても、要求するページ自体は同じ、

https://bbh.bz/wp-content/themes/WP_bbh_theme/library/css/bbh-style.css

になります。
つまり、これをつけたからと言ってCSSファイル自体に何か影響があるわけではないということです。

では、どういう意味があるのかと言うと、ブラウザがキャッシュする際は、このパラメータを含んだフル名称でキャッシュを行うということです。
つまり、

https://bbh.bz/wp-content/themes/WP_bbh_theme/library/css/bbh-style.css?190824212300

https://bbh.bz/wp-content/themes/WP_bbh_theme/library/css/bbh-style.css

は別物として認識するわけです。

例えば、訪問者がX月1日に訪問したとします。
X月2日にサイト運営者がCSSを変更します。
その際、ページからの参照URLも変更します。
仮に、「?ver=1」とでもつけたとしましょう。
すると、X月3日に再訪問した訪問者は、「?ver=1」がついたCSSをキャッシュしていないので、最新のCSSをサーバに要求します。
CSSと一緒にクエリパラメータも更新することで、最新のスタイルでサイトを見せることができるのです。

WordPressでCSSのパラメータを自動更新する

クエリパラメタを更新することで、CSSを最新化することがわかりました。
しかし、この方法には問題があります。

まず第一に面倒です。
CSSを更新するたびに、そのCSSを参照している箇所のパラメタを更新する必要があります。
参照個所が増えれば増えるほど、その手間は大きくなります。

そして、もっと問題なのが修正漏れが発生する可能性があるということです。
CSSの修正とセットで参照個所のパラメタも更新しないといけないと意識していればいいですが、場合によっては忘れてしまうこともあります。
どちらかと言うとこちらの方が問題ですね。

この問題を回避するには、CSSの更新を検知して、参照個所のパラメタも自動で変わってくれれば良いです。
そのためには、function.phpに以下のような記載を追加すればOKです。

function load_custom_css() {
  // cssを登録
  wp_register_style( 'custom-style', 
                     get_css_path_with_update_param('[CSSのファイルパス]'),
                     '', '1.0', 'all' );
  wp_enqueue_style( 'custom-style' );
}

/* クエリパラメータとしてファイルの更新日を付与したCSSのパスを取得 */
function get_css_path_with_update_param($css_path) {
  date_default_timezone_set('Asia/Tokyo');
  return get_stylesheet_directory_uri() . $css_path . '?' . date("ymdHis", filemtime(get_stylesheet_directory() . $css_path));
}

add_action('wp_enqueue_scripts', 'load_custom_css');

まず、load_custom_cssでCSSの読み込み設定をしています。
それを add_action('wp_enqueue_scripts', 'load_custom_css'); で wp_enqueue_scripts にフックさせています。
要は、 wp_enqueue_scripts を実行するときに、load_custom_cssも実行するように指定しています。
wp_enqueue_scripts はWordPressがページを表示する際に実行する処理だと思ってもらえばいいです。
ここにフックすることで指定のCSSを読み込ませることができます。

load_custom_css では、まずCSSの登録を行っています。

wp_register_style( 'custom-style', 
                     get_css_path_with_update_param('[CSSのファイルパス]'),
                     '', '1.0', 'all' );

の部分ですね。
ここで、まず自作のCSSをcustom-styleという別名で登録しています。

そして、

wp_enqueue_style( 'custom-style' );

の部分でキューに登録しています。
キューに入れたものがWordPressでページを表示する時に読み込まれると思ってもらえればいいです。

重要なのは、wp_register_styleでの登録処理です。
この処理の第二引数でCSSのパスを指定するのですが、その指定部分が

get_css_path_with_update_param('[CSSのファイルパス]')

となっています。
この処理は、CSSのパスにクエリパラメタを付与したものを取得する処理となっています。
以下の処理ですね。

function get_css_path_with_update_param($css_path) {
  date_default_timezone_set('Asia/Tokyo');  // タイムゾーンを日本に設定(php側で設定されてれば不要)
  return get_stylesheet_directory_uri() . $css_path . '?' . date("ymdHis", filemtime(get_stylesheet_directory() . $css_path));
}

ここで重要なのが「date("ymdHis", filemtime(get_stylesheet_directory() . $css_path)」の部分です。
これは、CSSファイルの更新日をyymmddHHmmss形式で取得する処理になっています。
例えば、「2019/08/25 10:15:22」ならば、「190825101522」となります。
つまり、CSSを更新すると、その更新日を取得しこのパラメータも更新されるというわけです。
これによって、CSSがブラウザキャッシュによって最新化されないという問題を回避することができるのです。

WordPressの奥深い部分の処理が絡んでくるので少し難しいかもしれません。
まずは、
・wp_register_styleにパラメタ付きのCSSのパスを登録する
・wp_enqueue_styleでキューに登録する
・wp_enqueue_scriptsにフックさせて読み込ませる
ということを意識するといいでしょう。

Profile

管理人プロフィール

都内でITエンジニアをやってます。
変遷:中規模SES→独立系SIer→Webサービス内製開発
使用技術はその時々でバラバラですが、C#、AWSが長いです。
どちらかと言うとバックエンドより開発が多かったです。
顧客との折衝や要件定義、マネジメント(10名弱程度)の経験あり。
最近はJava+SpringBootがメイン。

Recommend