WordPress按用户角色限制指定按钮点击次数功能失效排查

第一步：确认脚本是否正确加载 #

• 登录测试账号打开受限页面，按F12打开开发者工具，切换到「网络」面板，筛选「JS」资源，刷新页面查看button-restrict-5.js是否成功加载，状态码是否为200。如果返回404说明路径配置错误，你当前使用的home_url() . '/button-restrict/button-restrict-5.js'需要确认站点根目录下确实存在button-restrict文件夹和对应JS文件，更稳妥的写法是换成子主题路径：get_stylesheet_directory_uri() . '/button-restrict/button-restrict-5.js'，避免站点配置子目录时路径出错。
• 切换到开发者工具的「控制台」面板，查看是否有JS报错，最常见的报错是找不到button.se-mere-knap元素，原因大概率是页面条目为动态加载（比如AJAX渲染、滚动加载），页面初始加载完成时按钮还没渲染，事件绑定直接失败。
• 确认角色权限判断逻辑正确：current_user_can( 'um_5-klik-test' )是Ultimate Member的角色权限标识，先确认测试用户所属角色对应的权限名确实为um_5-klik-test，可以临时在add_custom_script_1函数中加入调试日志error_log('角色匹配结果：' . (current_user_can( 'um_5-klik-test' ) ? '是' : '否'));，查看WordPress debug日志确认判断逻辑可以触发脚本入队。

第二步：修复现有JS代码的已知BUG #

当前JS存在多个明显问题会直接导致功能失效：

1. 多按钮适配问题
   你使用的document.querySelector( 'button.se-mere-knap' )只会匹配页面第一个符合规则的按钮，多条目场景下后续按钮不会绑定点击事件，自然不会触发限制。需要修改为匹配所有按钮：

// 替换原viewmore_button_disabled函数
function viewmore_button_disabled() {
    var btns = document.querySelectorAll( 'button.se-mere-knap' );
    const isReachLimit = Number( localStorage.counter ) >= 5;
    btns.forEach(btn => {
        btn.disabled = isReachLimit;
    });
    return isReachLimit;
}

2. 有效期计算逻辑错误
   你当前使用localStorage.expDate = new Date().setUTCSeconds( 60 * 60 * 24 * 30 );的写法是错误的，该代码会把有效期设置为1970年1月1日加30天，而非当前时间往后30天，需要替换所有设置有效期的代码：

// 初始化、到期重置有效期时都用这个写法
localStorage.expDate = new Date().getTime() + 1000 * 60 * 60 * 24 * 30;

3. 默认跳转拦截缺失
   如果按钮本身带有跳转链接，会直接跳走不执行你的计数逻辑，需要在点击函数中阻止默认行为：

function viewmore_func(e) {
    e.preventDefault(); // 新增这行阻止默认跳转
    // 剩下的原有逻辑保持不变
}

4. 动态加载内容兼容问题
   如果条目是AJAX动态加载的，新出现的按钮不会绑定事件，建议改成事件委托写法，不需要每次加载新内容重复绑定：

// 删掉原有的querySelector绑定事件代码，换成以下代码
document.addEventListener('click', function(e) {
    if (e.target && e.target.classList.contains('se-mere-knap')) {
        viewmore_func(e);
    }
});

注意：现有方案采用localStorage存储计数存在明显漏洞，用户清除缓存、更换浏览器、开无痕模式都会重置计数，多设备登录时次数也无法同步，生产环境使用建议把点击次数、有效期存在WordPress用户元数据中，每次点击通过AJAX请求后端校验，避免前端篡改。

第三步：功能验证 #

修复完成后打开开发者工具的「应用」面板，找到本地存储下的站点域名，手动把counter值改为5，刷新页面查看按钮是否变为禁用状态，点击按钮是否弹出限制提示；再手动把expDate值改为小于当前时间的数值，刷新页面查看counter是否自动重置为0即可。

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