b2美化第一弹_为WordPress博客网站添加评论输入特效

释放双眼,带上耳机,听听看~!

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


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

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

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

 

特效代码文件

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

 

<script src="<?php bloginfo('template_directory'); ?>/js/pltexiao.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>

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

 

<?php if (is_single() || is_page() ) { ?>

<script src="<?php bloginfo('template_directory'); ?>/js/pltexiao"></script>

<script>

POWERMODE.colorful = true;

POWERMODE.shake = false;

document.body.addEventListener('input', POWERMODE);

</script>

<?php }?>

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

 

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

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限

给TA买糖
共{{data.count}}人
人已赞赏
待测试资源所有文章

阿里百秀XIU v7.1无限制版小清新CMS高级主题

2020-1-29 23:19:23

待测试资源所有文章

苹果CMS_Dplayer播放器插件_前置广告_暂停广告

2020-2-4 7:43:52

6 条回复 A文章作者 M管理员
  1. zym001

    试试看

  2. ☯顾小北☵

    看看到底有多牛逼

  3. 陈年茶

    78887878784878

  4. 陈年茶

    66

  5. 苏亚白

    这个66666啊,

  6. L

    学习看看是啊

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