转自我的个人博客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。

敬请期待！

本文使用文章同步助手同步

Docker系列 WordPress系列特效

Docker系列 WordPress系列特效

前言

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

雪花/樱花特效

鼠标文字特效

看板娘

Argon主题点击概要也可以进入文章

自定义css

小结

推荐阅读更多精彩内容

Docker系列 WordPress系列 特效

前言

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

雪花/樱花特效

鼠标文字特效

看板娘

Argon主题点击概要也可以进入文章

自定义css

小结

推荐阅读更多精彩内容

Docker系列 WordPress系列特效