本教程詳細(xì)介紹了如何在wordpress網(wǎng)站上實(shí)現(xiàn)一個(gè)僅在首次訪問時(shí)顯示的年齡驗(yàn)證彈窗。通過利用javascript的cookie功能，文章提供了設(shè)置和獲取cookie的實(shí)用函數(shù)，并指導(dǎo)如何將其集成到jquery代碼中，以控制彈窗的顯示邏輯和關(guān)閉行為，確保用戶體驗(yàn)和合規(guī)性。

引言：WordPress網(wǎng)站年齡驗(yàn)證彈窗的挑戰(zhàn)

在某些特定類型的WordPress網(wǎng)站上，例如銷售酒精、煙草或成人內(nèi)容，強(qiáng)制性的年齡驗(yàn)證彈窗是合規(guī)性的重要組成部分。理想的年齡驗(yàn)證彈窗應(yīng)具備以下特性：

1. 首次訪問顯示： 僅在用戶首次訪問網(wǎng)站時(shí)彈出，避免重復(fù)打擾。
2. 模態(tài)化設(shè)計(jì)： 彈窗覆蓋頁(yè)面內(nèi)容，要求用戶進(jìn)行交互才能繼續(xù)瀏覽。
3. 點(diǎn)擊關(guān)閉： 用戶確認(rèn)年齡后，彈窗應(yīng)立即消失，且在后續(xù)訪問中不再出現(xiàn)。

直接使用localStorage或簡(jiǎn)單的jQuery腳本可能無(wú)法在WordPress環(huán)境中完美實(shí)現(xiàn)這些要求，尤其是在跨會(huì)話（session）或跨頁(yè)面訪問時(shí)保持狀態(tài)。本文將介紹一種基于JavaScript Cookie的穩(wěn)健解決方案。

核心機(jī)制：JavaScript Cookie的應(yīng)用

為了實(shí)現(xiàn)“僅在首次訪問顯示”的功能，我們需要一種機(jī)制來在用戶的瀏覽器中持久化地存儲(chǔ)一個(gè)狀態(tài)。Cookie是實(shí)現(xiàn)這一目標(biāo)的理想選擇，因?yàn)樗梢栽谟脩舻臑g覽器中設(shè)置一個(gè)帶有過期時(shí)間的鍵值對(duì)，并在后續(xù)請(qǐng)求中被網(wǎng)站讀取。

1. Cookie操作函數(shù)

首先，我們需要兩個(gè)核心的JavaScript函數(shù)來設(shè)置和獲取Cookie：

/**
 * 設(shè)置一個(gè)Cookie
 * @param {string} cname - Cookie的名稱
 * @param {string} cvalue - Cookie的值
 * @param {number} exdays - Cookie的過期天數(shù)
 */
function setCookie(cname, cvalue, exdays) {
    const d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    const expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

/**
 * 獲取指定名稱的Cookie值
 * @param {string} cname - Cookie的名稱
 * @returns {string} Cookie的值，如果不存在則返回空字符串
 */
function getCookie(cname) {
    const name = cname + "=";
    const ca = document.cookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

這些函數(shù)應(yīng)該被放置在您的WordPress主題的JavaScript文件中，或者直接嵌入到header.php或footer.php的<script>標(biāo)簽內(nèi)。

彈窗顯示與隱藏邏輯

有了Cookie操作函數(shù)后，我們可以編寫jQuery代碼來控制彈窗的顯示和隱藏。

網(wǎng)易天音

網(wǎng)易出品！一站式音樂創(chuàng)作工具！零基礎(chǔ)寫歌！

76

查看詳情

2. HTML結(jié)構(gòu)示例

假設(shè)您的年齡驗(yàn)證彈窗HTML結(jié)構(gòu)如下，通常放置在header.php或footer.php中，以便在所有頁(yè)面加載時(shí)可用：

<div id="snippet-ageTest-alertbox" style="display: none;">        
    <div id="age-test" class="main_background">
        <div class="age-test-square main_background clearfix">
            <div class="title">
                <span>    
                    Pokra?ovaním potvrzuji, ?e
                    jsem star?í 18 let
                </span>
            </div>
            <div>
                <a class="agree button-conversion" href="#">
                    Pokra?ovat
                </a>
            </div>
        </div>
    </div>
</div>

請(qǐng)注意，初始時(shí)#snippet-ageTest-alertbox的display樣式應(yīng)設(shè)置為none，以確保在JavaScript控制之前是隱藏的。

3. JavaScript集成與邏輯

接下來，將以下jQuery代碼添加到您的主題JavaScript文件或header.php/footer.php的<script>標(biāo)簽內(nèi)。為了確保WordPress的jQuery兼容性，建議使用jQuery(function($){...})包裹代碼。

jQuery(function($){
    // 定義您的Cookie名稱
    const cookieName = 'age-test';
    // 獲取Cookie值
    let ageTestCookie = getCookie(cookieName);

    // 檢查Cookie是否已設(shè)置，如果未設(shè)置則顯示彈窗
    if (ageTestCookie !== 'shown'){
        // 延遲2秒后淡入顯示彈窗，提供更好的用戶體驗(yàn)
        $("#snippet-ageTest-alertbox").delay(2000).fadeIn();
        // 設(shè)置Cookie，標(biāo)記彈窗已顯示，99天后過期
        setCookie(cookieName, 'shown', 99); 
    }

    // 綁定“Pokra?ovat”按鈕的點(diǎn)擊事件，用于關(guān)閉彈窗
    $('#snippet-ageTest-alertbox .agree.button-conversion').click(function(e) {
        e.preventDefault(); // 阻止默認(rèn)的鏈接跳轉(zhuǎn)行為
        $('#snippet-ageTest-alertbox').fadeOut(); // 淡出隱藏彈窗
    });

    // （可選）如果點(diǎn)擊彈窗背景也應(yīng)關(guān)閉，可以添加此事件
    // 注意：這可能會(huì)與按鈕點(diǎn)擊事件沖突，請(qǐng)根據(jù)實(shí)際UI設(shè)計(jì)選擇
    // $('#snippet-ageTest-alertbox').click(function(e) {
    //     // 確保點(diǎn)擊的是背景而不是彈窗內(nèi)部元素
    //     if ($(e.target).is(this)) {
    //         $('#snippet-ageTest-alertbox').fadeOut();
    //     }
    // });
});

代碼解釋：

• jQuery(function($){...})：這是WordPress推薦的jQuery安全模式，確保$符號(hào)指向jQuery庫(kù)。
• getCookie('age-test')：嘗試獲取名為age-test的Cookie。
• if (ageTestCookie !== 'shown')：如果Cookie不存在或其值不是shown，則表示用戶是首次訪問。
• $("#snippet-ageTest-alertbox").delay(2000).fadeIn()：選擇ID為snippet-ageTest-alertbox的彈窗元素，延遲2秒后以淡入效果顯示。
• setCookie('age-test', 'shown', 99)：彈窗顯示后，立即設(shè)置Cookie，將其值設(shè)為shown，并設(shè)置99天的過期時(shí)間。這意味著在接下來的99天內(nèi)，用戶再次訪問時(shí)不會(huì)看到此彈窗。
• $('#snippet-ageTest-alertbox .agree.button-conversion').click(...)：當(dāng)用戶點(diǎn)擊彈窗內(nèi)的“Pokra?ovat”按鈕時(shí)，阻止其默認(rèn)行為（如頁(yè)面滾動(dòng)），然后淡出隱藏彈窗。

注意事項(xiàng)與最佳實(shí)踐

1. 代碼放置位置：
   • 推薦： 將JavaScript代碼（包括Cookie函數(shù)和jQuery邏輯）放入一個(gè)獨(dú)立的.js文件（例如age-verify.js），并通過WordPress的wp_enqueue_script()函數(shù)在functions.php中正確加載。這樣可以提高代碼的可維護(hù)性和性能。
   • 替代方案： 如果您希望快速測(cè)試，可以直接將<script>標(biāo)簽及其內(nèi)容添加到主題的header.php或footer.php文件的<body>標(biāo)簽內(nèi)部，最好是靠近</body>標(biāo)簽，以確保HTML元素在腳本執(zhí)行時(shí)已加載。
2. CSS樣式： 本教程僅關(guān)注功能實(shí)現(xiàn)，彈窗的視覺樣式（如背景、位置、大小、字體等）需要通過CSS來定義。確保您的CSS能夠使彈窗居中、覆蓋整個(gè)屏幕，并具有適當(dāng)?shù)膶蛹?jí)（z-index）。
3. 用戶體驗(yàn)： 2秒的延遲可以避免頁(yè)面加載時(shí)彈窗立即出現(xiàn)，給用戶一個(gè)緩沖。確保彈窗的關(guān)閉按鈕或確認(rèn)按鈕清晰可見且易于點(diǎn)擊。
4. Cookie過期時(shí)間： setCookie函數(shù)中的exdays參數(shù)決定了Cookie的有效期。根據(jù)您的需求設(shè)置一個(gè)合理的值。例如，99天通常足夠長(zhǎng)，可以避免頻繁彈窗，但又不至于永久保留。
5. 輔助功能（Accessibility）： 對(duì)于模態(tài)彈窗，考慮添加ARIA屬性以增強(qiáng)屏幕閱讀器用戶的體驗(yàn)。例如，為彈窗添加role="dialog"和aria-modal="true"。
6. GDPR及隱私： 雖然年齡驗(yàn)證是特定網(wǎng)站的合規(guī)要求，但任何Cookie的使用都應(yīng)考慮GDPR等數(shù)據(jù)隱私法規(guī)。如果您的網(wǎng)站涉及歐盟用戶，可能需要告知用戶Cookie的使用情況。
7. 子主題（Child Theme）： 在修改WordPress主題文件（如header.php或functions.php）時(shí)，始終使用子主題。這可以確保在主題更新時(shí)您的修改不會(huì)丟失。

總結(jié)

通過本教程，您應(yīng)該能夠成功地在WordPress網(wǎng)站上實(shí)現(xiàn)一個(gè)基于Cookie的、僅在首次訪問時(shí)顯示的年齡驗(yàn)證彈窗。這種方法兼顧了用戶體驗(yàn)和功能需求，提供了一個(gè)穩(wěn)定且可維護(hù)的解決方案。記住，除了功能實(shí)現(xiàn)，良好的CSS樣式和對(duì)輔助功能的考慮同樣重要，可以共同提升網(wǎng)站的專業(yè)性和用戶友好性。

以上就是WordPress網(wǎng)站基于Cookie的年齡驗(yàn)證彈窗實(shí)現(xiàn)教程的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！