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

前言

有博主认为增加这种特效会拖慢网页打开速度,其实我们的站点放在国内的话,或者已经用上CDN或缓存插件的话,对于这些几KB的JS代码也是无关紧要的,所以不用顾虑太多,喜欢就用上吧。闲话就不多说,下面就分享具体给 WordPress 博客网站添加评论输入特效的办法:

教程

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

[url href=https://pan.baidu.com/s/1i4GniNr]百度网盘[/url]

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

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

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

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

<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>

人已赞赏
wordpress教程

为WordPress文章发布按钮添加确认对话框

2018-8-14 21:16:55

wordpress教程

Error establishing a database connection解决办法

2018-8-29 0:33:14

3 条回复 A文章作者 M管理员
  1. 久伴

    然而没看你网站有特效

    • 久伴

      加了,然后删了,太炫酷,眼睛抵不住 😀

    • 久伴

      那就带上你的墨镜啊哈哈哈哈

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索