英文版選單消失，最後發現 Header JS 多包 script

整理日期：2026-03-31

狀況

英文版首頁的導航選單整個消失，中文版正常。

清除快取後還是一樣。這種狀況很容易讓人先往 WPML、選單設定或快取外掛去查。

但只要同一個網站的不同語系表現不同，就要把語系條件、Header 輸出和自訂程式碼一起看。

先拆成幾層看

我會先拆成幾層：

• 選單 HTML 是否有輸出。
• 選單是沒輸出，還是輸出了但被 CSS 隱藏。
• body class 是否卡在手機版 breakpoint 狀態。
• 前端 console 有沒有 JS 錯誤。
• 最近有沒有針對特定語系加過 Header JS。
• Autoptimize 或其他最佳化外掛有沒有把導航 JS 打包在一起。

選單消失不一定是選單設定壞掉。很多時候是前端 JS 在更前面就炸掉，後面的導航邏輯沒有正常跑完。

最後發現

Header 自訂程式碼欄位裡，放了一段修正 Logo 連結的 JS。

問題是那個欄位本身會自動包一層 script，但填進去的內容又自己帶了 <script>...</script>。

結果輸出變成類似：

<script><script>document.addEventListener(...)</script></script>

瀏覽器解析時遇到內層 <script>，就出現 JS 錯誤。

後續被最佳化外掛打包的導航相關 JS 沒有正常執行，導致 body class 沒有切回桌機狀態。再加上原本 CSS 有隱藏某個 header 區塊，最後桌面上兩組選單都看不到。

中文版正常，是因為那段 Logo JS 只在英文路徑執行，或不同語系輸出的 Header 條件不一樣。

修正方式

把 Header 欄位裡的內容改成純 JS，不要自己再包 <script>。

修正前的方向像這樣：

<script>
document.addEventListener('DOMContentLoaded', function () {
  // ...
});
</script>

修正後應該只保留：

document.addEventListener('DOMContentLoaded', function () {
  // ...
});

欄位會自己輸出正確的單層 script。

改完後，再清除最佳化外掛和前端快取。

不建議先做的事

不要只看中文版正常，就認為整站沒問題。

也不要一開始就重建選單。這類問題如果 console 已經有 JS 錯誤，先修前端錯誤比重建選單更重要。

另外，最佳化外掛不是根本原因，但它會放大問題。一個 inline script 壞掉，可能讓後面一串打包後的功能看起來都壞掉。

下次遇到可以先整理什麼

• 問題出現在哪個語系。
• 無痕視窗是否重現。
• console 第一個 JS 錯誤是什麼。
• Header / Footer 自訂程式碼最近改過什麼。
• 欄位是否需要自己包 <script>。
• 清除快取後是否還存在。
• body class 是否停在錯誤 breakpoint。

雙語站排查時，兩個語系都要測。單一語系正常，不代表共用 Header 沒問題。

標籤

• WPML
• Astra
• Header JS
• Autoptimize
• 選單
• 多語系