◆◆0

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

来源：企鹅SEO 2019-04-25 11:22:27 WordPress 507 0

（转自明月博客和boke123合并此文）最近很多博主都留言说明月博客的评论输入特效很炫酷，我自己也很喜欢，在输入评论时跟随光标弹出烟花很是炫酷（还可以开启屏幕震动哦！），这还是明月在【闲鱼博客】上获得的，首先要感谢【闲鱼博客】的无私分享。今天我就借花献佛也分享给大家！

首先要下载这个JS代码，上传到网站目录（具体哪里随意）

1、下载activate-power-mode.js文件（已压缩，仅有5.18KB），并上传到主题的 JS 文件夹中（如 Nana 为例，就上传 wp-content\themes\Nana\js）。

特效代码文件下载:

[reply]

地址一：https://pan.baidu.com/s/1c3QcLg

地址二：https://pan.baidu.com/share/init?surl=qYGk08G ，密码（vfrx）

[/reply]

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文件，建议给这些代码加一个判断是否为文章页或页面，是的话才加载这些代码。

8月23日更新

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/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 文件时记得修改路径哦。

重要声明

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

声明：站长码字很辛苦啊,转载时请保留本声明及附带文章链接：https://blog.tag.gg/showinfo-19-18754-0.html

亲爱的：若该文章解决了您的问题,可否收藏+评论+分享呢？