WordPressのCSS自動キャッシュクリア方法【キャッシュ対策】

UPDATE:

2022/07/07

CATEGORY:

WordPress

TAG:

WPカスタマイズ

CSSの自動キャッシュクリア方法(WordPress)
PHPを使わずにタイムスタンプを設定する
wp_enqueue_style()を使ってスタイルシートを登録する
date()関数でキャッシュの期間を指定する(PHP)
JSファイルのキャッシュを自動的にクリアする
CSSを反映させるための考え方
CSSが反映されないときはサーバーキャッシュをクリアする
キャッシュクリアの手間はなくすべき

CSSを編集してブラウザで確認したら反映されていない → ブラウザのキャッシュクリア。これってとても面倒ですよね。自動でキャッシュクリアして欲しいものです。

HTML・CSS編集を始めた人なら誰もが感じると思います。

解決策はとても簡単です。

CSSのタイムスタンプを設定すればキャッシュクリアの手間はなくなります。

この記事では、WordPressでCSS編集時の自動キャッシュクリア方法(タイムスタンプの設定)を解説します。WordPress以外のWeb制作でも利用可能です。

CSSの自動キャッシュクリア方法(WordPress)

WordPressで、CSSのタイムスタンプを設定してキャッシュをクリアする方法です。タイムスタンプを設定するとファイルが新しい場合にCSSが更新されます。

方法は「PHPを使わずにタイムスタンプを設定する、wp_enqueue_style()を使ってスタイルシートを登録する」の2つです。

PHPを使わずにタイムスタンプを設定する
wp_enqueue_style()を使ってスタイルシートを登録する

おすすめは後者のwp_enqueue_style()を使う方法です。WordPressではこちらが一般的です。

PHPを使わずにタイムスタンプを設定する

PHPを使わない自動キャッシュクリア方法です。WordPress以外の静的ページページでも利用できます。

<!-- HTML -->
<link rel="stylesheet" href="/style.css?ver=2022">

2022という部分がタイムスタンプですが、数字は何でもかまいません。

キャッシュと更新ファイルのタイムスタンプが同じになるので、ファイルは常に更新されるようになります。

wp_enqueue_style()を使ってスタイルシートを登録する

wp_enqueue_style()でスタイルシートを登録すると自動的にタイムスタンプが出力されます。

//wp_enqueue_style()で登録する
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style(
    'my_style',
    get_stylesheet_directory_uri().'/style.css',
  );
}, 11);

タイムスタンプは次のように出力されます。

.../style.css?ver=5.9.1

タイムスタンプにWordPressのバージョンが追加されています。これで自動的にキャッシュがクリアされてCSSが反映するようになります。

get_stylesheet_directory_uri()は親テーマのスタイルシートが置かれているディレクトリ(親テーマの直下)を取得します。子テーマのCSSを取得する場合はget_template_directory_uri()を使ってください。

スタイルシートを読み込む場合、$priorityは必ず11以上に設定します。10以下にすると、WordPressのスタイルシートが後に読み込まれて上書きされる可能性があります。非常に重要なので注意してください。

wp_enqueue_style()はWordPressの関数です。WordPress以外では使用できません。

wp_enqueue_style()でスタイルシートを登録する方法

date()関数でキャッシュの期間を指定する(PHP)

タイムスタンプ部分にdate()を使用します。

date()は日付や時間を指定したフォーマットで出力するPHP関数です。ファイルが読み込まれるときの時間を出力してくれるのでキャッシュの期間を調整できます。

キャッシュクリアはしたいけれど、ある程度キャッシュも利用したいという人におすすめです。

header.php内に書く場合

<!-- header.php内に書く場合 -->
<link rel="stylesheet" href=<?php echo get_stylesheet_directory_uri() . '/style.css?ver=' . date("YmdHi"); ?>>

wp_enqueue_style()で登録する場合

//wp_enqueue_style()で登録する場合
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style(
    'my_style',
    get_stylesheet_directory_uri().'/style.css',
    [],
    date("YmdHi"),
  );
}, 11);

date(“YmdHi”)と書くと202202241230といった「分」までの時間を出力します。この場合キャッシュの期間は1分です。秒単位まで設定したいときはdate(“YmdHis”)。

JSファイルのキャッシュを自動的にクリアする

タイムスタンプはスタイルシートだけに限らず、Jsファイルや画像に対しても使えます。

WordPressでJavaScriptを登録するときはwp_enqueue_script()を使用します。

//wp_enqueue_script()
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_script('main', get_stylesheet_directory_uri() . '/js/main.js', [], false, true);
});