不知道大家是否注意到 boke112导航的评论输入特效,虽然有很多博主说看起来太花俏不太好,不过 boke112 倒是认为这个特效还是挺不错的,值得推荐,毕竟它可以给我们枯燥单调的评论过程增加一点点色彩生机。评论输入特效的具体效果请在本站进行评论即可看到。
也有博主认为增加这种特效会拖慢网页打开速度,其实我们的站点放在国内的话,或者已经用上CDN或缓存插件的话,对于这些几KB的JS代码也是无关紧要的,所以不用顾虑太多,喜欢就用上吧。
闲话就不多说,下面就分享具体给 WordPress 博客网站添加评论输入特效的办法:
1、下载activate-power-mode.js文件(已压缩,仅有5.18KB),并上传到主题的 JS 文件夹中(如 Nana 为例,就上传 wp-content\themes\Nana\js)。
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文件,建议给这些代码加一个判断是否为文章页或页面,是的话才加载这些代码。
如果所使用主题的 footer.php 文件内没有这个判断条件的话,建议使用以下代码:
- <?php if (is_single() || is_page() ) { ?>
- <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>
- <?php }?>
如果已经有判断条件代码 <?php if (is_single() || is_page() ) { ?>,只需要将第二步的代码添加在里面即可。
注意:如果第一步上传的路径不是在JS文件夹中,在第二步引用 activate-power-mode.js 文件时记得修改路径哦。