【解決】WordPress「外観→カスタマイズ」が真っ白で表示されない不具合と解決法【THE THOR】

ガチで困ってる僕みたいな人のために、最初に症状と解決した方法を書いておきます。

・症状
「外観 → カスタマイズ」を開くと、ライブプレビューが読み込み中のまま真っ白
・解決法
プラグイン「Avatar Manager」を停止した
・教訓
一旦、プラグインを全停止してみて動作確認すべし

AD

WordPressカスタマイズ画面が真っ白に

ある日、当サイトの外観のカスタマイズ画面が読込中のまま真っ白になりました。

最初は「本体のバージョン?」「PHPのバージョン?」「サーバーキャッシュ?」「テーマのバグ?」と、よくある原因を一通り疑いました。

でも、どれも効果なし
かなり時間を使ってしまいました……。

同じ状況で困っている方の助けになればと思い、僕が実際にやったことうまくいかなかったこと最終的に何をして直ったかを、簡単にまとめます。

環境はサイトごとに違うので「必ず同じ」とは限りませんが、切り分けの順番とかお役に立てたらうれしいですね。

カスタマイザーが表示されない症状とは?

まずは何が起きていたかをまとめます。

1. カスタマイズ画面が真っ白

  • 画面の左側の設定メニュー(サイト基本情報・ウィジェット・メニューなど)が表示されない
  • 右側の「プレビュー枠」も真っ白なまま
  • ブラウザのタブはずっと「読み込み中…」のまま

待てばどうにかなる、ということもなかったです。

2. プレビューが動かず編集できない

プレビューが動かないので、見た目を調整する作業自体ができない状態です。

テーマの設定変更やデザイン調整がかなり不便になりました。

3. ChromeやSafariでも表示されない

Chrome / Brave / Safari で確認してみましたが、どのブラウザでも同じ症状でした。

端末を変えても変化なし。結構参りましたね・・・。

4. ウィジェットや投稿編集は正常

その他の動作や、表示自体に問題はありません。

例えば、「外観」→「ウィジェット」は動作するので、ウィジェットの変更自体は可能です。

つまり、「カスタマイザーだけ」がおかしいのがポイントでした。

5. 同じサーバーの別サイトでは正常

当サイトと同サーバー内のサブディレクトリ、サブドメイン、別ドメインで運用している別サイトは、正常にカスタマイズ画面が表示されていました。

また、それらのWordPressやPHP、使用しているテーマとテーマのバージョンは、このサイトと同じでした。

カスタマイザー真っ白の原因を探す検証方法は?

今までは普通に出来ていたので困りましたが、色々と弄って原因究明に努めました。

1. WordPress本体をダウングレード

過去バージョンに戻しましたが、効果なし

2. PHPのバージョンを変更

最新版や従来版の数バージョンを試しましたが、 効果なし

3. サーバーキャッシュの削除

サーバーからキャッシュを削除し、ブラウザのキャッシュも削除しましたが、効果なし

4. テーマの切り替え

一旦公式テーマ(Twenty Twenty系)に変更してみましたが、効果なし

原因の考察・・・プラグインか?

  1. ブラウザや端末を変えても効果なし
    ∴サーバー内に原因がありそう
    →別サイトでは正常に動作する?
  2. 別サイトでは問題なく動作している
    ∴このサイト内のデータに問題がある
    →何かしらのバージョンのエラーや互換性の問題?
  3. 正常動作している別サイトとWordpressやPHPのバージョンは同じ
    ∴システム自体に問題は無さそう
    →サーバー内のキャッシュが悪さをしている?
  4. キャッシュを削除しても変化なし
    ∴一時的なバグではなく根本原因があるはず
    →Wordpressテーマのバグや互換性の問題?
  5. テーマを変更してもカスタマイズ画面は表示されない
    ∴テーマ自体に問題は無さそう
    →「プラグイン」の相性が悪い?

というわけで「現在のWordpressに関する各バージョンと、プラグインの相性が悪いのかもしれない」という考察に至りました。

でも最近は新しいプラグイン入れたりしてないので、可能性としてどうなのかなぁ・・・という不安はありました。

プラグイン全停止で原因判明!対処法は?

一旦プラグインを全停止してみます。

一時的に表示がおかしくなったりするでしょうけど、背に腹は代えられませんから。

そもそもさっきテーマを変えたりしたので、既に一時的に表示はおかしかったので実質ノーダメージ

1. プラグインを一旦「全部停止」

すべて無効化したら、プレビューが表示されました!

これでプラグインが原因であると分かりました。

2. プラグインを1つずつ有効化してチェック

まずは他サイトでも使っているプラグインを有効化して、プレビューが表示されることを確認します。

あとは順番に1つずつ有効化 → 確認 → …を繰り返しました。

すると、あるプラグインを有効化した瞬間に再発しました。

3. 原因は「Avatar Manager」

「Avatar Manager」というプラグインを有効化したときに、カスタマイザーが真っ白になりました。

「Avatar Manager」はWordpressユーザーごとにアバターを設定できる便利プラグインです。

WordPress.org 日本語

Avatar Manager for WordPress is a sweet and simple plugin fo…

最終更新が5年前(2020年前後)の化石プラグインです・・・。

このサイトを作った序盤にインストールして、ずっと使ってましたね。

ちなみに、このサイトの現在の使い方では、今のところ無効化しても何の問題もないです。
実質使ってないプラグインですね。

4. 対処方法

  • Avatar Manager を無効化
  • 代替プラグインや別方法を検討(次章で紹介)

とりあえず、原因となるAvatar Managerを無効化すればOKでした。

アバター変更のプラグインは他にも色々ありますので、これに固執する理由もありませんし。

Avatar Managerの代替案は?

僕は今のところ、Avatar Managerを無効化して問題ありません。

もし必要ならGravatarを使うか、代替プラグインをインストールすると良いでしょう。

1. とりあえず無効化しておく

不具合解消を優先するので、アバターは後回しでも運用可能ですね。

僕はひとまずこれで。

2. Gravatarを利用する

WordPress標準機能を使う → 安定する
しかしGravatarは登録等の手間がかかります。

面倒なのか、あまりやってる人がいないイメージ

3. 別のアバタープラグインを検討

更新頻度・レビュー・互換性をチェックして選ぶといいでしょう。

(例:Simple Local Avatars、One User Avatarなど)

WordPress.org 日本語

ユーザープロフィールにアバターアップロードフィールドを追加します。Gravata のように、要求されたサイズをオンデマン…

WordPress.org 日本語

WordPress メディアライブラリーの任意の画像をカスタムユーザーアバターまたはユーザープロファイル画像として使用し…

ただ、今回のようなリスクは他のプラグインでもあるかもしれません。
定期的なメンテナンスが必要ですね。

4. テーマ側でアバターを差し替える

functions.php にコード追加で対応可能だそうです(Chat GPTに聞きました)。

多分自分でこれが出来る人は、そもそも僕のブログをここまで読んでないと思いますが・・・。

カスタマイザー真っ白事件のまとめ

なんとか解決したので、まとめます。

  • プラグインが原因で、急に動作に不具合が生じる場合がある
  • 切り分けの王道は「プラグイン全停止 → 1つずつ有効化」
  • 焦って本体やPHPをいじる前に、まずはシンプルな検証からすればこんなに苦労せずに済んだのに・・・・!

いやはや、数年間問題なく動いていたプラグイン、しかも外観に大きな影響を及ぼす機能ではないプラグインなので、そこに原因があるとは思っていませんでした・・・。不覚。

今回の原因は Avatar Manager でしたが、他のプラグインが原因で同じように「カスタマイザーが真っ白になる」人は少なくないみたいですね。

ひとまず、今回行ったものを含めて、不具合発生時に出来そうな検証を簡単にまとめてみます。

  1. ブラウザ端末を変えてみる
  2. 運営している別サイトを確認してみる
  3. サーバー、ブラウザのキャッシュを削除してみる
  4. プラグインを無効化してみる
  5. WordPress、PHPのバージョンを変更してみる
  6. テーマを変更してみる
  7. バックアップを取得してWordPressを再インストールしてみる(最終手段?)

ウェブサイトのエラーが起きたとき、本当に焦りますよね。

この記事が、誰かの原因特定と解決の近道になればうれしいです。

他の不具合

なにもしてないのにブログ壊れた ↑何もしてないことはないです。 過去の記事を見たところ、一部の画像とアイキャッチが表示されていない不具合が発生しておりました。 また、追従サイドバーが画面のスクロールに追従しない不具合も発[…]

他の不具合

Google Search Consoleから、このサイトにエラーが発生している旨のメールが来ました。 エラーの内容は以下です。 送信された URL に noindex タグが追加されています このエラーについ[…]

AD