雙語網站 Logo 連結跳轉語系錯誤

整理日期：2026-03-25

狀況

在一個雙語（中文與英文）的網站中，遇到兩個導覽列問題：

Logo 連結錯誤：中文版的其他子網頁，點擊左上角 Logo 會跳轉到英文版首頁（/en/），但中文首頁點擊 Logo 是正常的。
語言切換器消失：部分頁面的導航列右側，原本應該出現的語系切換按鈕（繁體中文 / English）消失不見。

先拆成幾層看

頁首 Logo 的網址是動態產生的，還是手動在自訂 HTML 區塊中寫死的。
語言切換器外掛（WPML）的顯示條件，是綁定到特定選單（Menu），還是全站導航列。
佈景主題的文字/HTML 區塊是否有限制 JavaScript 執行。

最後發現

頁首 Logo 是透過佈景主題（如 Astra）自訂頁首中的「文字/HTML 區塊」手動製作的。其 HTML 代碼中的 href 被寫死了英文首頁連結（https://example.com/en/），導致不論在哪個語系點擊，都會強制跳轉至英文版。

而語言切換器部分，WPML 外掛的切換按鈕被綁定在一個特定的新聞分類選單位置，而不是主選單（Primary Menu）位置，因此只要該頁面沒有載入該特定選單，切換器就不會顯示。

修正方式

1. Logo 連結動態改寫

因為佈景主題的 HTML 區塊會自動過濾 <script> 標籤，無法直接在區塊內寫 JS。因此我們採取兩步驟處理：

第一步：將自訂 HTML 區塊中的連結 href 修改為中文首頁（https://example.com/）。
第二步：在佈景主題自訂設定的 Header 區塊（不被過濾程式碼的地方）加入一段 JavaScript。當偵測到目前網址路徑包含 /en 時，自動將 Logo 連結動態改為英文版首頁。

自訂 HTML 區塊修改：

<div class="head-logo">
    <a href="https://example.com/"><img src="/wp-content/uploads/logo.png" width="220"></a>
</div>

Header 區塊加入 JavaScript：

<script>
document.addEventListener('DOMContentLoaded', function() {
    var logoLink = document.querySelector('.head-logo a');
    if (logoLink && window.location.pathname.startsWith('/en')) {
        logoLink.href = 'https://example.com/en/';
    }
});
</script>

2. 語言切換器設定

進入 WPML > 語言 的設定後台，將語言切換器新增到「主選單（Primary Menu）」位置，確保全站只要有主導覽列的頁面都能正確顯示。

不建議先做的事

不要為了修 Logo 連結去安裝額外的網址重導向外掛，這會增加主機負荷且可能導致重新導向迴圈。
不要嘗試直接在不支援 JS 的 HTML 區塊中強行寫入 Script 程式碼，會被系統自動過濾掉而失效。

下次遇到可以先整理什麼

發生錯誤的頁面網址與對應的語系。
頁首 Logo 是主題內建功能，還是透過自訂 HTML 區塊手寫的。
語言切換外掛所綁定的選單位置名稱。