WordPress博客添加评论框输入特效 2017.08.23更新

  • 2017-08-14
  • 742
  • 5
  • 4

*更新:2017.08.23,加入判断移动设备。部分浏览器卡顿,移动设备移除特效

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

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

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

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

特效代码文件下载

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

请查看第一段代码

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

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

请查看第二段代码

如果移动设备异常特效,以下代码判断移动端:

<?php if (is_single() || is_page() ) { ?>
<script src="<?php%20bloginfo('template_directory');%20?>/js/activate-power-mode.js%20"></script>
<script type="text/javascript"> 
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()))){
POWERMODE.colorful = true;
POWERMODE.shake = false;
document.body.addEventListener('input', POWERMODE); 
}
</script>

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

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

重要声明

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

评论

  • llllllllll回复
    Firefox 54 Firefox 54 Windows 7 Windows 7

    这个不太好,建议用 检测按键按下事件 的方法来做特效。我用的是QQ输入法,打中文 字没提到输入框里就没有特效,看着好不爽。

    • Waylee回复
      Google Chrome 61 Google Chrome 61 Windows 10 Windows 10

      谷歌浏览器+搜狗不需要输入,打字就能显示特效。就是手机版需要中文字输入进去了才显示

  • 懿古今回复
    Google Chrome 55 Google Chrome 55 Windows 7 Windows 7

    有这个特效其实很不错的,个人认为值得推荐

    • Waylee回复
      MIUI Browser 9 MIUI Browser 9 Android 6.0.1 Android 6.0.1

      效果是不错,目前小米自带浏览器卡顿比较严重。其他还好。

  • 月宅回复
    QQbrowser 9 QQbrowser 9 Windows 7 Windows 7

    哈哈,我用的input

发表评论