WordPress 實作瀏覽器語言自動轉址功能筆記

前言

在多國語系網站中，根據用戶瀏覽器語言自動轉址至對應語言頁面是提升用戶體驗的常見需求。本文適合具備基礎程式能力的工程師或自學者，說明如何利用 JavaScript 搭配 Cookie 控制，實現 WordPress 網站的語言自動轉址功能。

教學步驟

1. JavaScript 程式碼說明

將以下程式碼加入 WordPress 主題的 wp_footer 或 JavaScript 檔案中，確保頁面載入時執行：

document.addEventListener("DOMContentLoaded", function () {
  // 設置 Cookie
  function setCookie(name, value, days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = "expires=" + date.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
  }

  // 取得 Cookie
  function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
      let c = ca[i].trim();
      if (c.indexOf(nameEQ) === 0) {
        return c.substring(nameEQ.length, c.length);
      }
    }
    return null;
  }

  // 僅在首頁執行
  if (window.location.pathname === '/') {
    if (!getCookie('redirected')) {
      const browserLanguage = navigator.language || navigator.userLanguage;
      // 繁體中文判斷
      if (browserLanguage.startsWith('zh') && window.location.pathname !== '/zh-tw/') {
        setCookie('redirected', 'true', 1); // 設置 1 天有效期
        window.location.href = 'https://xxxxx.com/zh-tw/';
      }
    }
  }
});

2. 功能解析

• Cookie 操作函數：setCookie 用於建立帶有效期的 Cookie，getCookie 用於檢查 Cookie 是否存在。
• 語言判斷與轉址：透過 navigator.language 取得瀏覽器語言，判斷是否為繁體中文（zh-TW 或 zh-HK），並且當前不在繁體中文頁面時執行轉址。
• 避免重複轉址：利用名為 redirected 的 Cookie 記錄轉址狀態，避免用戶在有效期內重複被轉址。

3. 使用方法

• 將程式碼加入 WordPress 主題或插件中，確保在頁面載入時執行。
• 測試時可透過瀏覽器語言設定模擬不同語言環境，確認轉址是否正常。
• 使用瀏覽器開發者工具檢查 redirected Cookie 是否正確設置，確保轉址邏輯生效且不重複。

4. 注意事項

• 本程式碼僅在首頁生效，如需其他頁面轉址，需擴充路徑判斷邏輯。
• Cookie 有效期可依需求調整。
• 可擴展語言判斷條件，支持更多語言轉址。
• 注意 SEO 影響，避免搜尋引擎因轉址影響索引。

範例應用場景

假設網站有英文首頁 https://xxxxx.com/ 與繁體中文頁面 https://xxxxx.com/zh-tw/，當用戶瀏覽器語言為繁體中文時，會自動導向繁體中文頁面，提升使用者體驗與網站國際化支持。

完整程式碼

document.addEventListener("DOMContentLoaded", function () {
  // 設置 Cookie 的函數
  function setCookie(name, value, days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = "expires=" + date.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
  }

  // 獲取 Cookie 的函數
  function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
      let c = ca[i].trim();
      if (c.indexOf(nameEQ) === 0) {
        return c.substring(nameEQ.length, c.length);
      }
    }
    return null;
  }

  // 確保僅在首頁執行
  if (window.location.pathname === '/') {
    // 檢查是否已設置轉址 Cookie
    if (!getCookie('redirected')) {
      // 獲取瀏覽器語言
      const browserLanguage = navigator.language || navigator.userLanguage;

      // 判斷是否為繁體中文 (zh-TW 或 zh-HK)
      if (browserLanguage.startsWith('zh') && window.location.pathname !== '/zh-tw/') {
        // 設置轉址 Cookie，有效期為 1 天
        setCookie('redirected', 'true', 1);

        // 執行轉址
        window.location.href = 'https://xxxxx.com/zh-tw/';
      }
    }
  }
});