轻松打造WordPress评论表情功能：详细步骤解析

最近，我在Plugins栏目中介绍了一款zblogPHP的评论表情插件，受到了许多网友的关注，他们询问是否有类似功能的WordPress插件。经过了解，我发现WordPress平台上也有一款心情评论插件，由博主我爱水煮鱼开发，售价为14.99元。原计划等有空时将这款zblogPHP的插件转换为WordPress版本，但没想到龙砚庭博主已经分享了一个使用畅言实验室的评论表情功能，轻松解决了这个问题。因此，今天我想和大家详细介绍一下如何在boke112导航文章页中添加评论表情。

以下是添加评论表情的步骤：

1、首先需要访问畅言官网（
http://changyan.kuaizhan.com/）并注册一个账户（也可以通过微信登录）。

注册完毕后，首次登录需要填写一些必要信息，例如网站类型、站点名称、网址和备案号（若在15天内未填写备案号将暂停服务）以及QQ等信息，完成后点击【提交并获取代码】。

2、因为我们只需要畅言的评论表情功能，而不需要评论等其他功能，所以可以直接点击【实验室】选项，接着在下方找到并选择【评论表情】。

3、在进入【评论表情】页面后，向下滚动以进行相关配置。由于本站未使用畅言评论，因而在配置信息中不勾选“追加评论、评论预设文字、字体颜色”，而且由于这些表情有抖动效果，感觉会比较好，因此“关闭抖动效果”也不需要勾选，具体设置如图所示：

接下来，我们点击“已选表情”最右侧的【修改】按钮来选择表情。似乎大家通常选择5个表情，这里我参考了站长之家进行选择，选定表情后，分别点击【确定选择】和【保存设置】按钮。顺便提一句，这些图片应为自适应格式，因此建议在设置图片宽度时留空。

如何有效添加评论表情：全面指南

重要说明：在成功添加评论表情后，所选表情的排列顺序将依据我们选择的先后进行调整。

第四步，保存配置后，向上滑动页面找到通用代码部分。接下来，点击右下角的【复制代码】按钮，以便将代码复制到剪贴板。值得注意的是，我们可以去掉一些多余的信息，仅保留div和script两行代码。

第五步，通常我们会将这些表情放置在文章的末尾。比如在我们的网站上，通用代码直接放在正文底部的广告位置，具体效果如图所示：

实际上，放置的位置并没有严格的规定，依照个人喜好即可。我建议将其直接放在文章页面的广告位上，这样便于后续管理。

小提示：

1、这些评论表情是通过畅言平台调用的，类似多说的功能。需要注意的是，这些评论数据并不存储在我们真实的数据库中。因此，如果畅言平台出现故障，评论表情的数据可能会丢失。不过，这种情况发生的概率较小，因为连站长之家也在使用畅言的评论功能。

2、由于评论表情的CSS是通过畅言调用的，若需要修改相关的样式，建议在后面加上!important，这样才能确保我们添加的样式生效。

3、对于屏幕宽度小于800px的设备（以我们网站为例），评论表情可能会出现错位。因此，建议在我们的CSS文件中添加判断条件，若屏幕宽度小于800px，则不显示评论表情，具体的CSS代码如下：

1. /** 小于或等于800px **/

2. @media screen and (max-width: 800px) {

3. #cyEmoji{

4. display: none!important;

5. }

6. }

至于判断的数值是800还是600，可以根据实际情况灵活调整。如果设置为600，只需将上述CSS中的800改为600即可。

4、这种添加评论表情的方法不仅适用于WordPress，也适用zblogPHP、zblogASP等其他程序构建的网站。