本文介绍了如何在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 daysold=Math.floor(e_daysold);
var e_hrsold=(daysold-e_daysold)*-24;
var hrsold=Math.floor(e_hrsold);
var e_minsold=(hrsold-e_hrsold)*-60;
var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
document.getElementById("momk").innerHTML = "本站已安全运行："+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒<br>";
setTimeout(momxc, 1000);
}momxc();
</script>
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>
<?php printf(' | 耗时 %.3f 秒 | 查询 %d 次 | 内存 %.2f MB |',timer_stop( 0, 3 ),get_num_queries(),memory_get_peak_usage() / 1024 / 1024);?><br>
<!--耗时及占用内存结束-->
差不多是这样，大家体会一下它的位置：
加完代码后，记得更新文件。这时去页面的下面看一下：
逼格拉满！
雪花/樱花特效
我这里提供的特效，在手机等设备是不生效的。因为手机的界面太小，特效会导致观看效果很差。
同样，也是编辑footer.php文件。还是刚刚那个界面。在末尾</body>上方（这样可以最后加载特效，以免影响其他内容的访问速度），添加以下代码：
<!--全页特效开始-->
<script type="text/javascript">
var system ={};
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
// 电脑生效，手机不生效
if(system.win||system.mac||system.xll){
// 雪花
$.getScript("https://api.dujin.org/js/xiaxue/xiaxue.js");
// 樱花 (想用樱花，就去掉下面命令的//注释)
// $.getScript("https://cdn.jsdelivr.net/gh/ivampiresp/special-JavaScript/yinghua.js");
}
</script>
<!--全页特效结束-->
像这样：
更新文件后生效。
效果图如下：
鼠标文字特效
和雪花特效是一样的用法。在末尾</body>上方加入。当然这个文字就自定义了！
<!--鼠标特效开始-->
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<!--鼠标特效结束-->
看板娘
看板娘看上去很炫，但其实只有一段简单的代码。也是加在</body>之前，类似于：
<!--看板娘-->
<script src="https://cdn.jsdelivr.net/gh/huangwb8/live2d_bensz@latest/front/autoload.js"></script>
这个是我自己根据几位大佬的项目来改装的。你有心思和能力，就去折腾了！当时我折腾了3天，还是没有实现最佳效果。
你可看一下我托管在github上的代码：https://github.com/huangwb8/live2d_bensz。这个项目你可以作为一个参考。你要学习自定义看板娘，还是要在这些大佬的项目里仔细地查看文档：
默认情况下我已经放了很多看板娘进去了：
其中tororo是白猫，hijiki是黑猫。平时我一般也只是将tororo调用出来。这玩意看上去炫，其实你并不会特别地需要它的！
你想自定义的话，可以直接fork项目live2d_bensz，然后将other里的模型放到prefer，修改/back/model_list.json，并将每个model的*.model.json改名为index.json即可。CDN更新可能有点慢，可能要24小时。你可以去鸦鸦那里看教程，我也是学TA的：https://crowya.com/1092。
如果你没有相关的编程知识，不推荐去折腾这个。直接粘贴完整。
或者请个大佬来帮你折腾吧！
其实看板娘也可以托管在自己的WordPress里，而不像我这样通过Github的CDN服务。不过我觉得这样做，以后别人可以直接copy我的代码用。说不定，也有不少爱猫人士呢！
Argon主题点击概要也可以进入文章
在默认情况下，我们的文章只能通过点击标题（绿色框）进入。按这个设置后，你点击概要（红色框）也可以进入文章！
主要参考：https://wangwangyz.site/archives/835。
这里我简单地贴一下大佬的教程吧，以防他的链接失效：
这一串代码是：
onclick="window.location.href='<?php the_permalink(); ?>'" style="cursor: pointer"
自定义css
这里我主要是参考鸦鸦的Argon 主题修改记录。我去除了一些自己不想要的css样式。完整版大家可以去看TA的博客。我觉得这个背景板透明等特效还是不错的！整个主题好看很多。
从后台左侧栏的外观——自定义，找到额外css：
在下方空白处填写：
/*白天卡片背景透明*/
.card{
background-color:rgba(255, 255, 255, 0.8) !important;
/*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
-webkit-backdrop-filter:blur(6px);
}
/*小工具栏背景完全透明*/
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
background-color:#ffffff00 !important;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.emotion-keyboard,#fabtn_blog_settings_popup{
background-color:rgba(255, 255, 255, 0.95) !important;
}
/*左侧栏层级置于上层*/
#leftbar_part1 {
z-index: 1;
}
/*分类卡片透明*/
.bg-gradient-secondary{
background:rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter:blur(10px);
}
/*夜间透明*/
html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{
background:rgba(66, 66, 66, 0.9) !important;
}
html.darkmode #fabtn_blog_settings_popup{
background:rgba(66, 66, 66, 0.95) !important;
}
/*标签背景
.post-meta-detail-tag {
background:rgba(255, 255, 255, 0.5)!important;
}*/
/*分类卡片文本居中*/
#content > div.page-information-card-container > div > div{
text-align:center;
}
/*子菜单对齐及样式调整*/
.dropdown-menu .dropdown-item>i{
width: 10px;
}
.dropdown-menu>a {
color:var(--themecolor);
}
.dropdown-menu{
min-width:max-content;
}
.dropdown-menu .dropdown-item {
padding: .5rem 1.5rem 0.5rem 1rem;
}
.leftbar-menu-subitem{
min-width:max-content;
}
.leftbar-menu-subitem .leftbar-menu-item>a{
padding: 0rem 1.5rem 0rem 1rem;
}
/*左侧菜单栏突出颜色修改*/
.leftbar-menu-item > a:hover, .leftbar-menu-item.current > a{
background-color: #f9f9f980;
}
/*站点概览分隔线颜色修改*/
.site-state-item{
border-left: 1px solid #aaa;
}
.site-friend-links-title {
border-top: 1px dotted #aaa;
}
#leftbar_tab_tools ul li {
padding-top: 3px;
padding-bottom: 3px;
border-bottom:none;
}
html.darkmode #leftbar_tab_tools ul li {
border-bottom:none;
}
/*左侧栏边距修改*/
.tab-content{
padding:10px 0px 0px 0px !important;
}
.site-author-links{
padding:0px 0px 0px 10px ;
}
/*目录位置偏移修改*/
#leftbar_catalog{
margin-left: 0px;
}
/*目录条目边距修改*/
#leftbar_catalog .index-link{
padding: 4px 4px 4px 4px;
}
/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools{
font-size: 14px;
}
/*正文图片边距修改*/
article figure {margin:0;}
/*正文表格样式修改*/
article table > tbody > tr > td,
article table > tbody > tr > th,
article table > tfoot > tr > td,
article table > tfoot > tr > th,
article table > thead > tr > td,
article table > thead > tr > th{
padding: 8px 10px;
border: 1px solid;
}
/*表格居中样式*/
.wp-block-table.aligncenter{margin:10px auto;}
/*回顶图标放大*/
button#fabtn_back_to_top, button#fabtn_go_to_comment, button#fabtn_toggle_blog_settings_popup, button#fabtn_toggle_sides, button#fabtn_open_sidebar{
font-size: 1.2rem;
}
/*顶栏菜单放大*/
.navbar-nav .nav-link {
font-size: 1rem;
}
.navbar-brand {
font-family: 'Noto Serif SC',serif;
font-size: 1.25rem;
margin-right: 2rem;
padding-bottom: .2rem;
}
.navbar-nav .nav-item {
margin-right:0;
}
.mr-lg-5, .mx-lg-5 {
margin-right:1rem !important;
}
.navbar-toggler-icon {
width: 1.5rem;
height: 1.5rem;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.9rem;
padding-left: 1rem;
}
小结
特效我暂时接触就是这些了。已经是很花里胡哨了！
更多特效（比如音乐播放器、设置网页源码无法观看等）你自己检索吧！我自己就没有这些需求了。如果你只是搬运别人的特效，无非就是粘贴一些js脚本在footer.php里。如果你要自定义特效，这我也没太多经验，看板娘还懂一些。
我自己在一个全新的博客里测试过这些代码，均可以成功使用。如果你有问题，评论区留言吧！
博客版面和美化的相关设置，我觉得说到这里就差不多了。我觉得Argon主题的设置并不是很复杂。如果你有更加深入或细化的要求，就要靠你自己摸索了！反正我是不想在上面花太多心思了。正儿八经更新博文才是正路，哈哈！
之后我准备说一些和博客长期运营有关的一些重要的插件，比如Wordfence。
敬请期待！
扫一扫
732
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
