[WordPress対応]PHPでCSSのキャッシュに左右されず常に最新バージョンを読み込ませる方法

どうもふうやです。

現在このサイトではサルワカさんのSangoというWordpressのテーマを利用しています。

開設したばかりのサイトですが早速Contact Form7を導入しました。

そしてSubmitボタンだけスタイルがデフォルトのままだったため、CSSファイルにスタイルを記述しました。

キャッシュが適用されるのは十分承知の上でしたが、それに左右されず常に最新バージョンのCSSを読み込ませたいため子テーマを少し弄りました。

またこの記事では通常のPHPサイトでもキャッシュに左右されず常に最新バージョンのCSSを読み込む方法も紹介します。

キャッシュに左右されずPHPでCSSを常に最新バージョンで読み込ませる

WordPress製のサイトの場合

簡易的に実装する場合

WordPressのテーマでは”wp_enqueue_style”関数を利用してCSSファイルを読み込んでいる事例が多いです。

その”wp_enqueue_style”にVersion指定をして常に最新バージョンのCSSファイルを読み込ませる簡易実装方法です。

PHP

wp_enqueue_style('任意のハンドル名', get_stylesheet_directory_uri() . '/style.css?ver'.time());
上記ソースコードではVersionとしてUnixのタイムスタンプを割り当てています。
これで無理やり常に最新のCSSを読み込むことが出来るのですが、何か汚いコードですね。

ファイルの更新時間をVersion指定する場合

ファイルの更新時間をVersion指定すればもっとキレイな書き方が出来るはずです。
まずは関数!

PHP

function mtime(){
	$mtime = filemtime( get_stylesheet_directory() . '/style.css' );
	return $mtime;
}
filemtime()でファイルの更新時間を取得しています。
こちらもUnixのタイムスタンプが割り当てられています。
そして
PHP

wp_enqueue_style('任意のハンドル名', get_stylesheet_directory_uri() . '/style.css?ver'.mtime());
上記のようにVersionを先程の関数指定することで、ファイルの更新時間をCSSファイルの最新バージョンとして扱うことが出来ます。
cssファイルのディレクトリやファイル名は適宜自分の環境に合わせるようにしてください。

通常のPHPサイトの場合

通常のPHPサイトでも上記のようにCSSファイルを常に最新バージョンで読み込ませる事が可能です。

簡易的に実装する場合

PHP

<link href="css/style.css?ver<?php echo time(); ?>" rel="stylesheet">
こちらは読み込むたびにUnixのタイムスタンプを割り当てている方法になります。
もちろん美しいコードとは言えないので、通常のPHPサイトでもファイルの更新時間をバージョンとして扱う方法を書いておきます。

ファイルの更新時間をCSSの最新バージョンとする場合

PHP

<link href="css/style.css?ver<?php echo filemtime('css/style.css'); ?>" rel="stylesheet">
関数化するほどでも無いので直接書きましたが、Wordpress製のサイトと同様にfilemtime()を利用してファイルの更新時間を最新バージョンとしています。
filemtime()の引数にはstyle.cssのパスを記述します。

まとめ

これで「キャッシュのせいで新しいスタイルが適用されない」なんてことが無くなります。
いちいちブラウザキャッシュを削除する必要がなくなるわけです。
ありがとうございました!!

コメントを残す

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