Elementor自定义HTML按钮onclick属性退出登录后消失，无法点击求助

这个问题本质是WordPress的KSES安全过滤机制在起作用：管理员账号有豁免权，添加的内联事件属性不会被过滤，但普通访客（非登录状态）的内容会被KSES清理掉onclick这类可能存在安全风险的内联属性。

以下是几种可行的解决方法：

方法1：用事件监听器替代内联onclick（推荐） #

放弃内联onclick属性，通过JS事件绑定的方式实现交互，完全避开KSES过滤：

1. 修改自定义HTML里的按钮，只保留ID：

   <button id="myBtn1">See More</button>
   

2. 调整代码片段中的JS，添加DOM加载完成后的事件监听：

   // 确保DOM加载完成后再绑定事件
   document.addEventListener('DOMContentLoaded', function() {
     // 找到按钮元素并绑定点击事件
     const btn = document.getElementById('myBtn1');
     if (btn) {
       btn.addEventListener('click', function() {
         myFunction(1);
       });
     }
   });
   
   // 你的原有函数逻辑
   function myFunction(num) {
     // 这里写你的功能代码
     console.log('触发函数，参数：', num);
   }
   

方法2：修改KSES规则允许onclick属性（不推荐） #

如果一定要保留内联onclick，可以通过PHP代码让KSES允许按钮标签的onclick属性，但这种做法会降低站点安全性，仅建议在完全信任内容来源的场景使用：

add_filter('wp_kses_allowed_html', function($allowedTags) {
   // 给button标签添加onclick属性的允许规则
   if (isset($allowedTags['button'])) {
     $allowedTags['button']['onclick'] = true;
   } else {
     $allowedTags['button'] = ['onclick' => true];
   }
   return $allowedTags;
});

将这段代码添加到主题的functions.php或代码片段插件中即可。

方法3：使用Elementor原生按钮组件 #

用Elementor自带的按钮组件替代自定义HTML，更兼容且不易被过滤：

1. 拖拽Elementor按钮组件到页面，设置按钮文本为「See More」，在「高级」选项卡给按钮添加自定义CSS类，比如see-more-btn-1
2. 在代码片段中添加事件监听：

   document.addEventListener('DOMContentLoaded', function() {
     const btn = document.querySelector('.see-more-btn-1');
     if (btn) {
       btn.addEventListener('click', function() {
         myFunction(1);
       });
     }
   });
   
   function myFunction(num) {
     // 你的函数逻辑
   }
   

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