WordPress保存后Tawk.to JS聊天触发链接消失问题求助

开发者阿泽

2026-8-27

问题产生原因

WordPress 内置了 KSES 内容安全过滤机制，对所有通过编辑器提交存入数据库的内容，都会做白名单校验：href 属性中出现的 javascript: 伪协议属于默认拦截的高风险内容，无论在文本编辑模式粘贴原始代码，还是在可视化模式给文本加对应超链接，点击保存时系统都会自动把这部分违规代码剥离，最终导致 Tawk.to 的触发链接消失。这是 WordPress 的默认安全防护逻辑，不是 Tawk.to 插件故障，也不是编辑器操作问题。

可行修复方案

以下三个方案均可解决问题，按自身操作习惯选择即可：

方案1：短代码实现（兼容性最好，不会被后续版本更新影响）
把下面的代码添加到当前启用主题的 functions.php 文件中：
```
// Tawk.to聊天唤起短代码
function tawk_chat_trigger($atts, $content = 'Click to Chat') {
    return '<a href="javascript:void(Tawk_API.toggle())" class="tawk-chat-link">' . do_shortcode($content) . '</a>';
}
add_shortcode('tawk_chat', 'tawk_chat_trigger');
```
代码添加完成后，不需要再在编辑器里粘贴原始JS链接，直接在需要放聊天入口的位置插入短代码 [tawk_chat] 即可；如果要自定义链接显示文本，写成 [tawk_chat]点我在线咨询[/tawk_chat] 就行，短代码属于WordPress原生支持的语法，保存时不会被过滤，前台会自动渲染成正常的触发链接。
方案2：普通锚点+事件绑定（无需修改PHP代码）
绕开在href里写JS的逻辑，先在编辑器里给点击文本加普通锚点链接，链接地址填#tawk-chat，给链接加自定义类名tawk-trigger，对应代码如下：
```
<a href="#tawk-chat" class="tawk-trigger">Click to Chat</a>
```
这类普通锚点链接完全符合WordPress内容白名单规则，保存时不会被过滤。之后把下面的JS代码添加到主题的「自定义JS」设置项（绝大多数正规主题都自带自定义代码入口，Tawk.to插件后台也支持添加自定义JS）：
```
document.addEventListener('DOMContentLoaded', function() {
    const triggers = document.querySelectorAll('.tawk-trigger');
    triggers.forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            if (typeof Tawk_API !== 'undefined') Tawk_API.toggle();
        })
    })
})
```
前台点击这个锚点时，会直接拦截默认跳转行为，唤起Tawk.to聊天窗口，效果和官方给的触发链接完全一致。
方案3：直接写入主题模板（适合固定位置的聊天入口）
如果要加的聊天入口是网站全局固定位置（比如你贴出的头部咨询位代码），不要把这段代码写到单篇文章/页面的编辑器里，直接到WordPress后台「外观-主题文件编辑器」，找到对应位置的模板文件（比如头部的header.php、侧边栏模板或者页脚模板），把准备好的完整代码片段直接粘贴到模板对应位置保存即可。模板文件的代码不会走编辑器的KSES内容过滤流程，保存后就能正常生效，操作前建议先备份对应模板文件，避免改错导致站点报错。

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