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

2016-12-02 07:15 阅读 353 次 评论 37 条

不知道大家是否注意到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文件,建议给这些代码加一个判断是否为文章页或页面,是的话才加载这些代码。

如果所使用主题的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,并把步骤具体化而已。

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

发表评论


表情

  1. Joyo
    Joyo 【农民】 @回复

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

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

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

  2. YangOne
    YangOne 【镇长】 @回复

    学习了,感谢博主

  3. 靠谱学生兼职网
    靠谱学生兼职网 【市长】 @回复

    学习了,方法不错。

  4. 蔚蓝博客
    蔚蓝博客 【队长】 @回复

    感觉还不错

  5. 南通SEO
    南通SEO 【村长】 @回复

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

  6. 李主席
    李主席 【村长】 @回复

    [礼物]

  7. 西狂
    西狂 【镇长】 @回复

    IT IS BEAUTIFUL! [强]

  8. BanYuner
    BanYuner 【镇长】 @回复

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

  9. 潇湘夜雨
    潇湘夜雨 【农民】 @回复

    学习了,有空我也试试!

  10. X隐者网赚博客
    X隐者网赚博客 【农民】 @回复

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

  11. 森纯博客
    森纯博客 【县长】 @回复

    这样很卡的。

  12. 橘子书
    橘子书 【县长】 @回复

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

  13. 木庄网络博客
    木庄网络博客 【队长】 @回复

    帅气!帅气!

  14. 网赚博客
    网赚博客 【村长】 @回复

    太花哨了…没多大用处

  15. 胡杨
    胡杨 【农民】 @回复

    很实用,个人喜好吧

  16. 我爱动感单车网
    我爱动感单车网 【省长】 @回复

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

  17. 憧憬Licoy
    憧憬Licoy 【村长】 @回复

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

  18. 小萝博客
    小萝博客 【市长】 @回复

    太炫酷了

  19. 夏日博客
    夏日博客 【县长】 @回复

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

  20. 分钱榜
    分钱榜 【县长】 @回复

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

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

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

  22. DIY大全
    DIY大全 【镇长】 @回复

    很炫酷,很喜欢!

  23. 爱时尚
    爱时尚 【省长】 @回复

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

  24. 刘国栋博客
    刘国栋博客 【村长】 @回复

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

  25. 金榜台博客
    金榜台博客 【市长】 @回复

    不知道zblog能用不?