在多國語系網站中，根據用戶瀏覽器語言自動轉址至對應語言頁面是提升用戶體驗的常見需求。本文適合具備基礎程式能力的工程師或自學者，說明如何利用 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/';
      }
    }
  }
});

在行銷活動中，UTM 參數（如 utm_source、utm_medium、utm_campaign）是分析流量來源的重要依據。但當訪客瀏覽網站內頁時，這些參數往往會遺失，導致追蹤不完整。本文針對 WordPress 平台，介紹如何利用 PHP 與 JavaScript，實現 UTM 參數的自動儲存與補充，確保參數在整個瀏覽過程中不會消失。

儲存 UTM 參數到 Cookie

在 WordPress 主題的 functions.php 中，我們透過 init 鉤子檢查 URL 是否帶有 UTM 參數，若有則將其經過安全處理後存入 Cookie，並設定有效期限為 30 天。關鍵程式碼如下：

function ks_store_utm_in_cookie() {
 if (isset($_GET['utm_source']) || isset($_GET['utm_medium']) || isset($_GET['utm_campaign'])) {
 $utm_data = array_filter([
 'utm_source' => isset($_GET['utm_source']) ? sanitize_text_field($_GET['utm_source']) : '',
 'utm_medium' => isset($_GET['utm_medium']) ? sanitize_text_field($_GET['utm_medium']) : '',
 'utm_campaign' => isset($_GET['utm_campaign']) ? sanitize_text_field($_GET['utm_campaign']) : '',
 ]);

 // 儲存 UTM 到 Cookie
 setcookie('utm_data', json_encode($utm_data), time() + (30 * DAY_IN_SECONDS), '/');
 }
}
add_action('init', 'ks_store_utm_in_cookie');

動態補充 UTM 參數到當前網址

為了避免使用者在瀏覽其他頁面時丟失 UTM 參數，我們在頁面底部（wp_footer）注入 JavaScript。此腳本會讀取 Cookie 中的 UTM 資料，並判斷當前網址是否缺少 utm_source，若缺少則動態將參數附加到網址，且不刷新頁面。核心程式碼片段：

function ks_add_utm_to_current_url() {
 ?>
 <script>
 document.addEventListener("DOMContentLoaded", function () {
 const utmData = getCookie('utm_data');
 if (utmData) {
 const utmParams = JSON.parse(utmData);
 const queryString = Object.entries(utmParams).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');

 const currentUrl = new URL(window.location.href);

 // 如果網址中沒有 utm_source，補充 UTM 參數
 if (!currentUrl.searchParams.has('utm_source') && queryString) {
 currentUrl.search = currentUrl.search ? `${currentUrl.search}&${queryString}` : `?${queryString}`;
 window.history.replaceState(null, '', currentUrl.toString());
 }
 }

 // 取得 Cookie 值的函數
 function getCookie(name) {
 const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
 if (match) return decodeURIComponent(match[2]);
 return null;
 }
 });
 </script>
 <?php
}
add_action('wp_footer', 'ks_add_utm_to_current_url');

功能解析

• PHP 部分：
  • 偵測 URL 中的 UTM 參數並存入 Cookie，確保 30 天內可持續追蹤。
• JavaScript 部分：
  • 從 Cookie 讀取 UTM 資料。
  • 若當前網址缺少 UTM 參數，動態補充並更新網址，不刷新頁面。

使用方法

1. 編輯 WordPress 主題的 functions.php，貼入上述 PHP 與 JavaScript 程式碼。
2. 在瀏覽器中輸入帶有 UTM 參數的網址，例如： https://example.com/?utm_source=google&utm_medium=cpc&utm_campaign=winter-sale
3. 確認瀏覽其他頁面時，網址仍保有 UTM 參數。
4. 使用瀏覽器開發者工具檢查 Cookie，確認 utm_data 已成功儲存。

注意事項

• 確保網站啟用 JavaScript，否則動態補充功能無法運作。
• 若使用 CDN 或快取插件，請測試是否影響此功能。

完整程式碼

<?php
// 儲存 UTM 參數到 Cookie
function ks_store_utm_in_cookie() {
 if (isset($_GET['utm_source']) || isset($_GET['utm_medium']) || isset($_GET['utm_campaign'])) {
 $utm_data = array_filter([
 'utm_source' => isset($_GET['utm_source']) ? sanitize_text_field($_GET['utm_source']) : '',
 'utm_medium' => isset($_GET['utm_medium']) ? sanitize_text_field($_GET['utm_medium']) : '',
 'utm_campaign' => isset($_GET['utm_campaign']) ? sanitize_text_field($_GET['utm_campaign']) : '',
 ]);

 setcookie('utm_data', json_encode($utm_data), time() + (30 * DAY_IN_SECONDS), '/');
 }
}
add_action('init', 'ks_store_utm_in_cookie');

// 動態補充 UTM 參數到當前網址
function ks_add_utm_to_current_url() {
 ?>
 <script>
 document.addEventListener("DOMContentLoaded", function () {
 const utmData = getCookie('utm_data');
 if (utmData) {
 const utmParams = JSON.parse(utmData);
 const queryString = Object.entries(utmParams).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');

 const currentUrl = new URL(window.location.href);

 if (!currentUrl.searchParams.has('utm_source') && queryString) {
 currentUrl.search = currentUrl.search ? `${currentUrl.search}&${queryString}` : `?${queryString}`;
 window.history.replaceState(null, '', currentUrl.toString());
 }
 }

 function getCookie(name) {
 const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
 if (match) return decodeURIComponent(match[2]);
 return null;
 }
 });
 </script>
 <?php
}
add_action('wp_footer', 'ks_add_utm_to_current_url');
?>