ホームページ制作はコアース・デザインへ!

【THE THOR】更新したプラグインとの干渉でおきた?表示崩れの修正方法①

WordPressで制作したブログサイトに表示崩れが起きました。「Really Simple Security」(旧 Really Simple SSL)というプラグインの更新がトリガーとなっておきたようです。なかなか根が深く,結局テーマ「THE THOR」公式フォーラムで紹介されていた“力業”で修正しました。その修正方法をシリーズ記事でご紹介します。表示崩れはすべて元通りに修正できました。

目次

修正方法

結論的には,プラグイン「Really Simple Security」の無効化(削除)とテーマ「THE THOR」の親テーマ再インストールで修正できました。

どんな症状だったのか,どのように修正していったのか備忘録として書いています。

「THE THOR」の親テーマ再インストールの方法を知りたい方は,以下の関連記事からご覧ください。

症状

最初はPC画面にもかかわらず,スマホサイズの表示のようにハンバーガーメニューが表示され,画像も表示されていませんでした。その後,画像は復活しましたが,右カラムに表示させていたウィジェットがすべて消えていました。

ダッシュボードにログインしていると正常?

不思議なことにダッシュボードにログインしていると正常でした。これで発見が遅れました。

可能性として

表示崩れの原因として,以下の可能性を検討しました。

  • PHPのバージョンを上げたことによる影響
  • テーマとの干渉
  • プラグインとの干渉

PHPのバージョンを上げたことによる影響

PHP 8.3 × WordPress 6.8 × THE THOR
で使用していました。

少し前にPHPバージョンを8.3にアップしていましたので,この影響を疑いました。CSSやJSが途中で読み込まれず,表示崩れや画像非表示が生じた可能性です。また,THE THORのレスポンシブ制御JSが読み込まれていない可能性もあります。

すぐにPHPバージョンを8.3→8.1へダウンしてみましたが,変化はありませんでした。どうやらPHPバージョン起因ではないということが分かりました。

テーマとの干渉

テーマとの干渉が疑われますが,セオリーとしてプラグインを全停止し,一つ一つ再有効化していって確認する方法があるので,そちらを優先しました。次項で書いています。

プラグインとの干渉

安全上プラグインの自動更新はOFFにしています。エラーに気づく少し前にいくつかのプラグインの手動更新を実施していました。そのため,プラグイン更新との干渉を疑い,プラグインを一旦すべて無効化して確認してみました。

アップデートしたReally Simple Securityとの干渉?

プラグインReally Simple Securityを無効化すると,すぐにレイアウト崩れが戻りました。PC画面でスマホ表示のような状態でしたが,正しく表示されるようになりました。

前述の通り,ログイン時は正常表示されるため,Really Simple Securityが一般ユーザーにだけ適用しているポリシーや制御が関係していると考えられます。更新によりReally Simple Securityが追加した制御とTHE THORのJavaScriptの相性が関係しているのかもしれません。

画像の非表示

依然としてアイキャッチやブログ内の画像が表示されていません。

非同期読み込み設定のOFF

THE THORの設定で,「img非同期読み込み」設定をOFFにしてみました。テーマのカスタマイズ>「SEO設定」で,該当箇所の設定をOFFにします。すると,画像が表示されるようになりました。

それでも,まだ完全に修正できたわけではありません。

右カラムに表示されていたウィジェット(検索ボックス,カテゴリー,人気記事ランキング)が表示されていません。小さなアイコン画像も消えたままです。

ちなみに,外観 > ウィジェット でサイドバーに検索ボックス,カテゴリー,人気記事ランキングが存在しているのか確認しました。こちらの設定では,しっかり存在していました。

キャッシュの削除

画像はキャッシュの影響を受けるので,毎回ブラウザやサーバーのキャッシュを削除し,非ログインのシークレットモードで確認しています。それでも,上記の通り,表示崩れが残りました。なかなか根深いです。

その他の施策

影響があるかもしれないと思い,以下の点も実施しました。

  • CSS非同期読み込み設定OFF
  • AMP設定 OFF
  • functions.phpへの追記コード 削除 ※

※ サーチコンソールで指摘されたAMPエラー対策で追記したものです

AMPそのものをOFFにしたため,追記コードも削除した次第です。

ここまでしても完全修正はできませんでした。

検証

「Really Simple Security」の更新がトリガーとなり表示崩れがおき,その“後遺症”が残り根深いため,これまでの修正方法では完全な復元には至らなかったようです。

テーマの再インストール

THE THORには,購入者が利用できるフォーラムがあります。そこで同じような事例が投稿されており,テーマの再インストールで解消したしたことが書かれていました。

AIで調べてみても,“最短で治す荒療治”として,テーマの最新版への更新が挙げられていました。

表示崩れが起きる前からテーマは最新版を利用していましたが,思い切って再インストールを試行してみることにしました。

再インストールの手順や方法は,次の記事で解説します。

目次