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 class
父佈景主題與子佈景主題的優先順序
固定寬度、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只遮掩外觀前，請先解釋原因。
在我核准前，不要執行正式環境變更、更新、停用或還原。