WordPressのブロックテーマでtheme.jsonが反映されない時の対処法

WordPressのブロックテーマはtheme.jsonで色、タイポグラフィ、レイアウトなどを一元管理できます。しかし、変更を加えても反映されないという問題が起きることがあります。この記事では、キャッシュが原因のケースとファイルパスが原因のケースを分けて、それぞれの対処法を紹介します。

症状

ブロックテーマのtheme.jsonを編集して保存したのに、サイト上に反映されない状態が続きます。

  • エディタを再読み込みしても変更が見当たらない
  • サイトを表示してもスタイルが古いままである
  • 色やフォントサイズの指定が変わっていない

環境情報：

  • WordPress 6.0 以上（ブロックテーマ対応）
  • ブロックテーマを使用している

原因

原因は大きく2つのパターンに分けられます。

ケース1：キャッシュが古い状態を保持している場合

WordPressやPHPは、パフォーマンス向上のため、ファイル内容をメモリに一時保存（キャッシュ）します。theme.jsonの変更をキャッシュが読み込まないと、実際のファイルが更新されていても古い内容が使われ続けます。

特に以下の環境でよく見られます：

  • キャッシュプラグイン（WP Super CacheやW3 Total Cacheなど）を導入している
  • サーバー側で OPcache が有効になっている
  • WordPress 管理画面を開いたまま時間が経っている

ケース2：theme.jsonのファイルパスが正しくない場合

ブロックテーマの構造では、theme.jsonはテーマのルートディレクトリに置く必要があります。ファイルが別の場所に存在する、またはtheme.jsonの記述内でパスの指定が誤っている場合、WordPressが設定を認識できません。

よくあるケース：

  • テーマフォルダ内の子フォルダにtheme.jsonを置いている
  • ファイル名の大文字小文字が誤っている（例：Theme.jsonなど）
  • テーマの有効化時に、theme.jsonが含まれていないテーマディレクトリを指定している

解決手順

ケース1：キャッシュが原因の場合

手順1：キャッシュプラグインの一時無効化

キャッシュプラグインを使っている場合、一度無効化してみます。

  1. WordPress管理画面にログインします
  2. 「プラグイン」から対象のキャッシュプラグイン（WP Super CacheやW3 Total Cacheなど）を見つけます
  3. 「無効化」をクリックします
  4. サイトをブラウザで再読み込みし、変更が反映されたか確認します

もし反映されたら、キャッシュが原因と確定です。プラグインの設定を見直すか、継続して使う場合はtheme.jsonの変更時に自動で古いキャッシュを削除する設定を確認します。

手順2：ブラウザキャッシュの削除

サーバー側でキャッシュが更新されたとしても、ブラウザがローカルに古いCSSやJavaScriptを保持していることがあります。

  • Ctrl+Shift+Delete（Windows）または Cmd+Shift+Delete（macOS）でブラウザの開発ツールを開きます
  • アプリケーションタブで「キャッシュストレージ」を確認し、関連するキャッシュを削除します
  • または、シークレットウィンドウで該当のサイトにアクセスして、キャッシュの影響を受けない状態で動作確認します

手順3：OPcacheの再起動（サーバー側キャッシュ）

サーバー側で OPcache が有効な場合、直接削除することはできませんが、再起動で解放されます。

# レンタルサーバーの場合、サーバー管理画面からphp.iniを確認します
# または、ConoHa、Xserver、ロリポップなどの場合は管理画面から「キャッシュ削除」を実行します

多くのレンタルサーバーでは、管理画面内にキャッシュ削除や再起動のボタンがあります。ドキュメントを確認して実行してください。

完了確認

キャッシュ削除後、ブラウザの開発者ツール（F12）を開いて、ネットワークタブで CSS ファイルの読み込みを確認します。ファイルサイズやリクエスト時刻が更新されていれば、キャッシュが刷新されています。

ケース2：ファイルパスが原因の場合

手順1：theme.jsonの配置位置を確認

FTPクライアントまたはファイルマネージャーで、テーマディレクトリの構造を確認します。

/wp-content/themes/your-theme/
├── theme.json          ← ここにある必要があります
├── style.css
├── functions.php
└── ...その他のファイル

theme.jsonがサブフォルダ（例：/assets/や/config/）に入っていないか確認してください。もし別の場所にあれば、テーマのルートに移動します。

手順2：ファイル名が正しいか確認

ファイル名の大文字小文字を確認します。Linux/Unixベースのサーバーでは大文字小文字が区別されるため、Theme.jsonやTHEME.JSONでは認識されません。

正しい名前：theme.json（すべて小文字）

PowerShell
# SSHでサーバーに接続している場合
ls -la /path/to/wp-content/themes/your-theme/ | grep -i theme.json

上記コマンドでtheme.jsonが見つかることを確認します。見つからなければ、ファイルを新規作成するか、正しい名前にリネームします。

手順3：theme.jsonのスキーマが有効か確認

theme.jsonの JSON 構造が正しいか確認します。JSON が無効だと、WordPressがファイル全体を読み込めません。

JSON
{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#ffffff",
          "name": "White",
          "slug": "white"
        }
      ]
    }
  },
  "styles": {}
}

VS Code などのエディタで JSON を検証するか、JSONLint などのオンラインツールで構文を確認します。文法エラーがあれば修正します。

手順4：テーマが正しく有効化されているか確認

WordPress管理画面の「外観 > テーマ」で、対象のブロックテーマが「有効化」状態になっているか確認します。もし無効になっていれば、有効化してください。

有効化した直後は、ブラウザのキャッシュもクリアしてから動作確認します。

完了確認

WordPress管理画面の「エディタ（サイトエディタ）」を開き、左パネルから「スタイル」を選択します。theme.jsonで指定した色やフォントサイズが表示されていれば、ファイルが正しく認識されています。

再発防止・恒久対応

キャッシュプラグインの設定調整

キャッシュプラグインを継続して使う場合、theme.jsonの変更時に自動でキャッシュが削除されるようにプラグインの設定を確認します。

  • WP Super Cache：テーマファイルの変更を検知するオプションが有効か確認
  • W3 Total Cache：「Page Cache」「Browser Cache」の TTL（有効期限）を短めに設定

テーマファイルの管理ワークフロー

ブロックテーマを運用する場合、theme.jsonの変更フローを決めておくと再発を防げます：

  1. theme.jsonを編集したら、まずローカル環境で動作確認
  2. サイトエディタ経由で変更した場合は、自動的にtheme.jsonが更新されるため、バージョン管理（Git）でファイルの変更を記録
  3. 本番環境にデプロイする前に、キャッシュ削除のタイミングを計画

定期的な動作確認

theme.jsonを編集した直後に、ブラウザの開発者ツールで以下を確認する習慣をつけます：

  • CSS ファイルがいつ読み込まれたか（ネットワークタブ）
  • 実際のスタイル適用状況（要素検査ツール）

まとめ

WordPressのブロックテーマでtheme.jsonの変更が反映されない場合、キャッシュとファイルパスの2つをまず確認します。キャッシュプラグインやOPcacheが古い内容を保持していれば削除し、ファイルの配置位置とファイル名（小文字）が正しいか確認することで、多くの場合は解決できます。theme.jsonは定期的に更新するファイルのため、変更が反映される仕組みを理解しておくと、運用がスムーズになります。

read next