Popup 短代碼直接露在前台

整理日期：2026-04-23

狀況

多個頁面前台直接露出 popup 短代碼。

有些位置肉眼看得到，有些藏在白字或隱藏 widget 裡，前台看起來不明顯，但 HTML 裡仍然存在。

這種狀況會讓頁面看起來很像亂碼，也很容易被搜尋引擎或 AI 摘要讀到不該出現的技術字串。

先拆成幾層看

我會先拆成幾層：

• 短代碼是哪個外掛留下的。
• 外掛還在不在。
• 舊 popup 的內容還能不能從資料庫或備份找回來。
• 短代碼存在於 content.raw，還是 Elementor 的 _elementor_data。
• 有沒有智慧引號、跳脫引號或不同短代碼格式。
• 哪些殘留是真的前台可見，哪些只是孤兒模板或全裝置隱藏 widget。

只用前台肉眼看不夠。Elementor 頁面要同時查內容欄位和 Elementor data。

最後發現

舊 popup 外掛已經不在，但頁面內容裡的短代碼沒有清掉。

因為沒有外掛解析，WordPress 就把短代碼當純文字輸出。

更麻煩的是，舊 popup 的 post type 名稱不一定等於外掛名稱。直覺用外掛 slug 去查，可能什麼都查不到。

另外，同一段短代碼可能有不同引號形式：

• 一般直引號。
• HTML entity 形式的智慧引號。
• Elementor JSON 裡的 escaped 引號。

所以替換時不能只抓最單純的 id="123"。

修正方式

這類遷移我會用比較保守的流程：

1. 先掃描全站短代碼分佈。
2. 從備份或資料庫找回舊 popup 的標題、內容和按鈕文字。
3. 在新 popup 外掛裡重建對應內容。
4. 建立舊 ID 到新 ID 的 mapping。
5. 批次替換 content.raw 和 Elementor data。
6. 替換前保留快照，方便回復。
7. 替換後重新掃描確認剩下哪些殘留。

替換後的方向不是保留舊短代碼，而是改成新 popup 外掛能辨識的連結或觸發元素。

例如概念上會變成：

<a class="sg-popup-id-NEWID popup-link" href="#">按鈕文字</a>

實際 class 要看當下使用的新 popup 外掛。

不建議先做的事

不要只在可見頁面手動刪。

Elementor library、隱藏 widget、舊模板裡可能還有殘留。手動刪幾個肉眼看得到的位置，之後還是會漏。

也不要直接全站 regex 亂替換。舊 popup 的內容、按鈕文字和新 popup ID 如果沒有先整理好，很容易把原本可用的互動全部變成死連結。

下次遇到可以先整理什麼

• 前台看到的短代碼格式。
• 舊外掛名稱和可能的 post type。
• 備份裡是否還有舊 popup 內容。
• 短代碼出現在哪些 post type。
• 是內容欄位、Elementor data，還是兩邊都有。
• 哪些殘留前台可見，哪些是孤兒模板。
• 新 popup 外掛的觸發 class 或短代碼格式。

Popup 遷移不是只換外掛。真正麻煩的是舊內容和新觸發方式要對得起來。

標籤

• Popup
• 短代碼
• Elementor
• REST API
• 資料庫備份
• 內容遷移