如何在 WordPress 網站中實現根據瀏覽器語言自動轉址功能

作者:

在多國語系的網站中，為了提升用戶體驗，根據瀏覽器語言進行自動轉址是一個常見的需求。本文將教您如何使用 JavaScript，根據用戶的瀏覽器語言自動轉址到特定的語言頁面，同時通過設置 Cookie 避免重複轉址。

教學步驟

以下是具體的程式碼和操作方法：

1. JavaScript 程式碼

將以下 JavaScript 程式碼加入您的網站，建議將其添加到 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 === '/') {
        // 檢查是否已設置轉址 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/';
            }
        }
    }
});

2. 功能解析

這段程式碼實現了以下功能：

  1. 設置與獲取 Cookie 的函數：

    • setCookie 用於創建 Cookie 並設定有效期。

    • getCookie 用於檢查 Cookie 是否已存在。

  2. 語言檢測與轉址：

    • 根據 navigator.language 獲取用戶的瀏覽器語言。

    • 如果語言為繁體中文 (zh-TW 或 zh-HK)，且當前路徑不是繁體中文頁面 (/zh-tw/)，則執行轉址。

  3. 避免重複轉址：

    • 通過設置名為 redirected 的 Cookie，記錄用戶是否已被轉址過，有效期為 1 天。

3. 使用方法

1. 添加程式碼到網站

將上述 JavaScript 程式碼添加到網站的主題或通過插件加載，確保其在頁面加載時執行。

2. 測試功能

  • 訪問您的網站首頁，並模擬不同的瀏覽器語言設置。

  • 確認用戶被正確轉址到對應的語言頁面。

3. 驗證 Cookie 設置

  • 打開瀏覽器開發者工具，檢查 redirected Cookie 是否已正確設置。

  • 確保在 Cookie 有效期內，用戶不會被重複轉址。

4. 注意事項

  • 首頁檢測：程式碼僅對網站首頁有效。如果需要對其他頁面進行語言轉址，請擴展檢測邏輯。

  • Cookie 有效期：根據需求調整 Cookie 的有效期。

  • 語言代碼檢測：程式碼中檢測了 zh-TW 和 zh-HK，可根據實際需求擴展其他語言選項。

  • SEO 考量：確保轉址不會影響搜尋引擎爬蟲對網站的索引。

範例應用場景

假設您的網站有以下兩個語言頁面：

  • 英文首頁：https://xxxxx.com/

  • 繁體中文頁面：https://xxxxx.com/zh-tw/

使用這段程式碼後，當用戶瀏覽器語言為繁體中文時，將自動被導向繁體中文頁面。

透過這個方法，您可以輕鬆實現基於瀏覽器語言的自動轉址功能，優化用戶體驗並提升網站的國際化支持！

發佈留言