WordPress评论区打字烟花效果

本文参考出处:恩师 ❤ 李阳博客. 对大数据,Java开发,运维感兴趣的小伙伴,可以去逛一逛.

​ 今天在阳哥博客看见一个好玩的东西(评论区打字烟花效果),于是自己试着搞了一搞,毕竟从事互联网这个行业,不敢于尝试,不喜欢瞎折腾的猿儿,不是一个合格的猿儿,哈哈.虽然阳哥的博客写的很详细了,但是自己在搞的时候,还是遇到了一点点小问题,自己再写一遍加深印象吧.

这个效果需要上传一个JS文件，点击访问github下载zip压缩包。

该JS文件在dist文件夹下面,我将它上传到了dux/js这个文件夹下面.

然后打开wp-content/themes/dux/comments.php 文件

vim /var/www/html/wp-content/themes/dux/comments.php

在文件顶部<?php 上面添加如下代码

<script src="https://www.liupeng.mobi/wp-content/themes/dux/js/activate-power-mode-gh-pages/dist/activate-power-mode.js"></script>
<script>
    POWERMODE.colorful = true; /* make power mode colorful*/
    POWERMODE.shake = false; /* turn off shake*/
    document.body.addEventListener('input', POWERMODE);
</script>

检查一下是否可以找到该js文件

在浏览器的url中输入该地址:https://www.liupeng.mobi/wp-content/themes/dux/js/activate-power-mode-gh-pages/dist/activate-power-mode.js,看是否能查看到js内容

然后搞定,查看一下效果之前,清理一下缓存和OPcache,如果你使用了 WP Rocket插件的话.

OPcache介绍:

​ 通过将 PHP 脚本预编译的字节码存储到共享内存中来提升 PHP 的性能， 存储预编译字节码的好处就是 省去了每次加载和解析 PHP 脚本的开销。

意外收获

搜索框内打字也可以添加这个特效.方法:将上述代码添加到footer.php文件中
header.php文件中不起作用.原因待续

꧁༺๑收工๑༻꧂