ホームページ制作のご依頼・ご相談はCOLERSへ

【WordPress】【CSS】テーマのCSSを更新した際に古いキャッシュを参照せずページを表示するテクニック

  • WP
  • CSS

WEBサイトを制作する際、CSSについては外部ファイルとして参照することが一般的です。

その場合はブラウザ側でキャッシュが働いてくれるのですが、
CSSを更新したのに反映しないという開発中には不便な状況に陥ることが多いです。

都度スーパーリロードを行いキャッシュをクリアすることもできるのですが、
クライアントからご依頼をいただいている場合などは毎回その点を説明し、
お手数をおかけするのもメリットが無いですよね。

同じ参照ファイルであることがキャッシュのフックになっていますので、
一般的な対策として参照するCSSファイル名にクエリを付ける方法があります。

今回はWordPressを想定して基本的にはキャッシュを活かしたまま、
CSSファイルを更新した場合に限りファイルの更新日がクエリとして付与されるコード
ご紹介します。

目次

実際のコードと解説

functions.php

テーマによってCSSの読み込み方法が異なりますが、
一般的にはfunctions.phpwp_enqueue_styleを利用して
テーマのスタイルシートを読み込む方法が推奨されます。

オリジナルテーマで開発中の場合は以下のコードを流用いただき、
style.cssを読み込むようにしていただければ問題ありません。

/* ファイルの更新日を取得
-------------------------------------------------------------------*/
if ( !function_exists( 'get_file_date' ) ):
	function get_file_date($file_name){
		if (file_exists($file_name)) {
			return date('Y-m-d-His', filemtime($file_name));
		}
	}
endif;

/* テーマにstyle.cssを追加
-----------------------------------------*/
if ( !function_exists( 'add_theme_style_sheet' ) ):
	function add_theme_style_sheet(){
    wp_enqueue_style('style',get_stylesheet_uri(), array(), get_file_date(get_stylesheet_directory().'/style.css'));
	}
endif;
add_action('wp_enqueue_scripts', 'add_theme_style_sheet');

filemtime

PHPの関数であるfilemtimeを利用してstyle.cssの更新日を取得しています。

今回のサンプルではstyle.css以外のファイルでも流用できるように、
オリジナルの関数としてget_file_dateを定義し、日付の形式で返すようにしています。

また、ファイルの有無をfile_existsで確認し、
ファイルが存在する場合のみ値を返すようにしました。

wp_enqueue_style

WordPressでは外部のCSSファイルやJavaScriptファイルを読み込むための関数として、
wp_enqueue_stylewp_enqueue_scriptが用意されています。

これらの関数を利用することで複数のファイルを読み込む場合にも依存関係を整理し
安全にサイトに外部ファイルを追加することができます。

最終的にこれらの関数を利用してサイトに追加するには
wp_enqueue_scriptsのフック(イベントに対するトリガー)に関数を登録します。

最後に

サイトの高速化に対してキャッシュは重要なものですが、
更新と同時にキャッシュもクリアされていることが理想ですよね。

今回はWordPressを前提としてサンプルをご紹介しましたが、
単純な静的サイトでもクエリを付与すれば理屈は同じですので参考になれば幸いです。

  1. SNIPPET
  2. WordPress
  3. 【WordPress】【CSS】テーマのCSSを更新した際に古いキャッシュを参照せずページを表示するテクニック