WordPress更新で表示が崩れたら？AIで更新前後を比較して安全に直す方法

WordPress本体やテーマを更新した後に、メニューがずれる、写真が大きくなる、予約ボタンが隠れる、スマートフォンだけ横へはみ出す、といった表示崩れが起こることがあります。

問題は「更新ボタンを押したこと」だけではありません。更新前の正常な状態を残していないと、どこが、いつ、何によって変わったのか比較できないことです。

AIは、更新前後の画面やファイルを比較し、確認作業と原因の切り分けを支援できます。ただし、バックアップなしの更新、予約データを含む復元、テーマファイルへの場当たり的な上書きを、AIへ丸ごと任せてはいけません。

結論：更新前の「正常な見本」をAIへ渡す

安全な流れは次のとおりです。

更新する前に、対象と現在のバージョンを記録する
ファイルとデータベースをバックアップし、戻し方を確認する
重要ページをパソコン・スマートフォン幅で撮影する
可能なら検証環境で、一つだけ更新する
同じURL・同じ画面幅で更新後を撮影する
AIが画像、HTML、CSS、エラーを比較する
人が予約・問い合わせ・料金表示を確認する
合格なら次を更新し、問題があれば追加変更を止める

更新前の画面は、単なる記念写真ではありません。「この見た目が正しい」という合格基準です。

なぜWordPressやテーマの更新で崩れるのか

よくある原因は一つではありません。

原因	起こり得ること
テーマのHTML・CSS変更	見出し、メニュー、余白、画像サイズが変わる
親テーマの直接編集	更新により独自修正が消える
プラグインとの組み合わせ	スライダー、フォーム、予約部品が表示されない
キャッシュ	管理者と一般利用者で新旧の表示が混在する
PHP・JavaScriptのエラー	一部機能やページ全体が動かない
固定幅の指定	パソコンは正常でもスマートフォンではみ出す
更新の一括実行	どの更新が原因か分からなくなる

AIへ「崩れたから直して」とだけ頼むと、原因を確認せずCSSを追加し、一時的に隠すことがあります。先に変更履歴と再現条件を集める必要があります。

最初に選ぶ重要ページ

全ページを同じ優先度で確認する必要はありません。宿の予約に近いページから選びます。

トップページ
客室・料金
宿泊プラン
予約案内と予約ボタン
問い合わせフォーム
アクセス
看板猫の紹介
よくある質問
メニューを開いた状態

パソコン幅とスマートフォン幅で確認します。必要ならタブレット幅も加えます。URL、画面幅、撮影日時、ログイン状態を揃えないと、AIが無関係な差まで問題として挙げることがあります。

AIができる更新前の準備

バージョンと変更対象の一覧化

AIは、読み取り権限の範囲で次を整理できます。

WordPress本体の現在版と更新候補
使用中の親テーマ・子テーマ
有効なプラグインと更新候補
PHPのバージョン
独自CSS、子テーマ、追加JavaScriptの有無
予約、決済、問い合わせに影響する部品

更新候補があることと、本番へ適用してよいことは別です。更新内容、対応WordPress・PHP、提供元の案内を公式情報で確認します。

更新前の画面記録

ブラウザを操作できるAIやテストツールでは、URLと画面幅を指定してスクリーンショットを保存できます。たとえば次の組み合わせです。

端末想定	画面幅の例	主な確認点
パソコン	1440px	ヘッダー、横並び、サイドバー
小型ノート・タブレット	768px	切り替わる途中の配置
スマートフォン	390px	メニュー、表、予約ボタン、横はみ出し

数値は合否の共通条件にするための例です。実際の利用者が多い端末も人の目で確認してください。

機械的な状態の保存

画面だけでなく、次も更新前に記録すると原因を絞りやすくなります。

公開URLのHTTP応答
ページタイトルと主要見出し
画像・CSS・JavaScriptの読み込み失敗
ブラウザのエラー
予約・問い合わせ先URL
サイトヘルスの重大問題

更新は一つずつ行う

WordPress本体、テーマ、プラグイン、PHPを同時に更新すると、崩れの原因を分けられません。

更新単位ごとに、次の小さな一周を繰り返します。

一つ更新
  ↓
キャッシュを整理
  ↓
同じURL・同じ画面幅で撮影
  ↓
画像・エラー・予約導線を比較
  ↓
合格なら次の更新へ

WordPress公式の更新手順も、更新前のバックアップを案内しています。テーマやプラグインの自動更新を使う場合も、重要機能まで無条件に自動化せず、バックアップ・通知・監視と組み合わせます。

AIに比較させると何が分かるか

画像の比較

メニューや見出しの位置が変わった
写真の縦横比が崩れた
予約ボタンが隠れた
本文とサイドバーが重なった
余白や文字サイズが極端に変わった
スマートフォンで横スクロールが発生した

画面差分の仕組みでは、基準画像と現在画像を比較できます。Playwrightの公式資料にも、スクリーンショットを保存し、後の実行結果と比較する方法があります。撮影するOS、ブラウザ、フォントなどが違うと差が出るため、同じ環境で比較します。

HTML・CSSの比較

画像で「どこが違うか」を見つけた後、AIは原因候補を調べられます。

消えた、または変わったCSSクラス
親テーマと子テーマの優先順位
固定幅、overflow、positionなどの指定
JavaScriptエラーで動かなくなった部品
読み込まれていないCSS・画像
キャッシュに残る古いファイル

ただし、見た目が似るCSSを無制限に足すのではなく、原因となったテーマ変更と独自修正の関係を確認します。

崩れたときの切り分け順

追加更新と編集を止める
問題のURL、時刻、端末、画面幅を記録する
シークレット画面や別端末でも再現するか確認する
キャッシュを消す前と後を区別する
ブラウザとサーバーのエラーを確認する
直前に更新した一項目を特定する
テスト環境で無効化・旧版への切り戻しを検討する
本番復元が必要なら、バックアップ後の予約・問い合わせ差分を確認する

サイト全体で重大なエラーが起きた場合、WordPressには問題のあるテーマやプラグインの管理を助けるRecovery Modeがあります。ただし、メールが届かない、管理者権限がない、予約機能へ影響する場合は、宿主だけで強行せず保守担当者やサーバー会社へ連絡してください。

AIに任せやすいこと・人が判断すること

AIに任せやすい	人の確認・承認を残す
バージョンと更新候補の一覧	更新を実施する日時
URL・HTTP・リンクの確認	料金・在庫・営業情報の正しさ
更新前後のスクリーンショット	スマートフォン実機の使いやすさ
HTML・CSS・エラーの差分	予約・決済の確定操作
原因候補と修正案の比較	本番の復元と顧客データの扱い
再確認と作業記録	制作会社・保守契約との責任分担

AIの「直りました」という報告だけで完了にしません。宿主自身が予約ボタン、電話番号、問い合わせ、料金、スマートフォン表示を確認します。

レンタルサーバーの場合

ロリポップ、さくらのレンタルサーバ、エックスサーバー、ConoHa WINGなどでは、サーバー会社のバックアップ、ステージング、復元、PHP切替機能を確認します。

AIへ管理画面のパスワードを貼らず、宿主が画面を操作しながら、AIには確認項目と判断材料を作らせる方法もあります。具体的な更新順序はレンタルサーバーでWordPressを安全に更新する方法を参照してください。

VPS・クラウドの場合

VPSではWordPressだけでなく、OS、Webサーバー、PHP、データベース、キャッシュ、コンテナも影響範囲に入ります。

WordPress更新とPHP・OS更新を同日に重ねない
構成ファイルとデータベースを両方保存する
本番と検証環境を分ける
AIへroot権限を無条件に渡さない
再起動や復元は人の承認後に行う

VPSでWordPressを運営する責任範囲とAIに本番サーバーを触らせるときの権限設計も先に確認してください。

コピペ用プロンプト1：まだ更新しないで調査する

宿のWordPress本体・テーマ・プラグインの更新を検討しています。
私はITに詳しくありません。まだ本番の更新や設定変更は実行しないでください。

読み取りだけで次を調べ、表にしてください。
- WordPress、PHP、使用中テーマ、子テーマ、有効プラグインの現在版
- 更新候補と、公式の対応条件・変更内容
- 客室、料金、予約、問い合わせへ影響する可能性
- 更新前に必要なファイル・データベースのバックアップ
- 復元方法と、復元で失われる可能性がある予約・問い合わせ
- 更新前後に比較する重要URLと画面幅

秘密情報や顧客情報は表示しないでください。
不明点は推測せず、更新実行前に私へ確認してください。

コピペ用プロンプト2：更新前後を比較する

承認済みの一つの更新について、更新前後の表示を比較してください。

条件：
- 同じURL、同じブラウザ、同じ画面幅で比較する
- パソコン1440px、タブレット768px、スマートフォン390px
- トップ、客室・料金、予約案内、問い合わせ、アクセスを確認する
- HTTP、画像、メニュー、見出し、横はみ出し、予約ボタン、ブラウザエラーを確認する
- 見た目の差を「問題」「意図した変更の可能性」「判断保留」に分ける
- 問題があっても、勝手に追加更新や復元を実行しない

最後に、変更対象、比較結果、未確認事項、人が確認するURLを報告してください。

コピペ用プロンプト3：表示が崩れた後に原因を調べる

WordPress更新後にサイト表示が崩れました。まだ修正・復元しないでください。

次の順番で読み取り調査してください。
1. 問題が起きるURL、端末、画面幅、発生時刻を整理
2. 直前に更新したWordPress・テーマ・プラグインを一つずつ整理
3. 更新前後のスクリーンショットとHTML・CSS・ブラウザエラーを比較
4. キャッシュ、テーマ、プラグイン、独自CSSの原因候補を根拠付きで順位付け
5. 修正、直前更新の切り戻し、バックアップ復元の選択肢を比較
6. 各案の影響範囲、戻し方、予約・問い合わせデータへの影響を示す

CSSを追加して見た目だけ隠す前に、原因を説明してください。
本番変更、更新、無効化、復元は私が承認するまで実行しないでください。