本教程详细介绍了如何在wordpress网站上实现一个自定义的年龄验证弹窗。文章聚焦于利用javascript和cookie技术，确保弹窗仅在用户首次访问时显示，并在用户点击确认后永久消失，从而提供无缝且合规的用户体验。内容涵盖了cookie的设置与获取、弹窗的html结构、javascript逻辑集成以及相关的注意事项与最佳实践。
在许多网站，特别是涉及特定内容（如酒精、烟草或成人内容）的网站中，年龄验证弹窗是必不可少的功能。理想的年龄验证弹窗应具备以下特性：只在用户首次访问时显示，用户确认后即刻消失，并且在后续访问中不再出现。本教程将指导您如何使用JavaScript和Cookie技术在WordPress中实现这样一个功能强大的自定义年龄验证弹窗。
为了实现“只显示一次”的功能，我们需要在用户的浏览器中存储一个标记。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 "";
}弹窗的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>现在，我们将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(); // 隐藏弹窗
});
});为了在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文件中的<head>标签内，或者更推荐放在</body>标签之前，确保在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>通过本教程，您应该已经掌握了如何在WordPress中实现一个自定义的、基于Cookie的年龄验证弹窗。这种方法提供了一个灵活且高效的解决方案，确保弹窗仅在首次访问时显示，并在用户确认后永久消失，从而提升用户体验并满足特定的网站合规性要求。请务必遵循最佳实践，特别是关于代码放置和CSS样式方面，以确保网站的稳定性和可维护性。
以上就是WordPress自定义年龄验证弹窗的实现与优化的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
379
收藏
