WordPress无法发布含JavaScript的联盟平台HTML代码求助

问题出在哪 #

• WordPress自带的编辑器（不管是古腾堡还是经典版）会自动过滤外部脚本，防止安全风险，导致带<script>标签的代码存不住也加载不出来
• Cloudflare这类防火墙会把嵌入的外部脚本识别成可疑请求，直接拦截触发403错误
• 编辑器内的预览是本地渲染的临时效果，前端预览需要真实加载外部资源，所以会出现显示不一致的情况

可行解决方案（按操作难度从易到难） #

方案1：用自定义HTML区块（古腾堡编辑器） #

• 别用普通的代码块，在区块搜索框搜「自定义HTML」，选这个区块
• 把完整的Klook联盟代码粘贴进去：

<ins class="klk-aff-widget" data-wid="55897" data-adid="819231" data-actids="16870,1109,3227" data-prod="mul_act" data-price="false" data-lang="" data-width="336" data-height="280" data-currency=""><a href="//www.klook.com/">Klook.com</a></ins>
<script type="text/javascript">
  (function (d, sc, u) {
    var s = d.createElement(sc),
      p = d.getElementsByTagName(sc)[0];
    s.type = "text/javascript";
    s.async = true;
    s.src = u;
    p.parentNode.insertBefore(s, p);
  })(
    document,
    "script",
    "https://affiliate.klook.com/widget/fetch-iframe-init.js"
  );
</script>

• 保存后如果还是被Cloudflare拦，就去Cloudflare控制台操作：
  1. 进入「防火墙」→「防火墙规则」
  2. 新建规则，允许你这篇博客的URL请求，且请求的资源包含https://affiliate.klook.com/widget/fetch-iframe-init.js

方案2：用插件拆分代码（适合完全不懂技术的人） #

• 装个叫Insert Headers and Footers的插件，激活后打开插件设置页
• 在「Footer」区域粘贴Klook的脚本部分：

(function (d, sc, u) {
    var s = d.createElement(sc),
      p = d.getElementsByTagName(sc)[0];
    s.type = "text/javascript";
    s.async = true;
    s.src = u;
    p.parentNode.insertBefore(s, p);
  })(
    document,
    "script",
    "https://affiliate.klook.com/widget/fetch-iframe-init.js"
  );

• 然后回到文章里，用自定义HTML区块只粘贴<ins>标签部分：

<ins class="klk-aff-widget" data-wid="55897" data-adid="819231" data-actids="16870,1109,3227" data-prod="mul_act" data-price="false" data-lang="" data-width="336" data-height="280" data-currency=""><a href="//www.klook.com/">Klook.com</a></ins>

• 这样拆分后，脚本不会被编辑器过滤，也更容易通过防火墙检测

方案3：改主题代码（谨慎操作，先备份） #

• 进WordPress后台→「外观」→「主题文件编辑器」，找到functions.php文件
• 在文件末尾加这段代码，让WordPress允许加载Klook的脚本：

function allow_klook_scripts() {
    wp_enqueue_script('klook-affiliate', 'https://affiliate.klook.com/widget/fetch-iframe-init.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'allow_klook_scripts');

• 保存后，在文章的自定义HTML区块里只粘贴<ins>标签部分就行

额外提醒 #

• 要是用的是经典编辑器，得装Classic Editor with Custom HTML插件，或者在编辑器设置里开「允许自定义HTML」
• 测试前清一下浏览器缓存和Cloudflare缓存，避免旧内容捣乱
• 要是还出403错误，联系主机服务商，看看是不是他们的安全插件（比如Wordfence）拦了外部脚本

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