【WordPress】CSSが反映されない？開発中に便利なキャッシュ対策まとめ

WordPressでテーマを編集していると、

「style.cssを修正したのに反映されない！」

という場面に出会うことがあります。

実際、私も子テーマのスタイルシートを編集したのに、変更が一切反映されず困ったことがありました。

検証ツールを見ても、新しいスタイル自体が読み込まれていない…。

原因のひとつは「ブラウザのキャッシュ」です。

ここではCSSを反映させる、キャッシュの使い方について解説します。

キャッシュ以外に考えられる原因をまとめた記事もあるので、お困りの方はご参照ください👇

なぜCSSが反映されないのか？

ブラウザは、表示を速くするために一度読み込んだCSSや画像をキャッシュとして保存しています。

そのため、CSSを更新しても、ブラウザが「前に読み込んだ古いCSS」を使ってしまい、新しいデザインが反映されないことがあります。

普段は便利なキャッシュですが、開発中は厄介ですよね。

一番シンプルなのは スーパーリロード（キャッシュを無視して再読み込み） です。

普通のリロード（🔄）ではキャッシュが残るので、スーパーリロードを使うことで最新のCSSを読み込ませられます。

私の場合も、通常のリロードでは変化なしでしたが、スーパーリロードをしたら変更が反映されました。

Chromeの開発者ツールには、キャッシュを完全に無効化する機能 があります。

こうすると、そのタブでの操作中は毎回最新のファイルを取得してくれるので、開発中はとても便利です。

👉 注意点：この設定は 自分のブラウザにだけ適用 されます。他のユーザーには影響しないので安心してください。

本番公開する際は、ユーザーのキャッシュを突破する必要があります。

その方法が キャッシュバスティング です。

WordPressでは、テーマ内でCSSを読み込むときにバージョン番号を指定できます。

wp_enqueue_style(
  'my-style',
  get_stylesheet_uri(),
  array(),
  '2.0' // ← バージョン番号を変える
);

style.css?ver=2.0 → style.css?ver=2.1 のように番号を変えることで、ユーザーのブラウザは「新しいファイル」と認識し、キャッシュを突破できます。

開発中は time() を使って毎回ユニークなバージョン番号を生成することも可能ですが、公開時は固定のバージョン番号を更新するほうがおすすめです。

これで「CSSを修正したのに反映されない！」という悩みは大幅に減るはずです。