Docker系列 WordPress系列特效_wordpress鼠标特效-CSDN博客

本文介绍了如何在WordPress Argon主题中添加雪花飘落、鼠标点击特效和看板娘元素，包括计时器、内存占用等信息，并分享了自定义CSS和脚本的详细步骤。

转自我的个人博客https://blognas.hwb0307.com。欢迎关注！

前言

如果你编辑了某主题的footer.php，最好将该主题设置为手动更新。不然自动更新会将以前的设置覆盖掉！切记，切记！

经过《Docker系列 WordPress系列 WordPress的菜单》、《Docker系列 WordPress系列 WordPress小工具》、《Docker系列 WordPress系列 WordPress页面》三章的相关设置，其实你的博客已经有模有样了。推崇简洁的朋友可以不用再看这一章了。不过，总有一些人想玩点花样（比如我）。

大家看我的博客有哪些特效吧：https://blognas.hwb0307.com

页面飘扬着雪花/樱花
鼠标左击特效（出现文字或者是爆炸特效）
页尾特效：看板娘（就是我博客左下角那些猫猫和动漫人物）、自动更新网站运营时间、显示耗时及占用内存等

这些特效其实没有什么用途，单纯就是好看。以后等自己新鲜劲过了，说不定都会关掉。目前还是有保留。

还是写一下吧，说不定有喜欢折腾的小伙伴需要！也给自己留个备份了！

虽然我是以argon主题来示范，但对于多数主题来说应该有通用性（除了《Argon主题点击概要也可以进入文章》这一小节）。

我这里用主题文件编辑器进行脚本的插入和修改。你在shell用vim也没问题。我以前就是用vim的。

此外，你也可以看一下鸦鸦大神的魔改教程，很多代码都非常有用呢！

运行时间、耗时及占用内存

我们可以在主题文件编辑器里编辑footer.php文件：

在</footer>之前插入以下代码。在var birthDay =NewDate("2022-04-28");这里，你修改成你自己的时间即可。应该没有强迫症纠结为什么不可以设置时分秒的吧！

<!--耗时及占用内存开始-->
<span id="momk"></span><span id="momk" style="color: #ff0000;"></span>
<script type="text/javascript">
function NewDate(str) {
str = str.split('-');
var date = new Date();
date.setUTCFullYear(str[0], str[1] - 1, str[2]);
date.setUTCHours(0, 0, 0, 0);
return date;
}
function momxc() {
<!--这里要改成自己博客的诞生时间-->
var birthDay =NewDate("2022-04-28");
var today=new Date();
var timeold=today.getTime()-birthDay.getTime();
var sectimeold=timeold/1000
var secondsold=Math.floor(sectimeold);
var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
var