2026年5月20日

WordPressのカスタマイザーが開かない場合の解決方法

テーマ・デザイン

はじめに

カスタマイザー（外観 → カスタマイズ）が開かない・ローディングで止まる・真っ白になる場合、多くはプラグイン競合またはJavaScriptエラーが原因です。ブラウザのDevToolsとプラグイン無効化で原因を特定できます。

症状・原因

カスタマイザーを開くとローディングアイコンが回り続ける
カスタマイザーを開くと真っ白になる
プレビュー部分だけ表示されず左パネルも出ない
特定のプラグインを有効にしているときだけ発生する

解決手順

ステップ1：ブラウザのコンソールでエラーを確認する

1. カスタマイザーURLを開く:
   https://example.com/wp-admin/customize.php

2. F12 → Consoleタブを開く

3. 赤いエラーメッセージを確認:
   → "Uncaught TypeError" → JavaScriptの構文エラー
   → "Failed to load resource" → CSS/JSファイルが404
   → "jQuery is not defined" → jQueryの読み込み順序の問題

4. NetworkタブでステータスXXXを確認:
   → 404: リソースが存在しない
   → 500: サーバーエラー
   → 403: パーミッション不足

ステップ2：プラグインの競合を確認する

# すべてのプラグインを一時無効化
wp plugin deactivate --all

# カスタマイザーを開いて動作確認
# → 動いた場合: プラグインが原因

# プラグインを1つずつ有効化して原因を特定
wp plugin activate plugin-slug-1
# カスタマイザー確認 → 問題なし

wp plugin activate plugin-slug-2
# カスタマイザー確認 → 問題発生！ → このプラグインが原因

# 原因特定後、残りを有効化
wp plugin activate --all
wp plugin deactivate problem-plugin-slug

ステップ3：テーマを一時的に変更して確認する

# デフォルトテーマに切り替えてカスタマイザーを確認
wp theme activate twentytwentyfive

# カスタマイザーが開く → 元のテーマが原因
# カスタマイザーが開かない → テーマ以外が原因

# 元のテーマに戻す
wp theme activate your-theme-slug

# テーマのfunctions.phpにエラーがないか確認
php -l wp-content/themes/your-theme/functions.php

ステップ4：キャッシュとトランジェントをクリアする

# WordPressのキャッシュをクリア
wp cache flush
wp transient delete --all

# カスタマイザーのセッションデータをクリア
wp option delete "_transient_customizer*" --match

# オブジェクトキャッシュプラグインのキャッシュも削除
wp eval "
\$plugins = ['w3-total-cache', 'wp-super-cache', 'litespeed-cache'];
foreach (\$plugins as \$p) {
    if (is_plugin_active(\$p . '/' . \$p . '.php')) {
        echo \$p . ' は有効です。' . PHP_EOL;
    }
}"

ステップ5：wp-config.phpでデバッグを有効化する

// wp-config.php に追加
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
define('SCRIPT_DEBUG', true);  // 圧縮されていないJS/CSSを使用

// カスタマイザー関連のデバッグ
define('CUSTOMIZE_SNAPSHOTS_DEBUG', true);

# エラーログを確認
tail -50 wp-content/debug.log | grep -i "customiz"

# PHPメモリ使用量を確認
wp eval "echo memory_get_usage(true) / 1024 / 1024 . ' MB' . PHP_EOL;"
wp eval "echo WP_MEMORY_LIMIT . PHP_EOL;"

ステップ6：カスタマイザーのURLで直接アクセスする

# カスタマイザーに直接アクセスするURL
wp eval "echo admin_url('customize.php') . PHP_EOL;"

# 特定のページをプレビューしてカスタマイザーを開く
wp eval "echo admin_url('customize.php?url=' . urlencode(home_url('/'))) . PHP_EOL;"

# カスタマイザーのAJAXが正常か確認
wp eval "
\$response = wp_remote_get(admin_url('admin-ajax.php?action=customize_refresh_nonces'));
echo wp_remote_retrieve_response_code(\$response) . PHP_EOL;
"

注意事項

SCRIPT_DEBUG を有効にすると、圧縮されていないJavaScriptが読み込まれ、エラー箇所の特定が容易になります
カスタマイザーの変更は保存するまで公開されません。トラブル時も公開済みサイトへの影響はありません
Internet Explorer では動作しない場合があります。Chrome や Firefox の最新版を使用してください

まとめ

カスタマイザーが開かない場合は「F12でJSエラー確認 → プラグイン全無効化 → デフォルトテーマに切り替え」の順で原因を絞り込みます。SCRIPT_DEBUG を有効にすることで詳細なエラー情報が得られます。

Post Views: 11