纯代码实现WordPress添加评论表情(心情)的教程

2016-03-30 07:30 阅读 661 次 评论 43 条

前几天在Plugins栏目推荐了一款zblogPHP的评论表情(心情)插件,当时有很多网友问到WordPress有没有跟这个类似的插件。后来据了解WordPress也有一款心情评论插件,是我爱水煮鱼博主开发的,售价14.99元。本想等过段时间有空了努力把这款zblogPHP版本的心情插件变成WordPress版本,没想到龙砚庭博主那么给力,直接分享了使用畅言实验室的一个评论表情功能就搞定了。所以,今天就跟大家分享一下boke112 导航文章页添加评论表情的详细过程。

添加评论表情的过程如下:

1、到畅言官网(http://changyan.kuaizhan.com/)注册一个账号(也可以用微信登录)。

纯代码实现WordPress添加评论表情(心情)的教程

注册好账号后第一次登录需要输入一些相关信息,如网站类型、站点名称、站点网址、备案号(注册15天后未填写备案号将停止服务)、QQ等,然后点击【提交并获取代码】。

纯代码实现WordPress添加评论表情(心情)的教程1

2、由于我们不想要畅言的评论等其他功能,只想要它的评论表情功能,所以我们直接点击【实验室】,然后在下方点击【评论表情】。

纯代码实现WordPress添加评论表情(心情)的教程2

3、在【评论表情】页面,直接拉到底进行相关信息配置,由于本站没有使用畅言评论,所以配置信息中的“追加评论、评论预设文字、字体颜色”都不勾选,而且这些表情有了抖动效果感觉比较好,所以“关闭抖动效果”也不要勾选,具体如下图所示:

纯代码实现WordPress添加评论表情(心情)的教程3

接着,我们点击“已选表情”最右侧的【修改】按钮进行表情选择,好像大家默认都是选择5个表情,这里就参考站长之家来选择,选好表情好分别点击【确定选择】按钮和【保存设置】按钮。PS:好像这些图片都是自适应的,所以图片宽度设置建议留空即可。

纯代码实现WordPress添加评论表情(心情)的教程4

重要提示:成功添加评论表情后,这些表情的排序是根据我们勾选的先后顺序进行排序的。

4、保存好配置信息后,往上拖动找到通用代码,然后点击右下角的【复制代码】按钮进行代码复制。PS:这里我们可以删除一些不必要的信息的,只保留div和script那两行代码即可。

纯代码实现WordPress添加评论表情(心情)的教程5

5、我们一般都是把这些表情放在文章的最后面,比如本站就直接将通用代码放在正文底部的广告位上,具体效果见下图:

纯代码实现WordPress添加评论表情(心情)的教程6

其实具体放置在那个位置,没有统一的标准,自己看着顺眼就行,个人建议直接放在文章页的广告位上面,方便管理。

温馨提示:

1、这个评论表情是调用畅言的相关数据,感觉就好比多说一样,这些评论数据好像是不存在我们真实的数据库中的,如果畅言出故障了,我们这些评论表情数据有可能会丢失。不过这个情况应该很少会出现,毕竟连站长之家也是使用这个畅言的评论心情。

2、由于这个评论表情的CSS是调用畅言的,所以我们如果要修改这个评论心情的相关CSS,建议在后面添加上!important,要不然我们添加的CSS就不会生效。

3、屏幕小于800px左右(以本站为例),评论表情或错位,所以建议在我们的CSS文件加上一个判断,如果小于800px,那么将不显示这些评论表情,具体CSS如下:

  1. /** 等于或小于800px **/
  2. @media screen and (max-width800px) {
  3.     #cyEmoji{
  4.         displaynone!important;
  5.     }
  6. }

至于是小于800还是600,这个由大家根据自己的实际情况进行调整,如为600,则只需要将上面的CSS文件的800改为600即可。

4、这个添加评论表情的方法不单单适用于WordPress,同样适用于zblogPHP、zblogASP,或其他程序建立的站点。

本文地址:http://boke112.com/2908.html
文章标签: ,   ,  
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
版权声明:本文为原创文章,版权归  所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana

发表评论


表情

  1. 青仙
    青仙 【农民】 @回复

    怎么把你博客上的“ 评论表情,打赏,分享”那一块都设置上呢?都是用畅言吗

    • boke112导航
      boke112导航【站长】2016-04-04 07:15  回复

      @青仙评论表情是用畅言的,本站早已分享,打赏是Three主题本来就有的,分享就直接是百度分享,剩下的就是一下CSS样式

  2. 好文推荐
    好文推荐 【省长】 @回复

    赞一个

  3. 阅读纵横
    阅读纵横 【县长】 @回复

    过来凑个热闹,顶个赞 [强]

  4. 米粒博客
    米粒博客 【镇长】 @回复

    看到是畅言的 就关了

  5. TeachCourse
    TeachCourse 【队长】 @回复

    添加畅言后,感觉一下上档次了,互动更多了,也方便许多,博主都可以试试滴

  6. 小C博客
    小C博客 【县长】 @回复

    等有时间搞上去!!感谢分享!!

  7. 微部落博客
    微部落博客 【总理】 @回复

    这组表情还真有点萌

  8. 玉满斋
    玉满斋 【市长】 @回复

    学习了,有空要试一下的!

  9. 点思博客
    点思博客 【队长】 @回复

    刚从你的博客回来!!!!

  10. 龙砚庭
    龙砚庭 【市长】 @回复

    我之前在调用的时候是直接用代码屏蔽了移动端的显示,毕竟移动端不需要那么多的花俏,只要内容!

  11. 留芳网
    留芳网 【镇长】 @回复

    其实还不错,不过这个样式不太喜欢。

  12. 百度云资源电影-videoclub
    百度云资源电影-videoclub 【省长】 @回复

    呵呵 畅言不错的 现在很多人都在用

  13. 麻布兜
    麻布兜 【队长】 @回复

    这个是畅言的?有办法按照点击不同表情排名吗

    • boke112导航
      boke112导航【站长】2016-03-31 11:56  回复

      @麻布兜这个还没有研究过,理论上应该是可以的吧,如果这些数据能够保存在我们自己的数据库中就很容易调用了,你可以关注一下畅言的相关内容看看

  14. 奋斗之路
    奋斗之路 【队长】 @回复

    这个可以有!

  15. 大城小我
    大城小我 【市长】 @回复

    畅言bi多数好用??

  16. 陌小雨博客
    陌小雨博客 【县长】 @回复

    其实有一款心情评论插件的,陌小雨也曾经推荐过:http://www.dedewp.com/2353.html,My Mood Comment,图片可以自定义,很方便。

    • 雅兮网
      雅兮网 【农民】2016-03-30 11:52  回复

      @陌小雨博客那查件我用过,感觉体验一般般

      • 陌小雨博客
        陌小雨博客 【县长】2016-03-30 21:53  回复

        @雅兮网个人感觉还是很不错的,可以自定义图片和前台输出,需要一点点的动手能力,还是很不错的。还有为啥选中下面的有人回复时邮件通知我,你回复我 我怎么没收到通知?

    • boke112导航
      boke112导航【站长】2016-03-31 11:57  回复

      @陌小雨博客这个插件我也试过,没有没有这个畅言的评论表情这么给力

  17. 网际电脑
    网际电脑 【市长】 @回复

    评论表情好用么?

  18. 阅读纵横
    阅读纵横 【县长】 @回复

    多说的评论可以同时同步到本地数据库,我前段时间试过。

    • boke112导航
      boke112导航【站长】2016-03-31 11:59  回复

      @阅读纵横是的,以前我用多说评论的时候就可以同步,不过现在用畅言的这个评论表情不知道是否可以?

  19. Koolight
    Koolight 【省长】 @回复

    这个又是有贝岸要求的,记得张戈博客有这个功能,不知道是怎么实现的。

  20. 玉满斋
    玉满斋 【市长】 @回复

    这个可以有,收了!

  21. 明月登楼
    明月登楼 【总理】 @回复

    好东西呀!可以尝试着弄成本地的!

  22. 雅兮网
    雅兮网 【省长】 @回复

    哇,这个太好了,正在找类似的插件,网海无限,贵在分享啊,赞赞赞

    • boke112导航
      boke112导航【站长】2016-03-31 12:02  回复

      @雅兮网[呲牙] 其实站长之家很早就用了,现在查看它的代码才知道它也是用畅言的这个评论表情