ブログ初心者・WordPress・Web制作の情報サイト

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

WordPressの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以外では使用できません。

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);
});

CSSを反映させるための考え方

スタイルシートに限らず、ファイルにはタイムスタンプを設定することができます。タイムスタンプはファイルの更新日時を表します。

ブラウザはファイルが古いか新しいかを判断してページリソースの読み込みを行っています。

そのため、自動キャッシュクリアで重要なのはキャッシュされたファイルよりもタイムスタンプを新しくすることです

ファイルのタイムスタンプが新しい(または同じ)ときブラウザは「ファイルが更新された」と認識してファイルを更新してくれます。

キャッシュされているファイルが古い → 新しいファイルが読み込まれる

CSSが反映されないときはサーバーキャッシュをクリアする

WebサイトのCSSが反映されずブラウザキャッシュをクリアしても変わらない場合の話です。

コードが間違っている可能性もありますが、まずはサーバーキャッシュを確認してください。

キャッシュを保存するのはブラウザだけではありません。サーバーもキャッシュを保存します。サーバーキャッシュはサーバーの設定画面で削除できます。

詳しくは各サーバーのサポートページを参考にしてください。

サーバーキャッシュをクリアしてもCSSが反映されないときは、CSSの記述に問題がある場合が多いです。

  • クラス名が間違っている
  • 詳細度が低い
  • !important の使いすぎ

キャッシュクリアの手間はなくすべき

WordPressでCSS編集時の自動キャッシュクリア方法を解説しました。

WordPressでテーマを編集する際に確実にぶち当たる問題なのです。

CSSが反映されないときキャッシュの存在を忘れて真っ先にコードを見直してしまう、そんな経験がある人はぜひ対処法を覚えておいてください。

方法はタイムスタンプを設定するだけです。

キャッシュクリアを自動化するということは、実質的にCSSのキャッシュを無効化するということも覚えておいてださい。

ブログを作りたい人へ。
ブログを始めたいと思っても実際に何をすればいいか分からないかもしれません。ブログを作りたい人へWordPressの始め方と必要な基礎知識を解説します。具体的なブログの始め方と関連記事を一覧にまとめているので参考にしてください。
Read More