WPML 多語系下佈景主題自訂版面翻譯失效之替代方案

整理日期：2026-03-30

狀況

在雙語網站中，中文版的「麵包屑（Breadcrumb）」與「子分類頁籤（Tabs）」是由自訂版面功能（如 Astra Custom Layouts）透過 Hook 機制與 Elementor 模板，統一在內容區外面注入。

然而，當切換到英文版子網頁時，該 Hook 注入的區塊完全消失，導致英文版頁面缺少頁籤導覽與麵包屑。嘗試使用 Elementor 編輯英文版的自訂版面翻譯時，會因為相容性衝突而出現系統錯誤，無法正常存檔。

先拆成幾層看

檢查 WPML 的「轉譯管理（Translation Management）」中，該自訂版面 Post Type（如 astra-advanced-hook）是否有正確開啟翻譯。
評估排查 WPML + Layout Hook + Page Builder 三者衝突的核心成本，是否值得為此花費數天 debug。
是否有更務實、不依賴版面 Hook 的替代方案，能直接在英文頁面內容中呈現相同的結構。

最後發現

WPML、佈景自訂版面（Astra Custom Layout）與頁面編輯器（Elementor）三者在底層的 Hook 優先順序有相容性瓶頸。在翻譯版本中，Elementor 無法正常初始化 Hook 區塊的資料。

最簡單且穩健的替代方案是：避開 Hook 機制，直接在英文頁面的區塊編輯器（Gutenberg）內置入對應的 Shortcode，並利用 CSS 針對語系進行排版微調。

修正方式

1. 英文版頁面結構調整

在英文版 FAQ 或子頁面的區塊編輯器中，切換至「程式碼編輯器」，直接寫入以下結構（不經過 Hook，直接由 Gutenberg 渲染）：

<!-- wp:shortcode -->
[rank_math_breadcrumb]
<!-- /wp:shortcode -->

<!-- wp:shortcode -->
[custom_tabs_shortcode parent_id="XXXX" parent_title="All"]
<!-- /wp:shortcode -->

<!-- wp:rank-math/faq-block -->
...FAQ 區塊內容...
<!-- /wp:rank-math/faq-block -->

2. 針對英文版語系加入 CSS 對齊樣式

因為這些元件現在被置於 entry-content 內部（不像中文版在外部），需要使用 CSS 的 :lang(en) 虛擬類別選擇器，將英文版的寬度與邊距調整至與中文版一致：

/* === 英文版頁面麵包屑與頁籤對齊修正 === */

:lang(en) .entry-content > .rank-math-breadcrumb {
  max-width: 1120px;
  margin: 40px auto 0;
  padding: 0 20px;
}

:lang(en) .entry-content > .app_list {
  max-width: 1120px;
  margin: 16px auto 0;
  padding: 0 20px;
}

不建議先做的事

不要強行在英文版頁面上用 Elementor 重新建立整套 Layout，這會導致中文與英文版面的程式碼冗餘度提高，且容易因為版面外掛更新而再次壞掉。
不要為了修復此問題去停用或重新安裝 WPML 的核心組件，相容性衝突通常在外掛底層，重新安裝無法解決。

下次遇到可以先整理什麼

發生衝突的翻譯頁面語系與網址。
麵包屑與自訂選單元件是否具有對應的 WordPress Shortcode（短代碼）。
檢查主題在該頁面渲染的 <body> 標籤是否帶有語系相關的 Class（如 :lang(en) 或 .translatepress-en、.lang-en），便於 CSS 精準定位。