如何给WordPress博客网站添加评论输入特效

 2016-12-02 07:15:44  786 人阅读  46 条评论

投放广告联系   诚邀合作伙伴   赞助我们   垃圾评论惩罚

不知道大家是否注意到 boke112导航的评论输入特效,虽然有很多博主说看起来太花俏不太好,不过 boke112 倒是认为这个特效还是挺不错的,值得推荐,毕竟它可以给我们枯燥单调的评论过程增加一点点色彩生机。评论输入特效的具体效果请在本站进行评论即可看到。

如何给WordPress博客网站添加评论输入特效

也有博主认为增加这种特效会拖慢网页打开速度,其实我们的站点放在国内的话,或者已经用上CDN或缓存插件的话,对于这些几KB的JS代码也是无关紧要的,所以不用顾虑太多,喜欢就用上吧。

闲话就不多说,下面就分享具体给 WordPress 博客网站添加评论输入特效的办法:

1、下载activate-power-mode.js文件(已压缩,仅有5.18KB),并上传到主题的 JS 文件夹中(如 Nana 为例,就上传 wp-content\themes\Nana\js)。

2、将以下代码添加到主题的 footer.php 文件适当的位置

  1. <script src="<?php bloginfo('template_directory'); ?>/js/activate-power-mode.js "></script>
  2. <script>
  3. POWERMODE.colorful = true;
  4. POWERMODE.shake = false;
  5. document.body.addEventListener('input', POWERMODE);
  6. </script>

因为这个输入特效只有在评论的时候有用,所以为了不乱加载这些JS文件,建议给这些代码加一个判断是否为文章页或页面,是的话才加载这些代码。

8月23日更新

PS:有很多博主反馈说这个打字特效在移动端打字时特别卡,所以我们可以考虑移动端不显示这个特效,仅仅在 PC 端显示这个打字特效即可。做法就是给第2步的JS添加一个判断,具体修改如下:

  1. <script type="text/javascript">
  2. if(!(/iphone|ipod|ipad|ipad|Android|nokia|blackberry|webos|webos|webmate|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile/i.test(navigator.userAgent.toLowerCase()))){
  3. POWERMODE.colorful = true;
  4. POWERMODE.shake = false;
  5. document.body.addEventListener('input', POWERMODE);
  6. }
  7. </script>

如果所使用主题的 footer.php 文件内没有这个判断条件的话,建议使用以下代码:

  1. <?php if (is_single() || is_page() ) { ?>
  2. <script src="<?php bloginfo('template_directory'); ?>/js/activate-power-mode.js "></script>
  3. <script>
  4. POWERMODE.colorful = true;
  5. POWERMODE.shake = false;
  6. document.body.addEventListener('input', POWERMODE);
  7. </script>
  8. <?php }?>

如果已经有判断条件代码 <?php if (is_single() || is_page() ) { ?>,只需要将第二步的代码添加在里面即可。

注意:如果第一步上传的路径不是在JS文件夹中,在第二步引用 activate-power-mode.js 文件时记得修改路径哦。

重要声明

本文所使用的.js文件、代码及方法均来自闲鱼博客分享的《WordPress优化:给博客添加评论输入特效》这篇文章,本文仅对 activate-power-mode.js 文件进行压缩,从原来的9.29KB压缩成5.18KB,并把步骤具体化而已。

如果文章对你有帮助,请赞赏支持boke112导航发展!

历史上的今天:

本文地址:https://boke112.com/3681.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归  所有,欢迎分享本文,转载请保留出处!
淘宝天猫无门槛专享优惠券

 发表评论


  1. mengkun
    mengkun 【小白】 @回复

    判断移动端可以用 wordpress 自带的函数呀:
    if (!wp_is_mobile())
    [嘻嘻]

  2. voice站点
    voice站点 【小白】 @回复

    知更鸟主题失败了,这是为什么?

    • 懿古今
      懿古今【村长】2017-09-18 10:51  回复

      @voice站点知更鸟主题的也有很多人使用这个特效,所以说这个跟主题应该没没什么关系,自行检查是否正确添加了,JS是否正确加载了等等。

  3. Waylee
    Waylee 【举人】 @回复

    不错,添加成功,评论底图文章在哪呀

    • 懿古今
      懿古今【村长】2017-08-15 11:29  回复

      @Waylee评论底图就是为评论框添加背景图片而已,直接看CSS代码就能看出来,自行折腾吧。

  4. Waylee
    Waylee 【举人】 @回复

    添加成功,哈哈,很棒很棒。。。。不过还希望有更多特效。 嗯。评论框图片教程有么?

  5. 阁楼
    阁楼 【秀才】 @回复

    好东西啊

  6. 从良未遂
    从良未遂 【小白】 @回复

    成功盗用,感谢分享。

  7. 搜罗网
    搜罗网 【小白】 @回复

    成功盗用

  8. Joyo
    Joyo 【小白】 @回复

    成功用上了,感觉还不错,有兴趣的来我这也试试

    • boke112导航
      boke112导航【村长】2017-03-16 17:49  回复

      @Joyo[嘻嘻] 这个实现起来还是很简单的,而且有了这个特效,感觉给力很多

  9. YangOne
    YangOne 【进士】 @回复

    学习了,感谢博主

  10. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    学习了,方法不错。

  11. 蔚蓝博客
    蔚蓝博客 【书童】 @回复

    感觉还不错

  12. 南通SEO
    南通SEO 【秀才】 @回复

    貌似对网站访问速度也没啥影响啊,呵呵

    • boke112导航
      boke112导航【村长】2016-12-05 17:47  回复

      @南通SEOJS文件这么小可以忽略的

      • 南通SEO
        南通SEO 【秀才】2016-12-05 17:49  回复

        @boke112导航恩恩,已经添加特效了。看着很炫
        评论底图也和你同步了,哈哈

  13. 李主席
    李主席 【秀才】 @回复

    [礼物]

  14. 西狂
    西狂 【进士】 @回复

    IT IS BEAUTIFUL! [强]

  15. BanYuner
    BanYuner 【进士】 @回复

    之前在咸鱼博客上面看到过了 但是一直没有添加

  16. 潇湘夜雨
    潇湘夜雨 【小白】 @回复

    学习了,有空我也试试!

  17. X隐者网赚博客
    X隐者网赚博客 【小白】 @回复

    注意到了,还是挺好看的,小细节上才能显出大不同

  18. 森纯博客
    森纯博客 【进士】 @回复

    这样很卡的。

  19. 橘子书
    橘子书 【丞相】 @回复

    [偷笑] 前阶段,这段代码很火啊,几乎多个网站同时用上了文字特效。

    • boke112导航
      boke112导航【村长】2016-12-02 17:39  回复

      @橘子书看来我是严重脱节了,以前竟然没有看到这个特效 [抓狂]

  20. 木庄网络博客
    木庄网络博客 【书童】 @回复

    帅气!帅气!

  21. 网赚博客
    网赚博客 【举人】 @回复

    太花哨了…没多大用处

  22. 胡杨
    胡杨 【小白】 @回复

    很实用,个人喜好吧

  23. 我爱动感单车网
    我爱动感单车网 【尚书】 @回复

    [微笑] 这个早些天已经在闲鱼博客看到,当时还是挺为之心动的。后来想想自个还是喜欢简洁些为好,不就打个字嘛老是迸出彩色的点点,晃得我实在眼花+头晕!

  24. 憧憬Licoy
    憧憬Licoy 【秀才】 @回复

    这个我之前也弄的有,不过更换了主题就把之前的很多特效都去掉了。

    • boke112导航
      boke112导航【村长】2016-12-02 15:02  回复

      @憧憬Licoy一些简单的特效偶尔玩玩还是不错的,如果要加载的文件太多太大的特效就没必要玩了

    • 橘子书
      橘子书 【丞相】2016-12-02 19:50  回复

      @憧憬Licoy前阶段你在问的评论工具条,已经整理发布在我的博客了。 [偷笑]

  25. 小萝博客
    小萝博客 【状元】 @回复

    太炫酷了

  26. 夏日博客
    夏日博客 【进士】 @回复

    呵呵,有些花哨,我还是比较干净一点的。

    • 我爱动感单车网
      我爱动感单车网 【尚书】2016-12-02 14:40  回复

      @夏日博客[憨笑] 我俩的想法,不谋而合哦!

  27. 分钱榜
    分钱榜 【进士】 @回复

    太帅了。谁能改成评论一下,撒一堆钱 [坏笑]

    • boke112导航
      boke112导航【村长】2016-12-02 12:55  回复

      @分钱榜[强] 这个也太狠太俗了吧,不过我喜欢 [偷笑]

    • 我爱动感单车网
      我爱动感单车网 【尚书】2016-12-02 14:40  回复

      @分钱榜[鼓掌] 你的想法很有才,如果真能改成这样的特效,我倒很想用用,呵呵!

  28. 雅兮网
    雅兮网 【尚书】 @回复

    这个让人打字停不下来 [偷笑]

  29. DIY大全
    DIY大全 【进士】 @回复

    很炫酷,很喜欢!

  30. 爱时尚
    爱时尚 【尚书】 @回复

    我昨天就发现博主的网站有这个功能了

  31. 刘国栋博客
    刘国栋博客 【秀才】 @回复

    真是好玩儿,打字打的停不下来了,哈哈

  32. 金榜台博客
    金榜台博客 【状元】 @回复

    不知道zblog能用不?