用一段可复制粘贴的代码,而不是插件,把 WhatsApp 聊天小部件添加到 WordPress:三种放置方法,以及多装一个插件你需要付出的代价。
搜索”WhatsApp chat widget WordPress”,大多数结果都会指向一款插件:安装它、启用它、在它自己的设置页面里配置它,从此你的网站上又多了一样东西,每次 WordPress 核心或主题更新时都得跟着更新。其实还有一条更快的路,能完全绕开插件。WhatsApp 小部件本质上就是一个浮动按钮,而浮动按钮说到底不过是几行 HTML 加一个脚本标签,WordPress 早就为它们准备好了粘贴的位置,根本不需要在插件页面里再多添一项。
下面会介绍三种不同的操作方式,取决于你的网站是怎么搭建的,以及在哪些情况下,专门的插件其实才真正物有所值。
WordPress 上的 WhatsApp 插件不是骗人的,也不是有什么问题,它确实能像代码段方案一样添加一个浮动按钮。区别在于维护它要付出的代价。WordPress 网站上的每一个插件都是每次页面加载都会运行的代码,在 WordPress 或 PHP 版本变化时需要自己跟着更新,一旦停止维护,还会被安全扫描工具标记出来。一个同时装了页面构建器、SEO 插件、缓存插件、表单插件,现在又多了一个 WhatsApp 插件的网站,相当于有五样各自独立、彼此可能冲突的东西,而 WhatsApp 小部件插件尤其容易在每一个页面上都加载自己的 CSS 和 JavaScript,不管访客到底会不会点那个按钮。
一段粘贴进去的代码没有设置页面,没有更新日志,也不会有兼容性提示。它只是主题页脚里的一个静态代码块,或者页面中的一个自定义 HTML 块,WordPress 会像对待其他任何嵌入内容一样对待它。不需要启用,也不需要打补丁。
话虽如此,插件也并非对每个网站都是错误的选择。如果你不太放心在任何地方粘贴代码,或者你希望小部件的设置能在 wp-admin 里由某个本不该碰外观 → 主题文件编辑器的人来修改,那么插件的设置界面就是更稳妥的选择。而代码段这条路,默认的前提是你不介意复制粘贴一段代码,以后只在真正想改点什么的时候才会再回来看它。
WhatsApp 聊天小部件生成器会把你的号码、按钮颜色、位置和问候语,一起转化成一个脚本标签。填好表单,WhatsApp 号码用国际格式,不带前导零或加号,选一个颜色,选择按钮放在哪个角落,工具就会输出类似这样的代码:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#25D366"
data-position-vertical="bottom"
data-position-horizontal="right"
data-offset-vertical="20"
data-offset-horizontal="20"
data-z-index="5000"
data-greeting="Hi! How can we help?"
async
defer
></script>这就是整个小部件了。不需要上传图标文件,不需要加载样式表,也没有 PHP 代码。复制它,然后根据你的 WordPress 网站是怎么搭建的,从下面三种放置方式里挑一种。
如果你的主题基于区块编辑器(Gutenberg)构建,最快的方式是直接把代码段放进某个页面,或者放进一个可复用区块,但这样做只会让小部件出现在那一个页面上。想要让小部件全站生效,区块编辑器本身其实并不是为全局注入页脚内容而设计的,除非你的主题为此专门开放了一个模板部件。
大多数支持完整站点编辑的主题,允许你直接在页脚模板里添加一个自定义 HTML 块:
因为它保存在页脚模板部件里,现在它会出现在所有使用该页脚的页面上,对大多数主题来说,这就意味着网站上的每一个页面。
经典(非区块)主题没有可视化编辑的页脚模板部件,所以这段代码要直接放进主题的 PHP 文件里:
</body> 标签,通常在文件靠近底部的位置。</body> 之前。这是唯一一种会直接触碰主题代码的方法,所以它也带来了代码段方案里唯一真正需要留意的隐患:一旦主题更新,可能会覆盖 footer.php,悄无声息地把你粘贴的内容抹掉。如果你的主题支持子主题,请把这次修改放进子主题的 footer.php 里,因为子主题文件不会被父主题的更新覆盖。如果你没有使用子主题,又不想专门为此设置一个,那么像 Insert Headers and Footers 这样功能单一、维护成本很低的插件(不是完整的 WhatsApp 小部件插件)可以为你提供一个专门的页脚输入框,完全不依赖主题文件,并且会自动在每次主题更新后依然保留。
如果网站是用页面构建器搭建的,通常都会有一个正好为此而生的小组件:
这两款构建器都会原样渲染这段原始 HTML 和脚本标签,不会像某些所见即所得内容区域那样把 <script> 标签清理掉,所以小部件加载和运行的效果,和直接粘贴进 footer.php 是完全一样的。
不管你用的是哪种方式粘贴的,都建议在隐身窗口里打开网站,避免缓存页面给你看到旧版本,并检查小部件应该出现的每一个模板:首页、一篇博客文章,以及任何使用了与网站其他部分不同模板的落地页,因为在某个主题文件或构建器模板里做的页脚修改,并不会自动覆盖使用独立模板的落地页。分别在桌面端和一台真实的手机上点击按钮。在安装了 WhatsApp 的手机上,应该会直接打开应用,并自动填好你的号码和问候语;在桌面端,则会在新标签页中打开 web.whatsapp.com。
有几种情况会把天平重新拨向安装一款专门的插件:
如果有好几个不太懂技术的人在管理这个网站,而他们都不该碰主题文件编辑器,那么插件的设置页面会比指望每个人都不去动 footer.php 更安全。如果你希望能在编辑器侧边栏用一个勾选框,按页面或文章类型来显示或隐藏小部件,而不是去修改模板文件,那种按页面区分的逻辑正是插件的 PHP 代码所擅长的,静态代码段做不到。还有,如果你已经在用一款插件跑完整的 WhatsApp Business API 集成,而这款插件本身就把小部件当作整套功能的一部分来处理,那么单独把小部件那一半换成独立的代码段,反而是多维护一样东西,而不是少维护一样。
对于最常见的情况,一个 WhatsApp 号码、一个按钮、在每个页面上表现一致,代码段能做到同样的效果,而且以后不用再为它更新什么。
这会拖慢我的 WordPress 网站吗?
脚本标签用了 async 和 defer,加载时不会阻塞页面其余部分的渲染,而且它只是一次外部请求,不像完整插件那样可能会加载好几个独立的样式和脚本文件。
这和 WP Rocket、W3 Total Cache 这类缓存插件兼容吗? 兼容。因为它是一个静态脚本标签,不是每次请求时由 PHP 渲染出来的内容,页面缓存不会干扰它,不像某些基于插件的小部件,偶尔会被激进的 HTML 压缩设置误删。
能和 WooCommerce 一起用吗? 可以,放置方式完全一样,footer.php、页脚模板部件,或者你的页面构建器的页脚模板,这三者都不关心网站上是否同时运行着 WooCommerce。
如果我的主题没有主题文件编辑器怎么办? 有些主机出于安全原因会禁用它。这种情况下,如果你的主题支持完整站点编辑,就用页脚模板部件里的自定义 HTML 块;如果你有页面构建器,就用它的嵌入小组件;或者用像 Insert Headers and Footers 这样功能单一的小插件作为备选方案,它完全不需要碰任何主题文件。
换 WordPress 主题时,需要重新粘贴这段代码吗? 需要,因为它原本是粘贴在旧主题的 footer.php 或模板部件里的。从生成器里重新复制同一段代码(你的小部件 ID 不会变),再用上面三种方法中适合新主题的那一种粘贴进去。
WhatsApp 小部件说到底就是一个脚本标签,而 WordPress 本身已经准备好了三个正好能放下它的地方:页脚模板里的自定义 HTML 块、通过主题文件编辑器修改的 footer.php,或者你的页面构建器的嵌入代码小组件。这三种方式都不需要专门安装一款插件。从 WhatsApp 聊天小部件生成器获取代码段,粘贴到与你网站搭建方式相匹配的那种方法里,它就上线了,下次 WordPress 发布新版本时,也不会再多出一样需要更新的东西。
添加 Chrome 扩展程序，彻底改变您管理业务 WhatsApp 对话的方式。