WordPress更新後に表示が崩れたときの原因切り分け
WordPress本体やテーマ、プラグインを更新したあとに、急にレイアウトが崩れることがあります。ただし、本当に壊れたとは限りません。古い表示がキャッシュに残っているだけのこともあるため、あわてて元に戻す前に、影響の小さい確認から進めます。
この記事で分かること
- 更新後に表示が崩れる代表的な原因
- 「何が原因か」を切り分ける順番
- いきなり元に戻す前に確認すべきこと
よくある症状
- 更新後にレイアウトが崩れた、余白や色が変わった
- 一部のページだけ崩れている、または全ページで崩れている
- 自分のパソコンでは崩れて見えるが、別の端末では正常に見える
最後のパターンは、表示崩れではなくキャッシュ（古い表示の残り）が原因のことが多いです。
原因候補
更新後の表示崩れは、おおむね次のどれかです。
- キャッシュに古い表示が残っている
ブラウザ、キャッシュ系プラグイン、サーバー、CDNのいずれかに古いCSSやページが残り、更新が反映されていないだけのことがあります。実際には崩れていないケースです。 - テーマ更新で独自CSSが消えた
テーマ本体に直接CSSを書き足していた場合、テーマ更新で上書きされて消えます。子テーマを使っていないと起きやすい原因です。 - プラグインの互換性の問題
更新したプラグイン（特にページビルダーやデザイン系）が、新しいバージョンや他のプラグインとかみ合わず、表示を崩すことがあります。 - WordPress本体やPHPのバージョンとの不整合
本体の大きな更新で、古いテーマ・プラグインが追いつかず崩れるケース。 - 更新が途中で止まった
更新中に通信が切れるなどして、ファイルが不完全な状態になっていることがあります。
確認手順
上から順に試すと、原因を絞りやすくなります。
- まずキャッシュをクリアする
ブラウザのスーパーリロード（強制再読み込み）を試します。ChromeやEdgeでは、WindowsはCtrl + F5、MacはCommand + Shift + Rが目安です。キャッシュ系プラグインやサーバーのキャッシュ機能があれば、それもクリアします。これで直れば、表示崩れではなくキャッシュが原因でした。 - 何を更新したかを思い出す
直前に更新したのが「本体」「テーマ」「プラグイン」のどれかを確認します。更新履歴は管理画面で確認できます。原因の範囲がここで絞れます。 - プラグインを1つずつ無効化して切り分ける
あやしいプラグインを1つずつ無効化し、そのたびに表示を確認します。無効化で直れば、そのプラグインが原因です。本番サイトでは、アクセスの少ない時間に行います。 - テーマを一時的に標準テーマに切り替える
標準テーマ（Twenty Twenty-Fiveなど）に切り替えて崩れが直るなら、原因はテーマ側にあります。確認後は元のテーマに戻します。 - どうしても原因が分からないときは、バックアップから戻す
更新前のバックアップがあれば、いったんその状態に戻して様子を見ます。戻したうえで、1つずつ慎重に更新し直します。
自分で触る前の注意点
- いきなりバックアップから戻す前に、まずキャッシュと更新内容を確認する。 戻すと、更新で入った修正やセキュリティ対応まで巻き戻ることがあります。
- 本番サイトでのプラグイン無効化は、一時的にその機能が止まることがあります。問い合わせフォームやカートなど、止まると困る機能は注意してください。
- 作業の前に、可能ならバックアップを取得します。
更新の直後からボタンやメニューも動かなくなった場合は、JavaScriptでボタンやメニューが動かないときの確認ポイントもあわせて確認してください。日頃の点検についてはWebサイトの保守チェックをご覧ください。
相談するときに用意するとよい情報
自分で切り分けても直らないときは、次の情報があると調査が早くなります。
- 対象サイトのURL
- 崩れているページ（全ページか、特定ページか）
- 直前に更新したもの（本体 / テーマ / プラグインのどれか、分かれば名前）
- いつから崩れているか
- 崩れている状態のスクリーンショット
- 使っているWordPressテーマ名、バックアップの有無
対応できるか相談する
キャッシュをクリアしても直らない、どのプラグインが原因か絞れない──そうした場合は、更新内容とテーマ・プラグインの組み合わせから切り分ける必要があります。
現役のWebエンジニアとして、更新後の表示崩れの原因調査から対応しています。最初は、対象サイトのURL・困っている内容・スクリーンショット（あれば）の3点だけで大丈夫です。むやみに元へ戻すのではなく、原因に合わせた対応をご提案します。