为WordPress自定义jQuery模态框配置Cookie显示逻辑

我来帮你搞定这个Cookie控制模态弹窗的需求！你之前尝试的方向没问题，大概率是没处理好WordPress的jQuery兼容细节或者Cookie的读写逻辑。下面用js-cookie插件（比老的jQuery Cookie插件更现代、维护更活跃）来实现完整方案：

步骤1：在WordPress中引入js-cookie插件 #

首先要确保js-cookie已经正确加载。你可以通过主题的functions.php文件添加以下代码来引入（如果已经通过其他方式引入了，这步可以跳过）：

function enqueue_js_cookie() {
    // 引入CDN版本的js-cookie，或者替换成你本地的文件路径
    wp_enqueue_script( 'js-cookie', 'https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js', array(), '3.0.1', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_js_cookie' );

步骤2：修改弹窗的JS逻辑（核心部分） #

WordPress默认启用了jQuery的noConflict模式，所以不能直接用$，要改用jQuery或者用自执行函数包裹。下面是完整的代码，包含Cookie检测、弹窗初始化和按钮点击存Cookie的逻辑：

jQuery(document).ready(function($) { // 这里用$作为jQuery的别名，方便编写
    // 检查是否存在名为"modal_closed"的Cookie
    if (!Cookies.get('modal_closed')) {
        // 初始化模态弹窗
        $("#dialogForm").dialog({
            modal: true,
            resizable: false,
            autoOpen: false, // 先设为不自动打开，后面手动触发
            buttons: {
                "按钮1": function() {
                    // 设置Cookie，过期时间设为7天，路径为根目录确保全站有效
                    Cookies.set('modal_closed', 'true', { expires: 7, path: '/' });
                    $(this).dialog("close");
                },
                "按钮2": function() {
                    Cookies.set('modal_closed', 'true', { expires: 7, path: '/' });
                    $(this).dialog("close");
                }
            }
        });
        // 手动打开弹窗
        $("#dialogForm").dialog("open");
    }
});

关键细节说明 #

• Cookie参数：expires:7表示Cookie7天后过期，你可以根据需求调整天数；path:'/'确保Cookie在整个网站范围内有效，避免只在当前页面生效。
• jQuery兼容：用jQuery(document).ready(function($) { ... })包裹代码，这样在函数内部可以用$代替jQuery，写起来更顺手。
• 弹窗初始化：把autoOpen设为false，然后在确认没有Cookie后手动调用dialog("open")，避免重复触发。

如果你的弹窗按钮是HTML里的独立元素（不是dialog自带的buttons） #

如果你的弹窗按钮是写在#dialogForm内部的普通按钮，比如：

<div id="dialogForm" style="display:none;">
    <p>弹窗内容</p>
    <button class="modal-btn">确认</button>
    <button class="modal-btn">取消</button>
</div>

那JS代码可以改成这样：

jQuery(document).ready(function($) {
    if (!Cookies.get('modal_closed')) {
        $("#dialogForm").dialog({
            modal: true,
            resizable: false,
            autoOpen: true
        });
    }

    // 给弹窗内的按钮绑定点击事件
    $(".modal-btn").on("click", function() {
        Cookies.set('modal_closed', 'true', { expires: 7, path: '/' });
        $("#dialogForm").dialog("close");
    });
});

这样配置后，访客第一次访问网站会看到弹窗，点击任意按钮后Cookie会被保存，7天内再次访问就不会再显示弹窗啦。

内容的提问来源于stack exchange，提问作者Boeckske