WordPress网站基于Cookie的年龄验证弹窗实现教程

本教程详细介绍了如何在wordpress网站上实现一个仅在首次访问时显示的年龄验证弹窗。通过利用javascript的cookie功能，文章提供了设置和获取cookie的实用函数，并指导如何将其集成到jquery代码中，以控制弹窗的显示逻辑和关闭行为，确保用户体验和合规性。

引言：WordPress网站年龄验证弹窗的挑战

在某些特定类型的WordPress网站上，例如销售酒精、烟草或成人内容，强制性的年龄验证弹窗是合规性的重要组成部分。理想的年龄验证弹窗应具备以下特性：

1. 首次访问显示： 仅在用户首次访问网站时弹出，避免重复打扰。
2. 模态化设计： 弹窗覆盖页面内容，要求用户进行交互才能继续浏览。
3. 点击关闭： 用户确认年龄后，弹窗应立即消失，且在后续访问中不再出现。

直接使用localStorage或简单的jQuery脚本可能无法在WordPress环境中完美实现这些要求，尤其是在跨会话（session）或跨页面访问时保持状态。本文将介绍一种基于JavaScript Cookie的稳健解决方案。

核心机制：JavaScript Cookie的应用

为了实现“仅在首次访问显示”的功能，我们需要一种机制来在用户的浏览器中持久化地存储一个状态。Cookie是实现这一目标的理想选择，因为它可以在用户的浏览器中设置一个带有过期时间的键值对，并在后续请求中被网站读取。

1. Cookie操作函数

首先，我们需要两个核心的JavaScript函数来设置和获取Cookie：

/**
 * 设置一个Cookie
 * @param {string} cname - Cookie的名称
 * @param {string} cvalue - Cookie的值
 * @param {number} exdays - Cookie的过期天数
 */
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 "";
}

这些函数应该被放置在您的WordPress主题的JavaScript文件中，或者直接嵌入到header.php或footer.php的<script>标签内。

弹窗显示与隐藏逻辑

有了Cookie操作函数后，我们可以编写jQuery代码来控制弹窗的显示和隐藏。

网易天音

网易出品！一站式音乐创作工具！零基础写歌！

76

查看详情

2. HTML结构示例

假设您的年龄验证弹窗HTML结构如下，通常放置在header.php或footer.php中，以便在所有页面加载时可用：

<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>

请注意，初始时#snippet-ageTest-alertbox的display样式应设置为none，以确保在JavaScript控制之前是隐藏的。

3. JavaScript集成与逻辑

接下来，将以下jQuery代码添加到您的主题JavaScript文件或header.php/footer.php的<script>标签内。为了确保WordPress的jQuery兼容性，建议使用jQuery(function($){...})包裹代码。

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

    // 检查Cookie是否已设置，如果未设置则显示弹窗
    if (ageTestCookie !== 'shown'){
        // 延迟2秒后淡入显示弹窗，提供更好的用户体验
        $("#snippet-ageTest-alertbox").delay(2000).fadeIn();
        // 设置Cookie，标记弹窗已显示，99天后过期
        setCookie(cookieName, 'shown', 99); 
    }

    // 绑定“Pokračovat”按钮的点击事件，用于关闭弹窗
    $('#snippet-ageTest-alertbox .agree.button-conversion').click(function(e) {
        e.preventDefault(); // 阻止默认的链接跳转行为
        $('#snippet-ageTest-alertbox').fadeOut(); // 淡出隐藏弹窗
    });

    // （可选）如果点击弹窗背景也应关闭，可以添加此事件
    // 注意：这可能会与按钮点击事件冲突，请根据实际UI设计选择
    // $('#snippet-ageTest-alertbox').click(function(e) {
    //     // 确保点击的是背景而不是弹窗内部元素
    //     if ($(e.target).is(this)) {
    //         $('#snippet-ageTest-alertbox').fadeOut();
    //     }
    // });
});

代码解释：

• jQuery(function($){...})：这是WordPress推荐的jQuery安全模式，确保$符号指向jQuery库。
• 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)：弹窗显示后，立即设置Cookie，将其值设为shown，并设置99天的过期时间。这意味着在接下来的99天内，用户再次访问时不会看到此弹窗。
• $('#snippet-ageTest-alertbox .agree.button-conversion').click(...)：当用户点击弹窗内的“Pokračovat”按钮时，阻止其默认行为（如页面滚动），然后淡出隐藏弹窗。

注意事项与最佳实践

1. 代码放置位置：
   • 推荐： 将JavaScript代码（包括Cookie函数和jQuery逻辑）放入一个独立的.js文件（例如age-verify.js），并通过WordPress的wp_enqueue_script()函数在functions.php中正确加载。这样可以提高代码的可维护性和性能。
   • 替代方案： 如果您希望快速测试，可以直接将<script>标签及其内容添加到主题的header.php或footer.php文件的<body>标签内部，最好是靠近</body>标签，以确保HTML元素在脚本执行时已加载。
2. CSS样式： 本教程仅关注功能实现，弹窗的视觉样式（如背景、位置、大小、字体等）需要通过CSS来定义。确保您的CSS能够使弹窗居中、覆盖整个屏幕，并具有适当的层级（z-index）。
3. 用户体验： 2秒的延迟可以避免页面加载时弹窗立即出现，给用户一个缓冲。确保弹窗的关闭按钮或确认按钮清晰可见且易于点击。
4. Cookie过期时间： setCookie函数中的exdays参数决定了Cookie的有效期。根据您的需求设置一个合理的值。例如，99天通常足够长，可以避免频繁弹窗，但又不至于永久保留。
5. 辅助功能（Accessibility）： 对于模态弹窗，考虑添加ARIA属性以增强屏幕阅读器用户的体验。例如，为弹窗添加role="dialog"和aria-modal="true"。
6. GDPR及隐私： 虽然年龄验证是特定网站的合规要求，但任何Cookie的使用都应考虑GDPR等数据隐私法规。如果您的网站涉及欧盟用户，可能需要告知用户Cookie的使用情况。
7. 子主题（Child Theme）： 在修改WordPress主题文件（如header.php或functions.php）时，始终使用子主题。这可以确保在主题更新时您的修改不会丢失。

总结

通过本教程，您应该能够成功地在WordPress网站上实现一个基于Cookie的、仅在首次访问时显示的年龄验证弹窗。这种方法兼顾了用户体验和功能需求，提供了一个稳定且可维护的解决方案。记住，除了功能实现，良好的CSS样式和对辅助功能的考虑同样重要，可以共同提升网站的专业性和用户友好性。

以上就是WordPress网站基于Cookie的年龄验证弹窗实现教程的详细内容，更多请关注php中文网其它相关文章！