WPBakery技术求助：添加代码后包裹iframe的锚点消失

为什么包裹iframe的锚点会消失？ #

这大概率是WPBakery的HTML清理机制加上WordPress本身的安全过滤（kses）共同导致的：

• WPBakery的文本框元素（Text Block）在可视化模式下会自动过滤它认为“不安全”或不符合规范的HTML结构，<a>标签嵌套<iframe>这种组合刚好在默认过滤规则里，切换到可视化模式或者保存页面时就会被自动移除。
• 即使你在纯文本模式下添加了代码，只要不小心切换到可视化编辑器，WPBakery就会触发清理逻辑，把锚点标签删掉。
• WordPress本身的kses过滤系统也会对非管理员用户（甚至部分管理员场景）过滤掉嵌套的特殊标签组合，防止XSS风险。

解决办法（按推荐优先级排序） #

1. 使用WPBakery的「自定义HTML」模块代替文本框
   WPBakery专门提供了Custom HTML元素，这个模块的HTML过滤规则比普通文本框宽松得多，完全支持<a>包裹<iframe>的结构。操作步骤：

   • 在WPBakery编辑器里添加「Custom HTML」模块
   • 把你的HTML代码（包含锚点和iframe）粘贴进去
   • 把CSS代码放到主题的「自定义CSS」面板（外观→自定义→额外CSS）或者WPBakery页面设置里的「自定义CSS」区域，不要把CSS混在HTML里，更稳定也方便维护。

2. 锁定纯文本模式，禁止切换到可视化编辑器
   如果你坚持用文本框元素：

   • 打开文本框的编辑界面，切换到「Text」纯文本模式
   • 粘贴你的完整代码（HTML+CSS，不过还是建议把CSS分离出去）
   • 保存后绝对不要切换到Visual可视化模式，每次编辑都直接用纯文本模式，避免触发清理。

3. 调整WordPress的kses过滤规则（进阶，谨慎操作）
   如果你是站点管理员，想要彻底允许这种标签组合，可以通过主题的functions.php添加代码，让WordPress允许<a>标签嵌套<iframe>：

   add_filter('wp_kses_allowed_html', 'allow_anchor_iframe_nesting', 10, 2);
   function allow_anchor_iframe_nesting($allowed, $context) {
       if ($context === 'post') {
           $allowed['a']['iframe'] = true;
       }
       return $allowed;
   }
   

   注意：这种方式会降低一点安全门槛，只建议在你完全信任自己添加的代码时使用。

内容的提问来源于stack exchange，提问作者Herodney's Design