【WordPress】キャッシュ削除せずに CSS の変更を反映させる方法

どうも、こうすけ（@kosuke_upd）です。

今回は、WordPress で CSS を変更した後に、キャッシュを削除せずともスタイルの変更を強制的に反映させる方法を紹介します。

WordPress の CSS を変更した際に、自分側で変更を確認するならブラウザのキャッシュを削除すれば良いので特に問題と思いますが、ユーザー側のブラウザではキャッシュが残ってしまっているため、しばらくの間変更が反映されないということがあります。

また、WEB 制作を受託している場合、CSS の変更をクライアントに確認してもらう際に、クライアント側のブラウザではキャッシュが残っているために「前と変わってないんだけど…」と言われてキャッシュの削除を説明するなんて状況もよくあることだと思います。かなり面倒で時間のもったいないやり取りですよね。

というわけで、今回は WordPress でキャッシュを削除せずとも CSS の変更を強制的に反映させる方法を2パターン紹介します。それぞれ状況に応じて使い分けると良いので、ぜひそれぞれの方法からご自身にあったほうをお試しください。

方法1. 手動でファイル名にクエリを付与

概要説明

1つ目の方法は、CSS の変更後、手動でファイル名にクエリを付与するという方法です。こちらが最も一般的な方法だと思います。

通常、HTML ソースから WordPress テーマの CSS ファイルを呼び出している箇所を見ると、下記のようになっていると思います。
※下記ソースはわかりやすさ優先のため簡略化して書いています。

<link rel="stylesheet" href="style.css">

そして、ファイル名にクエリを付与すると下記のようになります。ファイル名の末尾に ?ver1_0_0 というのが追加されていますね。

<link rel="stylesheet" href="style.css?ver1_0_0">

HTML は上記2つのファイルを同じファイルだと認識しますが、ブラウザは別ファイルと認識します。つまり、ブラウザは新しいファイルと認識するので、CSS の変更が反映されるのです。

CSS の変更を強制的に反映させたいときに、その都度クエリの部分を変更していけば良いということです。

具体的なやり方

では、上記を WordPress で実装するための具体的なやり方を説明します。

編集するファイルは functions.php のみです。functions.php 内に下記のような箇所があると思います。こちらは、WordPress が生成したページに CSS ファイルを追加するためのコードです。

■ functions.php (変更前)

function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() . '/style.css', array() );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

上記コードにクエリを追記し、下記のようにしてみてください。

■ functions.php (変更後)

function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() . '/style.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

functions.php の変更を保存後、HTML ソースを確認してみると、CSS ファイルを読み込む箇所は下記のように変更されているはずです。

<link rel="stylesheet" href="style.css?ver1_0_0">

function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() . '/style.css?ver=1.0.0', array() );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

あとは、CSS ファイルを編集する度に functions.php 内の編集した箇所のクエリを 1.0.1 といったように変更すれば、ブラウザは別ファイルとして認識してくれるのでキャッシュを気にせずとも CSS の変更を強制的に反映させることができます。

方法2. 自動でファイル名にクエリを付与

概要説明

2つ目の方法は、CSS の変更後、自動的にファイル名にクエリが付与されるという方法です。こちらは楽ではありますが、使用するなら開発時のみにすることを推奨します。

というのも、この方法を使用すると、キャッシュの意味がなくなってしまうからです。

通常、HTML ソースから CSS ファイルを呼び出している箇所を見ると、下記のようになっていますよね。

<link rel="stylesheet" href="style.css">

そして、こちらの方法でファイル名にクエリを付与すると下記のようになります。ファイル名の末尾に年月日と時間がクエリとして追加されていますね。

<link rel="stylesheet" href="style.css?201904040220">

自動でクエリを付与する方法では、ページを更新するごとにクエリがそのときの年月日と時間に変更されるので、いちいち手動でクエリを変更しなくても良いのです。

しかしよく考えてみると、1分ごとにクエリが変更されるということは、キャッシュの意味がなくなってしまいます。そのため、基本的にはこちらの方法は使用しないほうが良いです。ただし CSS の編集時はいちいちキャッシュを削除しなくてもよくなるので、開発時のみこちらを適用するというのは良いですね。

具体的なやり方

では、上記を WordPress で実装するための具体的なやり方を説明します。

編集するファイルは functions.php のみです。functions.php 内に下記のような箇所を編集します。
※方法1と同じ箇所です。

■ functions.php (変更前)

function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() . '/style.css', array() );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

上記コードにクエリを追記し、下記のようにしてみてください。

■ functions.php (変更後)

function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() . '/style.css' . date('YmdHi'), array() );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

functions.php の変更を保存後、HTML ソースを確認してみると、CSS ファイルを読み込む箇所は下記のように変更されているはずです。
※クエリ部分は、ページを読み込んだときの時刻になります。下記の場合、2019年4月4日2時20分にページを読み込んだ場合です。

<link rel="stylesheet" href="style.css?201904040220">

こちらの方法では、一度上記の設定をすればあとは1分ごとにクエリが変更されるので、キャッシュを気にすることも手動でのクエリの変更作業も不要で、CSS の変更をほぼリアルタイムで反映させることができます。

ただし、先程も説明したように、こちらの方法を適用するとキャッシュの意味がなくなるので、基本的には使用せず開発時のみにすることをおすすめします。

最後に

今回は、WordPress で CSS を変更した後に、キャッシュを削除せずともスタイルの変更を強制的に反映させる方法を2つ紹介しました。

基本的には 方法1 で紹介した手動でクエリを付与する方法を使用し、方法2 に関しては開発時（CSS の編集時）のみ使用するというのが最も良いと思います。

CSS ファイル名にクエリを付与することで、ユーザーやクライアントの環境にも適切にサイトの変更を反映させられるので、ぜひ今回紹介した方法をお試しください。