本教程详细介绍了如何在wordpress网站上实现一个自定义的年龄验证弹窗。文章聚焦于利用javascript和cookie技术，确保弹窗仅在用户首次访问时显示，并在用户点击确认后永久消失，从而提供无缝且合规的用户体验。内容涵盖了cookie的设置与获取、弹窗的html结构、javascript逻辑集成以及相关的注意事项与最佳实践。
在许多网站，特别是涉及特定内容（如酒精、烟草或成人内容）的网站中，年龄验证弹窗是必不可少的功能。理想的年龄验证弹窗应具备以下特性：只在用户首次访问时显示，用户确认后即刻消失，并且在后续访问中不再出现。本教程将指导您如何使用JavaScript和Cookie技术在WordPress中实现这样一个功能强大的自定义年龄验证弹窗。
核心机制：JavaScript Cookie操作
为了实现“只显示一次”的功能，我们需要在用户的浏览器中存储一个标记。Cookie是实现这一目标的理想选择，因为它可以在用户的不同会话之间持久化。我们将定义两个核心JavaScript函数来管理Cookie：setCookie用于设置Cookie，getCookie用于获取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 "";
}- setCookie 函数接收Cookie名称、值和过期天数作为参数。它会计算过期日期并将其添加到Cookie字符串中，确保Cookie在指定天数后自动失效。path=/确保Cookie在整个网站范围内可用。
- getCookie 函数接收Cookie名称作为参数。它会遍历document.cookie字符串，查找匹配的Cookie并返回其值。
弹窗HTML结构
弹窗的HTML结构应简洁明了，包含一个用于整个弹窗的容器，以及一个包含验证信息和确认按钮的内部元素。
<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控制其显示。
- .agree.button-conversion 是用户点击确认的按钮。我们将通过JavaScript监听这个按钮的点击事件。
- 请注意，上述HTML仅提供了结构，您需要通过CSS对其进行样式化，以实现居中、背景遮罩、响应式布局等效果。
JavaScript逻辑集成
现在，我们将Cookie操作函数与弹窗的显示/隐藏逻辑结合起来。这段JavaScript代码应在DOM加载完成后执行，并且在jQuery库加载之后。
jQuery(function($){
// 定义Cookie的名称
const cookieName = 'age-test';
// 检查Cookie是否已设置
let cookieValue = getCookie(cookieName);
// 如果Cookie未设置（即用户首次访问），则显示弹窗
if (cookieValue !== '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(); // 隐藏弹窗
});
});- jQuery(function($){...}) 是WordPress中推荐的jQuery用法，可避免与其他JavaScript库的冲突，并确保在DOM完全加载后执行代码。
- 代码首先通过getCookie检查名为age-test的Cookie。
- 如果Cookie的值不是'shown'，则认为用户是首次访问，弹窗将在2秒延迟后淡入显示，并通过setCookie将age-testCookie设置为'shown'，有效期99天。
- 随后，代码为弹窗内部的确认按钮（.agree.button-conversion）绑定了一个点击事件。当用户点击此按钮时，弹窗将淡出隐藏。e.preventDefault()阻止了标签的默认跳转行为。
完整代码示例与放置位置
为了在WordPress中实现上述功能，您可以将HTML和JavaScript代码放置在主题的适当位置。
推荐做法（通过子主题和functions.php）：
创建子主题： 这是最佳实践，可确保主题更新时您的自定义代码不会丢失。
创建自定义JavaScript文件： 在子主题目录中创建一个js文件夹，并在其中创建custom-age-popup.js文件，将上述JavaScript代码（包括setCookie和getCookie函数）放入其中。
-
通过functions.php加载脚本： 在子主题的functions.php文件中添加以下代码，以正确加载您的JavaScript文件并确保jQuery已加载。
<?php function enqueue_custom_age_popup_scripts() { // 确保jQuery已加载 wp_enqueue_script('jquery'); // 注册并加载您的自定义脚本 wp_enqueue_script( 'custom-age-popup', get_stylesheet_directory_uri() . '/js/custom-age-popup.js', array('jquery'), // 依赖jQuery null, // 版本号，可设置为文件修改时间或特定字符串 true // 在页脚加载脚本 ); } add_action('wp_enqueue_scripts', 'enqueue_custom_age_popup_scripts'); function add_age_popup_html() { ?> <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> <?php } // 将HTML通过wp_footer钩子添加到页面底部 add_action('wp_footer', 'add_age_popup_html');
快速但不太推荐的做法（直接修改主题文件）：
将JavaScript代码（包括setCookie和getCookie函数）放在主题的header.php文件中的
标签内，或者更推荐放在标签之前，确保在jQuery加载之后。HTML代码可以放在footer.php或通过其他钩子注入到页面底部。<!-- header.php 或 footer.php 的某个位置 -->
<script type="text/javascript">
// setCookie 和 getCookie 函数放在这里
function setCookie(cname, cvalue, exdays) { /* ... */ }
function getCookie(cname) { /* ... */ }
jQuery(function($){
const cookieName = 'age-test';
let cookieValue = getCookie(cookieName);
if (cookieValue !== 'shown') {
$("#snippet-ageTest-alertbox").delay(2000).fadeIn();
setCookie(cookieName, 'shown', 99);
}
$('#snippet-ageTest-alertbox .agree.button-conversion').click(function(e) {
e.preventDefault();
$('#snippet-ageTest-alertbox').fadeOut();
});
});
</script>
<!-- 确保HTML结构在脚本能够访问它之前存在 -->
<!-- 建议放在 footer.php 的 </body> 标签之前 -->
<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>注意事项与最佳实践
- CSS样式： 上述代码仅提供了功能，弹窗的视觉效果完全依赖于CSS。您需要编写相应的CSS来美化弹窗，包括背景遮罩、居中显示、响应式布局以及按钮样式等。
- 代码位置： 强烈建议通过子主题的functions.php使用wp_enqueue_script和wp_footer钩子来添加JavaScript和HTML。直接修改父主题文件会导致在主题更新时丢失您的更改。
- Cookie过期时间： setCookie函数中的exdays参数决定了Cookie的有效期。根据您的需求设置一个合理的天数（例如99天，表示用户在近三个月内不会再次看到弹窗）。
- 用户体验： 弹窗的延迟显示（delay(2000)）可以给用户一些时间加载页面内容，但如果您的验证内容非常关键，可能需要调整或移除延迟。确保弹窗在移动设备上也能良好显示。
- 合规性： 如果您的网站面向欧盟用户，请注意GDPR等数据隐私法规。虽然这个Cookie不包含个人身份信息，但任何Cookie的使用都应在隐私政策中提及。
- 可访问性： 考虑为弹窗添加适当的ARIA属性，确保屏幕阅读器用户也能理解和操作弹窗。例如，在弹窗显示时，将焦点移动到弹窗内部，并在关闭时将焦点返回到触发元素（如果适用）。
- 替代方案： 对于非常严格的年龄验证场景，仅依靠前端Cookie可能不够安全，因为用户可以清除Cookie。在这种情况下，可能需要结合后端（PHP）会话管理或更复杂的验证机制。WordPress插件市场也有许多成熟的年龄验证插件可供选择。
总结
通过本教程，您应该已经掌握了如何在WordPress中实现一个自定义的、基于Cookie的年龄验证弹窗。这种方法提供了一个灵活且高效的解决方案，确保弹窗仅在首次访问时显示，并在用户确认后永久消失，从而提升用户体验并满足特定的网站合规性要求。请务必遵循最佳实践，特别是关于代码放置和CSS样式方面，以确保网站的稳定性和可维护性。
