添加FPS帧率显示
只需在网站管理后台—》主题设置—》自定义代码—》自定义javascript代码，把下面的js代码复制粘贴到里面即可。
// FPS帧
$('body').before('');
var showFPS = (function(){
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
var e,pe,pid,fps,last,offset,step,appendFps;
fps = 0;
last = Date.now();
step = function(){
offset = Date.now() - last;
fps += 1;
if( offset >= 1000 ){
last += offset;
appendFps(fps);
fps = 0;
}
requestAnimationFrame( step );
};
appendFps = function(fps){
console.log(fps+'FPS');
$('#fps').html(fps+'FPS');
};
step();
})();添加滚动播报小工具
只需在后台—>外观—>小工具—>自定义HTML添加下面的代码，把它放在合适的位置（本站放在侧边栏），然后就可以啦。
<section id="custom_html-2" class="widget_text widget widget_custom_html mar16-b">
<meta charset="utf-8">
<!--<p align="center" class="widget-title l1 box-header">欢迎访问鹿泽笔记</p>-->
<div class="textwidget custom-html-widget">
<aside id="php_text-8"
class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
<div class="textwidget widget-text">
<style type="text/css">#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;
line-height:50px;text-align:center}#flip-box-1{overflow:hidden;height:50px}#flip-box-1 div{height:50px}#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}#flip-box-1
div:first-child{animation:show 8s linear infinite}.flip-box-1-1{background-color:#FF7E40}.flip-box-1-2{background-color:#C166FF}.flip-box-1-3{background-color:#737373}.flip-box-1-4{background-color:#4ec7f3}
.flip-box-1-5{background-color:#42c58a}.flip-box-1-6{background-color:#F1617D}@keyframes
show{0%{margin-top:-300px}5%{margin-top:-250px}16.666%{margin-top:-250px}21.666%{margin-top:-200px}33.332%{margin-top:-200px}38.332%{margin-top:-150px}49.998%{margin-top:-150px}54.998%{margin-top:-100px}66.664%{margin-top:-100px}71.664%{margin-top:-50px}83.33%{margin-top:-50px}88.33%{margin-top:0px}99.996%{margin-top:0px}100%{margin-top:300px}}</style><div id="container-box-1">
<div class="container-box-1-1">坚持每天来逛逛，会让你</div>
<div id="flip-box-1"><div><div class="flip-box-1-1">生活也美好了！</div>
</div><div><div class="flip-box-1-2">心情也舒畅了！</div></div>
<div><div class="flip-box-1-3">走路也有劲了！</div></div><div>
<div class="flip-box-1-4">腿也不痛了！</div></div>
<div><div class="flip-box-1-5">腰也不酸了！</div></div>
<div><div class="flip-box-1-6">工作也轻松了！</div></div>
</div><div class="container-box-1-2">你好我也好，不要忘记哦!</div></div></div>
<div class="clear"></div>
</aside></div>
</section>侧边栏添加简单的小模块
这是一个非常简单的模块小工具，采用结合的HTML+CSS。只需在站点后台 >> 外观 >> 小工具 >> html代码 然后把小工具添加到指定侧边栏中即可。
<a class="ads" href="https://www.bailuze.com/" target="鹿泽笔记工具" style="border-radius:5px;">
<h4>鹿泽笔记的小工具</h4>
<h5>鹿泽笔记推荐</h5>
<span class="ads-btn ads-btn-outline">立即进入</span></a>
<style>
.ads{display:block; padding:40px 15px; text-align:center; color:#fff!important; background:#ff5719; background-image:-webkit-linear-gradient(135deg,#bbafe7,#5368d9); background-image:linear-gradient(135deg,#bbafe7,#5368d9)}.ads h4{margin:0; font-size:22px; font-weight:bold}.ads h5{margin:10px 0 0; font-size:14px; font-weight:bold}.ads.ads-btn{margin-top:20px; font-weight:bold}.ads.ads-btn:hover{color:#ff5719}.ads-btn{display:inline-block; font-weight:normal; margin-top:10px; color:#666; text-align:center; vertical-align:top; user-select:none; border:none; padding:0 36px; line-height:38px; font-size:14px; border-radius:10px; outline:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out}.ads-btn:hover,.btn:focus,.btn.focus{outline:0; text-decoration:none}.ads-btn:active,.btn.active{outline:0; box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.ads-btn-outline{line-height:36px; color:#fff; background-color:transparent; border:1px solid#fff}.ads-btn-outline:hover,.btn-outline:focus,.btn-outline.focus{color:#343a3c; background-color:#fff}
</style>说明：如果只是使用的话，CSS可无需修改，只需修改文本和跳转的网址即可。不需要圆边的话删除style=”border-radius:5px;”即可。
给网站挂个灯笼
一、子比后台—自定义代码—自定义底部代码。
<!-- 灯笼1 -->
<div class="deng-box">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">节</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
<!-- 灯笼2 -->
<div class="deng-box1">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">春</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>二、WP后台— 外观 —自定义—额外CSS。
默认是灯笼都在右上角位置，比照原文主要是调整了位置，避免遮挡顶部导航菜单。
/**过年灯笼*/
.deng-box {
position: fixed;
top: 40px;
right: -50px;
z-index: 999;
}
.deng-box1 {
position: fixed;
top: 40px;
z-index: 999;
right: -20px;
}
.deng-box1 .deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 3s infinite ease-in-out;
box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
width: 100px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: 12px 8px 8px 10px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.deng-b {
width: 45px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: -4px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.xian {
position: absolute;
top: -20px;
left: 60px;
width: 2px;
height: 20px;
background: #dc8f03;
}
.shui-a {
position: relative;
width: 5px;
height: 20px;
margin: -5px 0 0 59px;
-webkit-animation: swing 4s infinite ease-in-out;
-webkit-transform-origin: 50% -45px;
background: #ffa500;
border-radius: 0 0 5px 5px;
}
.shui-b {
position: absolute;
top: 14px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}
.shui-c {
position: absolute;
top: 18px;
left: -2px;
width: 10px;
height: 35px;
background: #ffa500;
border-radius: 0 0 0 5px;
}
.deng:before {
position: absolute;
top: -7px;
left: 29px;
height: 12px;
width: 60px;
content: " ";
display: block;
z-index: 999;
border-radius: 5px 5px 0 0;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng:after {
position: absolute;
bottom: -7px;
left: 10px;
height: 12px;
width: 60px;
content: " ";
display: block;
margin-left: 20px;
border-radius: 0 0 5px 5px;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
font-size: 3.2rem;
color: #dc8f03;
font-weight: bold;
line-height: 85px;
text-align: center;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
background: transparent !important;
}
@-moz-keyframes swing {
0% {
-moz-transform: rotate(-10deg)
}
50% {
-moz-transform: rotate(10deg)
}
100% {
-moz-transform: rotate(-10deg)
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotate(-10deg)
}
50% {
-webkit-transform: rotate(10deg)
}
100% {
-webkit-transform: rotate(-10deg)
}
}@media screen and (max-width: 768px){.deng-box{position: fixed; top: 23px; right: -50px; z-index: 999;}.deng-box1 { position: fixed; top: 23px; z-index: 999; right: -20px; }}<br>如果是一边一个，上面代码开头的.deng-box和.deng-box1修改为下面代码即可。
.deng-box {
position: fixed;
top: 40px;
right: -20px;
z-index: 999;
}
.deng-box1 {
position: fixed;
top: 40px;
z-index: 999;
}@media screen and (max-width: 768px){.deng-box{position: fixed; top: 23px; right: 0; z-index: 999;}.deng-box1 { position: fixed; top: 23px; z-index: 999; right: auto; }}<br>底部炫酷引导卡片小工具
在后台—》外观—》小工具—》首页-底部全宽度，自定义HTML添加下面代码即可。
<div id="wiiuii" style="box-shadow: 0 0 10px var(--main-shadow);">
<section class="buy-container">
<div class="buy-box">
<div class="slogan">
<h3>鹿泽笔记</h3>
<p>欢迎光临寒舍！</p>
</div>
<ul class="actions">
<li>
<a href="http://wpa.qq.com/msgrd?v=3&uin=526009505&site=qq&menu=yes" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a>
</li>
<li>
<a href="https://www.bailuze.com/about" target="_blank" class="demo-button" rel="noopener noreferrer">友链通道</a>
</li>
</ul>
</div>
<span class="tips"><div id="go-fav">更多精彩文章，按<span>Ctrl</span>+<span>D</span>收藏本站！</div></span>
</section>
</div>
<style type="text/css">
.buy-container{color: #ccc; padding: 60px 40px 50px 40px;margin: 0 auto; background: rgb(224,32,140); /*下述两行代码为兼容浏览器用，建议同步修改，亦可删除（不建议）*/background: -moz-linear-gradient(left, rgb(160,32,240) 0%, rgb(0,191,255) 100%);background: -webkit-linear-gradient(left, rgb(160,32,240) 0%,rgb(0,191,255) 100%); /*请更改此行代码，颜色为rgb模式*/background: linear-gradient(to right, rgb(160,32,240) 0%, rgb(0,191,255) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0208c', endColorstr='#fa6400',GradientType=1 );/*-webkit-border-radius: 8px;-moz-border-radius: 8px;-o-border-radius: 8px;border-radius: 8px;*/border-radius: var(--main-radius);}.buy-container .buy-box{display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 900px; margin: 0 auto;}@media screen and (max-width: 700px){.buy-container .buy-box{display: block; text-align: center;}.buy-container .buy-box .slogan{margin-bottom: 30px;}}.buy-container .buy-box .slogan h3{color: #fff;font-size: 26px;margin: 0 0 10px 0;}@media screen and (max-width: 800px){.buy-container .buy-box .slogan h3{font-size: 24px;}}@media screen and (max-width: 500px){.buy-container .buy-box .slogan h3{font-size: 20px;}}@media screen and (max-width: 400px){.buy-container .buy-box .slogan h3{font-size: 18px;}}.buy-container .buy-box .slogan p{color: #fff;font-size: 14px;font-weight: bold;margin: 10px 0;}.buy-container .buy-box .actions{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;list-style-type: none;margin: 0;padding: 0;}@media screen and (max-width: 700px){.buy-container .buy-box .actions{-webkit-box-pack: justify; justify-content: center;}}.buy-container .buy-box .actions li{margin: 0;}.buy-container .buy-box .actions li:last-child{margin-left: 10px;}.buy-container .buy-box .actions li a{position: relative;color: #fff !important;font-size: 14px;font-weight: bold; line-height: 1;text-decoration: none;padding: 10px 20px;background-color: rgba(255, 255, 255, .1);-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-webkit-transition: .2s;-moz-transition: .2s;-o-transition: .2s;transition: .2s;}.buy-container .buy-box .actions li a:hover{-webkit-transform: translateY(-2px);-moz-transform: translateY(-2px);-o-transform: translateY(-2px);transform: translateY(-2px); -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);opacity: 1 !important;}@media screen and (max-width: 330px){.buy-container .buy-box .actions li a{font-size: 12px;}}.buy-container .buy-box .actions li a:not(.primary):before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-box-shadow: inset 0 0 0 1px currentColor;-moz-box-shadow: inset 0 0 0 1px currentColor;-o-box-shadow: inset 0 0 0 1px currentColor;box-shadow: inset 0 0 0 1px currentColor;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-khtml-opacity: .3;-moz-opacity: .3;opacity: .3;}.buy-container .buy-box .actions li a:after{display: none;}.buy-container .buy-box .actions li a.primary{color: #ff3b30 !important;background-color: #fff;}.buy-container .tips{border-top: 1px solid rgba(255, 255, 255, .1);display: block;color: #fff;font-size: 12px;text-align: center; max-width: 900px;margin: 30px auto 0 auto;padding-top: 30px;}@media screen and (max-width: 768px){.buy-container {padding: 30px 40px 30px 40px;}}#go-fav{width:100%; height:100%; line-height:30px; text-align:center; font-size:14px; font-weight:700; color:rgba(255, 255, 255, 1);}#go-fav span{padding:5px 10px; background:#f0e7e2; border-radius:8px; color:#202020; margin:0 5px;}
</style>
<script>
document.getElementById("wiiuii").parentNode.parentNode.style.padding=0;
</script>导航栏标题字体加粗
CSS代码：
/*导航栏字体加粗*/
ul.nav {font-weight: 700;}子比主题分类栏目美化教程
代码：
/*分类栏目*/
.index-tab ul>li.active {
color: #ffffff00!important;
background-color: #ffffff00!important;
border-radius: 6px;
z-index: 1;
position: relative;
height: 39px;
line-height: 44px;
background: url(图片链接) repeat;
-webkit-background-size: 91px 39px;
-moz-background-size: 91px 39px;
background-size: 91px 39px;
}
.index-tab ul>li {
display: inline-block;
padding: 2px 17px;
font-weight: 500;
border-radius: 20px;
margin: 0 1px;
}昵称抖音风格字体美化代码
子比用户昵称加一个抖音故障风格字体的美化代码，看着挺不错的，记录一下日后使用。
/*抖音风格昵称*/
.display-name{text-shadow:-2px 0 rgba(0,255,255,.5),2px 0 rgba(255,0,0,.5);animation:shake-it .5s reverse infinite cubic-bezier(0.68,-0.55,0.27,1.55);}@keyframes shake-it{0%{text-shadow:0 0 rgba(0,255,255,.5),0 0 rgba(255,0,0,.5);}25%{text-shadow:-2px 0 rgba(0,255,255,.5),2px 0 rgba(255,0,0,.5);}50%{text-shadow:-5px 0 rgba(0,255,255,.5),3px 0 rgba(255,0,0,.5);}100%{text-shadow:3px 0 rgba(0,255,255,.5),5px 0 rgba(255,0,0,.5);}}用户中心添加UID、注册时间功能
将下面的代码放到/wp-content/themes/zibll/functions.php或者func.php文件即可。
/*
* 定义用于显示用户ID的函数
* 'but'是配合函数赋予class样式'but'在子比主题内通常是按钮样式可配合c-blue或jb-pink赋予色彩
* c系列为透明背景，颜色有c-blue、c-blue-2、c-cyan、c-gray、c-green、c-green-2、c-purple、c-purple-2、c-red、c-red-2、c-theme、c-white、c-yellow、c-yellow-2
* jb系列为非透明渐变色背景，颜色有pay-tag、jb-red、jb-pink、jb-yellow、jb-blue、jb-cyan、jb-green、jb-purple、jb-vip1、jb-vip2
*/
function ZbTool_user_id_to_desc($desc, $user_id) {
// 初始化变量
$day = true; // 可以根据需要进行动态设置
$uid = true; // 可以根据需要进行动态设置
$pay_price = true; // 可以根据需要进行动态设置
$demo = true; // 可以根据需要进行动态设置
// 初始化输出变量
$output = [];
// 判断 uid 为 true
if ($uid) {
$icon = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-tag-color"></use></svg>'; // 图标 可自行更换
$but = 'UID：' . esc_html($user_id);
$class = 'c-red';
$output[] = '<span class="but ' . esc_attr($class) . '">' . $icon . $but . '</span>';
}
// 判断 day 为 true
if ($day) {
$icon = ''; // 图标 如果有需要的话
$but = zib_get_user_join_day_desc($user_id, 'but c-cyan'); // 获取用户加入天数描述
$class = '';
$output[] = $but;
}
// 判断 pay_price 为 true
if ($pay_price) {
$icon = ''; // 图标 可自行更换
$but = zibpay_get_user_pay_price($user_id, 'pay_price');
$class = 'jb-vip2';
$output[] = '<span class="but ' . esc_attr($class) . '">总消费：' . esc_html($but) . '</span>';
}
// 判断 demo 为 true
if ($demo) {
$icon = ''; // 图标 可自行更换
$but = '我是添加样式的演示~';
$class = 'c-purple';
$output[] = '<span class="but ' . esc_attr($class) . '">' . esc_html($but) . '</span>';
}
// 将生成的内容添加到原始描述
$desc = implode(' ', $output) . ' ' . $desc;
return $desc;
}
// 添加过滤器
add_filter('user_page_header_desc', 'ZbTool_user_id_to_desc', 10, 2);
add_filter('author_header_identity', 'ZbTool_user_id_to_desc', 10, 2);鼠标悬停边框美化
把下面代码放到主题设置里的自定义CSS代码里即可：
.card {
box-shadow: 0.3em 0.3em 0.7em #00000015;
border: rgba(0, 0, 0, .05) 0.2em solid;
}
.card:hover {
border: #006fff 0.2em solid;
transition: border 1s;
}侧边栏动态时间小工具
一款子比主题侧边动态时间小工具，纯时间动态，带有一些特效，非常好看，喜欢的自行部署吧。
将下面的代码放到：WP后台->>外观–>>小工具–>>自定义HTML即可
<style>
.times {
margin: 0;
padding: 0;
height: 100%;
}
.times2 {
height: 100%;
background: #fff;
}
.times2 svg {
height: 100%;
width: 100%;
margin-bottom: -34px;
}
.words {
font-size: 60px;
font-weight: bold;
text-transform: uppercase;
fill: none;
stroke-width: 5px;
stroke-dasharray: 90, 310;
animation: drawing 8s linear infinite;
}
.words-1 {
stroke: deepskyblue;
text-shadow: 0 0 50px deepskyblue;
animation-delay: -2s;
}
.words-2 {
stroke: lightseagreen;
text-shadow: 0 0 50px lightseagreen;
animation-delay: -4s;
}
.words-3 {
stroke: orange;
text-shadow: 0 0 50px orange;
animation-delay: -6s;
}
.words-4 {
stroke: purple;
text-shadow: 0 0 50px purple;
animation-delay: -8s;
}
@keyframes drawing {
100% {
stroke-dashoffset: -400;
}
}
</style>
<div class="sidebox sidebox--desk">
<div class="times">
<div class="sidebox__content" style="padding: 0;">
<div style="border-radius:15px;" class="times2">
<svg>
<text text-anchor="middle" x="50%" y="50%" class="words words-1"></text>
<text text-anchor="middle" x="50%" y="50%" class="words words-2"></text>
<text text-anchor="middle" x="50%" y="50%" class="words words-3"></text>
<text text-anchor="middle" x="50%" y="50%" class="words words-4"></text>
</svg>
</div>
</div>
</div>
</div>
<script>
function showtime() {
const now = new Date();
let h = now.getHours();
let m = now.getMinutes();
let s = now.getSeconds();
h = checktime(h);
m = checktime(m);
s = checktime(s);
return `${h}:${m}:${s}`;
}
function checktime(x) {
return x < 10 ? `0${x}` : x;
}
const texts = document.querySelectorAll("text");
setInterval(() => {
const time = showtime();
texts.forEach(text => {
text.textContent = time;
});
}, 1000);
</script>首页分类自定义标题美化
首先这个美化需要子比的小工具，那就是：外观–>>小工具–>>Zibll 文章列表，如果用首页文章会没有的。
直接将下面的代码放到自定义CSS即可，然后图片链接输入自己的动图即可。
.box-body.notop {background: var(--main-bg-color);padding: 5px;padding-left: 1.2em;border-radius: 10px;margin-bottom: 10px;}.title-theme {position: relative;padding-left: 1.3em;font-size: 20px;margin: 5px;}.title-theme::before {content: '';top: -30px;width: 64px;height: 64px;left: -32px;background: url(图片url链接);box-shadow: 0 0 black;background-size: cover;}.title-theme small {font-size: 60%;margin-left: 20px;}.title-theme .ml10::before {position: absolute;content: '';width: 1px;background: var(--theme-color);top: 30%;left: 115px;bottom: 16%;}WordPress子比主题新用户注册随机头像显示
当用户在前台注册时会随机一个头像，后台图像不只是单单一个了，很常用的一个功能，很多网站使用的是第三方插件，今天分享一个简单的修改方法。
此代码放在func.php或者functions.php中
function zib2_sign_in($user_id) {
// 检查用户ID是否有效
if (!$user_id) {
return;
}
// 检查是否通过社交登录
$social_login = get_user_meta($user_id, 'oauth_new', true);
// 构造头像图片的基础文件系统路径
$avatars_base_dir = WP_CONTENT_DIR . '/uploads/tx/'; // 基于WP_CONTENT_DIR的相对路径
// 获取目录下所有图片文件
$avatars = glob($avatars_base_dir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE | GLOB_NOSORT);
// 如果没有找到图片，直接返回
if (empty($avatars)) {
return;
}
// 从图片数组中随机选择一个图片文件
$random_avatar_path = $avatars[array_rand($avatars)];
// 构造完整的随机头像URL
$url = home_url('wp-content/uploads/tx/' . basename($random_avatar_path));
// 更新用户头像的元数据
// 确保zib_update_user_meta函数存在并且可以正确执行
zib_update_user_meta($user_id, 'custom_avatar_id', 1);
zib_update_user_meta($user_id, 'custom_avatar', $url);
}
// 将函数挂载到用户注册钩子上
add_action('user_register', 'zib2_sign_in');评论区块美化
子比主题评论区块增加美化框及背景色，基本可以美化到大改5级评论且拥有颜色变化了。
自己替换图中的图片链接
/*定义日夜间颜色*/
body{
--acg-color:#fff8fa;
--acg-color2:#f8fdff;
}
.dark-theme{
--acg-color:#323335;
--acg-color2:#323335;
}
/* 修改子比主题评论区默认样式 */
#postcomments .commentlist .comment+.comment {
/* 顶部边框设置为1像素宽，颜色为50%不透明度的黑色 */
border-top: 1px solid rgb(50 50 50 / 0%);
/* 内边距设置为0 0 15px 0，意味着上下左右分别是0、0、15px和0 */
padding: 0 0 15px 0;
/* 设置内容不会溢出元素的框，隐藏溢出的部分 */
/*overflow: hidden;*/
/* 设置边框半径为15像素，使边框呈现圆角效果 */
border-radius: 15px;
/* 外边距设置为0 15px 15px，意味着上下左右分别是0、15px、15px和默认值 */
margin: 0 15px 15px;
/* 设置边框宽度为1像素，颜色为默认值（通常是黑色） */
border: 1px solid;
/* 设置元素的定位类型为相对定位 */
position: relative;
/* 设置元素的显示类型为flow-root，这是一个新的CSS显示值，允许元素创建新的格式化上下文，同时保持其在文档流中的位置 */
display: flow-root;
/* 内边距设置为10px，意味着上下左右都是10px，这个属性会覆盖上面已经定义过的padding属性 */
padding: 10px;
}
/* 选择所有在#postcomments下的.commentlist里的.comment元素后面的同级元素，并选择其中序号为奇数的元素 */
#postcomments .commentlist .comment+.comment:nth-child(odd) {
/* 将背景图像设置为粉色星星 */
background-image: url(图片链接);
/* 内边距设置为左边0，右边5px，顶部0，底部51px */
padding: 0 5px 0 51px;
/* 将边框颜色设置为#ff8bb5粉红色 */
border-color: #ff8bb5;
/* 将背景颜色设置为一个变量(--acg-color)，这个变量是我们最开始设置的日夜间背景色 */
background-color: var(--acg-color);
}
/* 选择所有在#postcomments下的.commentlist里的.comment元素后面的同级元素，并选择其中序号为偶数的元素 */
#postcomments .commentlist .comment+.comment:nth-child(even) {
/* 将背景图像设置为蓝色星星 */
background-image: url(图片链接);
/* 内边距设置为左边0，右边5px，顶部0，底部51px */
padding: 0 5px 0 51px;
/* 将边框颜色设置为#71baff80淡蓝色 */
border-color: #71baff80;
/* 将背景颜色设置为一个变量(--acg-color2)，之前我们设置的日夜间颜色 */
background-color: var(--acg-color2);
}
/*从上面我们能够了解到评论美化的基础，那么就可以直接开始评论回复的美化*/
#postcomments .children {
margin-left: 86px;
background: rgb(116 116 116 / 0%);
margin-bottom: 6px;
border-top: 1px solid rgb(50 50 50 / 0%);
/*overflow: hidden;*/
border-radius: 15px;
border: 1px solid;
position: relative;
display: flow-root;
}
#postcomments .children:nth-child(even) {
background-image: url(图片链接);
padding: 0 5px 0 51px;
border-color: #71baff80;
background-color: var(--acg-color2);
}
#postcomments .children:nth-child(odd) {
background-image: url(图片链接);
padding: 0 5px 0 51px;
border-color: #ff8bb5;
background-color: var(--acg-color);
}
#postcomments .children .children {
background: rgb(116 116 116 / 0%);
margin-bottom: 6px;
border-top: 1px solid rgb(50 50 50 / 0%);
/*overflow: hidden;*/
border-radius: 15px;
border: 1px solid;
position: relative;
display: flow-root;
background-image: url(图片链接);
padding: 0 5px 0 51px;
border-color: #ff8bb5;
background-color: var(--acg-color);
}
/*最后我们会发现评论区第一条评论没有美化到*/
/*于是我们补充第一条评论缺失样式的问题*/
/*如果你只补充第一条评论缺失的样式那么他就是旧版单色的美化*/
#postcomments .commentlist .comment {
border-top: 1px solid var(--main-border-color)
border-top: 1px solid rgb(50 50 50 / 0%);
/*overflow: hidden;*/
border-radius: 15px;
margin: 0 15px 15px;
border: 1px solid;
position: relative;
display: flow-root;
background-image: url(图片链接);
padding: 0 5px 0 51px;
border-color: #71baff80;
background-color: var(--acg-color2);
}网站增加全屏水印
$(document).ready(function() {
var watermark_txt = "鹿泽笔记" + getDate();
watermark({"watermarl_element":"watermark-wrapper", "watermark_txt":watermark_txt});
});
function watermark(settings) {
//默认设置
var defaultSettings={
watermarl_element:"body",
watermark_txt:"",
watermark_x:10,//水印起始位置x轴坐标
watermark_y:10,//水印起始位置Y轴坐标
watermark_rows:2000,//水印行数
watermark_cols:2000,//水印列数
watermark_x_space:50,//水印x轴间隔
watermark_y_space:50,//水印y轴间隔
watermark_color:'#d7d7d7',//水印字体颜色
watermark_alpha:0.3,//水印透明度
watermark_fontsize:'15px',//水印字体大小
watermark_font:'思源黑体',//水印字体
watermark_width:500,//水印宽度
watermark_height:50,//水印长度
watermark_angle:15//水印倾斜度数
};
//采用配置项替换默认值，作用类似jquery.extend
if(arguments.length===1&&typeof arguments[0] ==="object" ) {
var src=arguments[0]||{};
for(key in src) {
if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key]){
continue;
} else if(src[key]){
defaultSettings[key]=src[key];
}
}
}
var oTemp = document.createDocumentFragment();
var maskElement=document.getElementById(defaultSettings.watermarl_element) || document.body;
//获取页面最大宽度
var page_width = Math.max(maskElement.scrollWidth,maskElement.clientWidth);
//获取页面最大高度
var page_height = Math.max(maskElement.scrollHeight,maskElement.clientHeight,maskElement.scrollTop);
//水印数量自适应元素区域尺寸
defaultSettings.watermark_cols=Math.ceil(page_width/(defaultSettings.watermark_x_space+defaultSettings.watermark_width));
defaultSettings.watermark_rows=Math.ceil(page_height/(defaultSettings.watermark_y_space+defaultSettings.watermark_height));
var x;
var y;
for (var i = 0; i < defaultSettings.watermark_rows; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
for (var j = 0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
var mask_div = document.createElement('div');
mask_div.id = 'mask_div' + i + j;
mask_div.className = 'mask_div';
//mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
mask_div.innerHTML=(defaultSettings.watermark_txt);
//设置水印div倾斜显示
mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.visibility = "";
mask_div.style.position = "absolute";
mask_div.style.left = x + 'px';
mask_div.style.top = y + 'px';
mask_div.style.overflow = "hidden";
mask_div.style.zIndex = "1029"; // 9999
// pointer-events:none 让水印不遮挡页面的点击事件
mask_div.style.pointerEvents='none';
// 设置边框
// mask_div.style.border="solid #eee 1px";
// 兼容IE9以下的透明度设置
mask_div.style.filter="alpha(opacity=50)";
mask_div.style.opacity = defaultSettings.watermark_alpha;
mask_div.style.fontSize = defaultSettings.watermark_fontsize;
mask_div.style.fontFamily = defaultSettings.watermark_font;
mask_div.style.color = defaultSettings.watermark_color;
mask_div.style.textAlign = "center";
mask_div.style.width = defaultSettings.watermark_width + 'px';
mask_div.style.height = defaultSettings.watermark_height + 'px';
mask_div.style.display = "block";
oTemp.appendChild(mask_div);
};
};
maskElement.appendChild(oTemp);
}
function getDate() {
var d = new Date();
var year = d.getFullYear() >= 10 ? d.getFullYear() : ('0'+d.getFullYear());
var month = d.getMonth()+1 >= 10 ? d.getMonth()+1 : ('0'+d.getMonth()+1);
var day = d.getDate() >= 10 ? d.getDate() : ('0'+d.getDate());
var hour = d.getHours() >= 10 ? d.getHours() : ('0'+d.getHours());
var minute = d.getMinutes() >= 10 ? d.getMinutes() : ('0'+d.getMinutes());
var second = d.getSeconds() >= 10 ? d.getSeconds() : ('0'+d.getSeconds());
return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
}论坛图片按照九宫格排序
将论坛图片修改为九宫格样式
CSS
/*九宫格适配*/
.lists-imgs:not(.count-1)>span {
flex: 0 0 calc(100% / 3 - 4px);
padding-bottom: calc(100% / 3 / 1 - 4px);
margin: 2px;
position: relative;
}
.lists-imgs:not(.count-1) {
display: flex;
flex-wrap: wrap;
--img-count: 9;
width: 70%;
}PHP
打开/inc/functions/bbs/inc/posts.php文件搜索$imgs_max = 4; 把他改成$imgs_max = 9;
二维码动态Border跑马灯效果
/*底部板块三图片border*/
.footer-miniimg {
p{
position: relative;
&:hover {
filter: contrast(1.1);
}
&:active {
filter: contrast(0.9);
}
&::before,
&::after{
content: "";
border: 2px solid;
border-image: linear-gradient(45deg, gold, deeppink) 1;
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
animation: clippath 3s infinite ;
}
&::before{
animation: clippath 3s infinite -1.5s linear;
}
}
}
@keyframes clippath {
0%,
100% {
clip-path: inset(0 0 96% 0);
filter: hue-rotate(0deg);
}
25% {
clip-path: inset(0 96% 0 0);
}
50% {
clip-path: inset(96% 0 0 0);
filter: hue-rotate(360deg);
}
75% {
clip-path: inset(0 0 0 96%);
}
}拦截灌水评论正则验证代码
最近都能看到垃圾评论，纯英文有些还附带网址，现在每天几条虽然不多，但以后很难说。每次都要到后台删也是很麻烦的，又不喜欢装插件，就给子比加个正则验证吧，限制评论纯数字/纯英文/纯表情
将代码放到/wp-content/themes/zibll/func.php文件即可。注意 此方法评论必须带中文 禁止了纯数字、纯字母和纯表情。
//屏蔽纯英文评论
function refused_english_comments($incoming_comment) {
// 获取评论内容
$comment_content = $incoming_comment['comment_content'];
// 去除评论内容中的 [g=xxx] xxx为任意字符串
$comment_content = preg_replace('/\[g=[^\]]*\]/', '', $comment_content);
// 检查评论内容是否为空
if (empty($comment_content)) {
wp_die('{"error":1,"ys":"danger","msg":"评论不能是纯表情内容 <br/>Comments cannot be purely emoji content"}');
}
// 检查评论内容是否包含中文
$pattern = '/[一-龥]/u';
// 禁止全英文评论
if (!preg_match($pattern, $comment_content)) {
wp_die('{"error":1,"ys":"danger","msg":"评论必须包括中文 <br/>Comments must include Chinese"}');
}
return $incoming_comment;
}
add_filter('preprocess_comment', 'refused_english_comments');置顶角标美化
css代码：
.posts-item badge.img-badge.left.jb-red {
position: absolute;
top: 10px;
right: -50px;
z-index: 1;
width: 140px;
height: 20px;
background: var(--theme-color);
color: #fff;
line-height: 20px;
transform: rotate(45deg);
text-align: center;
font-size: 12px;
left: auto;
border-radius: 0 50px 50px 0;
}如果需要修改背景颜色或修改为图片只需要将var(–theme-color)改成想要的颜色或图片即可，默认跟随主题色。
侧边栏广告小工具模块代码
非常实用的一个侧边栏美化，可以在侧边栏添加抽奖，赞助，广告，提醒等内容，引导会员开通及浏览页面，喜欢的朋友自行下载测试。
抽奖中心小工具模块代码：
<style>
.countdown-activity {
padding: 20px;
background-color: #3e516d;
background-image: linear-gradient(75deg, #2f3b42 0%, #3e516d 39%, #222538 100%);
color: #fff;
justify-content: center;
display: flex;
font-size: 18px;
line-height: 1.4;
justify-content: space-evenly !important;
}
.activity-title {
font-size: 1.5em;
font-weight: bold;
}
.ztw-bg {
background-color: #3e516d;
background-image: linear-gradient(75deg, #2f3b42 0%, #3e516d 39%, #222538 100%);
color: #fff;
--this-bg: linear-gradient(75deg, #2f3b42 0%, #3e516d 39%, #222538 100%);
}
</style>
<div class="ztw-bg zib-widget mb10-sm ztw-bg" style="margin: -15px; margin-bottom: -30px;"><div class="colorful-make" style="transform: rotate(-9deg) scale(0.7);"></div>
<div class="flex ab c jsb"><div class=""><div class="flex ac"><b class="em14">在线抽奖中心</b></div>
<div style="" class="em09 opacity8">没有积分？在这里试试运气吧！</div>
<a href="/choujiang" data-onclick="[href=#user-tab-product]" class="mt6 but radius jb-cyan px12 p2-10">点击抽奖<i style="margin:0 0 0 6px;" class="fa fa-angle-right em12"></i></a>
</div>
<span class="avatar-img mr10 mt3" style="--this-size: 59px;"><svg class="icon" style="font-size: 5em;vertical-align: middle;fill: currentColor;overflow: hidden;margin-top: -15px;" viewBox="0 0 1024 1024"><path d="M628.128 85.44c84.8-48.96 183.104-45.504 219.68 17.92 30.208 52.288 4.032 121.44-55.296 171.744l-6.048 4.96-39.872-50.048c41.696-33.216 57.952-73.632 45.792-94.688-14.944-25.888-74.24-27.968-132.256 5.568-56 32.32-83.872 82.176-72.384 108.896l1.408 2.88-55.424 32c-36.576-63.392 9.6-150.24 94.4-199.2z" fill="#5DE1C8" p-id="14455"></path><path d="M417.28 85.44c-84.8-48.928-183.104-45.472-219.68 17.92-31.104 53.824-2.464 125.344 60.256 175.84l6.176 4.832 38.624-51.008c-44.288-33.568-62.24-75.84-49.632-97.696 14.944-25.888 74.24-27.968 132.288 5.568 55.968 32.32 83.84 82.176 72.384 108.896l-1.44 2.88 55.424 32c36.576-63.36-9.6-150.24-94.4-199.2z" fill="#5DE1C8" p-id="14456"></path><path d="M896 229.056H128a96 96 0 0 0-96 96v96a96 96 0 0 0 96 96h768a96 96 0 0 0 96-96v-96a96 96 0 0 0-96-96z m-768 64h768a32 32 0 0 1 32 32v96a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32v-96a32 32 0 0 1 32-32z" fill="#1890FF" p-id="14457"></path><path d="M224 976.576a96 96 0 0 1-95.84-90.368L128 880.576v-384a32 32 0 0 1 28.256-31.808L160 464.576h704a32 32 0 0 1 31.776 28.256l0.224 3.744v77.248a32 32 0 0 1-63.776 3.712L832 573.824v-45.28H192v352a32 32 0 0 0 28.256 31.808l3.744 0.224h307.2c41.216 0 42.624 59.648 4.288 63.776l-4.256 0.224H224z" fill="#1890FF" p-id="14458"></path><path d="M800 648c-100.544 0-184 33.376-184 88s83.456 88 184 88 184-33.376 184-88-83.456-88-184-88z m0 48c76.192 0 136 23.904 136 40s-59.808 40-136 40c-76.192 0-136-23.904-136-40s59.808-40 136-40z" fill="#FF7272" p-id="14459"></path><path d="M960 801.6a24 24 0 0 1 24 24c0 54.624-83.456 88-184 88s-184-33.376-184-88a24 24 0 0 1 48 0c0 16.096 59.808 40 136 40 76.192 0 136-23.904 136-40a24 24 0 0 1 24-24z" fill="#FF7272" p-id="14460"></path><path d="M960 891.2a24 24 0 0 1 24 24c0 54.624-83.456 88-184 88s-184-33.376-184-88a24 24 0 0 1 48 0c0 16.096 59.808 40 136 40 76.192 0 136-23.904 136-40a24 24 0 0 1 24-24z" fill="#FF7272" p-id="14461"></path></svg></span></div>
</div>赞助会员小工具模块代码（自动弹窗购买页面）：
<style>
.countdown-activity {
padding: 20px;
background-color: #3e516d;
background-image: linear-gradient(75deg, #2f3b42 0%, #3e516d 39%, #222538 100%);
color: #fff;
justify-content: center;
display: flex;
font-size: 18px;
line-height: 1.4;
justify-content: space-evenly !important;
}
.activity-title {
font-size: 1.5em;
font-weight: bold;
}
.ztw-bj {
background-color: #d9534f;
background-image: linear-gradient(#fc423c 33.19%, #f6f1f1 71.01%, #25a6a2);
color: #fff;
--this-bj: linear-gradient(75deg, #2f3b42 0%, #3e516d 39%, #222538 100%);
}
</style>
<div class="ztw-bj zib-widget mb10-sm ztw-bj" style="margin: -15px; margin-bottom: -30px;"><div class="colorful-make" style="transform: rotate(-9deg) scale(0.7);"></div>
<div class="text-center"><div class=""><div class="ac"><b class="em14">99赞助永久会员-全站任意下载</b></div>
<div style="" class="em09 opacity8">每日更新资源，精选配图，站长任意搬</div> <br>
<a href="javascript:;" data-onclick="[href=#user-tab-product]" class="mt6 but radius jb-red px12 p2-10 pay-vip">立即查看<i style="margin:0 0 0 6px;" class="fa fa-angle-right em12"></i></a>
</div>
</span></div>
</div>支付时效侵权等各种提示按钮小工具模块代码：
<div style="margin: -15px;">
<a target="_blank" class=" btn-block btn-no btn-lg em12 but jb-yellow" href="mailto:邮箱地址"
rel="nofollow noopener noreferrer">支付或链接失效问题反馈（24小时内答复）</a><a target="_blank"
class="btn-block btn-no btn-lg em12 but jb-green" href="" rel="nofollow noopener noreferrer">及提供大家学习和研究，本站不提供任何技术支持</a><a
target="_blank" class="btn btn-info btn-block btn-no em12" href="/newposts"
rel="nofollow noopener noreferrer">资源分享（投稿赚取分成）</a><a target="_blank" class="btn-block btn-no btn-lg but b-purple"
href="/about" rel="nofollow noopener noreferrer">如果遇到链接失效请大家反馈</a><a
target="_blank" class="btn btn-primary btn-block btn-no em12" href="mailto:邮箱地址"
rel="nofollow noopener noreferrer">侵权举报</a></div>首页分类栏目标题美化
/*分类栏目美化*/
.index-tab ul>li.active {
color: #ffffff00!important;
background-color: #ffffff00!important;
border-radius: 6px;
z-index: 1;
position: relative;
height: 39px;
line-height: 44px;
background: url(图片链接) repeat;
-webkit-background-size: 91px 39px;
-moz-background-size: 91px 39px;
background-size: 91px 39px;
}
.index-tab ul>li {
display: inline-block;
padding: 2px 17px;
font-weight: 500;
border-radius: 20px;
margin: 0 1px;
}添加闪动IPv6标识效果
很多网站都支持IPv6，但是对于很多网站想要一个标识的效果给自己的网站，此效果本站在底部，可以查看，非常美观的一个闪动Pv6标识。
![图片[1] - 子比主题美化教程 - 鹿泽笔记](https://www.bailuze.com/wp-content/uploads/2025/07/202507180004.gif)
HTML
<span class="tengfei_ipv6 tag_ipv6">IPv6</span>CSS
.tengfei_ipv6{display: inline; padding: 0.2em 0.6em; margin: 0px 5px; border-radius: 0.25em; background: rgb(92, 184, 92); color: rgb(255, 255, 255); font-size: 12px; font-weight: 200; line-height: 20px; vertical-align: baseline;}
.tag_ipv6{display:inline!important;float:none!important;padding:.2em .6em;margin:0 5px;position:relative!important;overflow:hidden;outline:none;border-radius:.25em;background:#5cb85c;color:#fff;font-size:12px;font-weight:200;line-height:20px;vertical-align:super;animation:blink 1s linear infinite;-webkit-animation:blink 1s linear infinite;-moz-animation:blink 1s linear infinite;-ms-animation:blink 1s linear infinite;-o-animation:blink 1s linear infinite;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tag_ipv6,.tag_ipv6 a,.tag_ipv6 a:hover,.tag_ipv6:hover{text-decoration:none!important}.tag_ipv6:after{background:#5cb85c;-moz-transform:translateX(-50%) translateY(-50%) rotate(-25deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(-25deg);-webkit-transform:translateX(-50%) translateY(-50%) rotate(-25deg);transform:translateX(-50%) translateY(-50%) rotate(-25deg)}@keyframes blink{0%{opacity:1;border:1px solid #fff;background-color:transparent;transition:all .4s ease-in-out}50%{opacity:.9;border:1px solid #5cb85c}to{opacity:.9;border:1px solid #fff}}@-webkit-keyframes blink{0%{opacity:1}50%{opacity:.9}to{opacity:1}}@-moz-keyframes blink{0%{opacity:1}50%{opacity:.9}to{opacity:1}}@-ms-keyframes blink{0%{opacity:1}50%{opacity:.9}to{opacity:1}}@-o-keyframes blink{0%{opacity:1}50%{opacity:.9}to{opacity:1}}.tag_ipv6:after{content:"";height:100%;width:100%;position:absolute;display:inline;margin:0;top:0;left:0;z-index:-1;animation:pulsate 1s ease-out;animation-iteration-count:infinite;animation-delay:1.1s}@keyframes pulsate{0%{transform:scale(.1);opacity:0;filter:alpha(opacity=0)}50%{opacity:1;filter:none}to{transform:scale(1.2);opacity:0;filter:alpha(opacity=0)}}评论、搜索框打字粒子特效
使用方法
子比主题设置——全局&功能——自定义代码——自定义javascript代码
其实所有WP站点都可以用，直接复制就行，如果用在其他主题或者其他位置，记得加<script>标签。
代码如下
<!--彩色粒子特效-->
(function webpackUniversalModuleDefinition(a, b) {
if (typeof exports === "object" && typeof module === "object") {
module.exports = b()
} else {
if (typeof define === "function" && define.amd) {
define([], b)
} else {
if (typeof exports === "object") {
exports["POWERMODE"] = b()
} else {
a["POWERMODE"] = b()
}
}
}
})(this, function() {
return (function(a) {
var b = {};
function c(e) {
if (b[e]) {
return b[e].exports
}
var d = b[e] = {
exports: {},
id: e,
loaded: false
};
a[e].call(d.exports, d, d.exports, c);
d.loaded = true;
return d.exports
}
c.m = a;
c.c = b;
c.p = "";
return c(0)
})([function(c, g, b) {
var d = document.createElement("canvas");
d.width = window.innerWidth;
d.height = window.innerHeight;
d.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999";
window.addEventListener("resize", function() {
d.width = window.innerWidth;
d.height = window.innerHeight
});
document.body.appendChild(d);
var a = d.getContext("2d");
var n = [];
var j = 0;
var k = 120;
var f = k;
var p = false;
o.shake = true;
function l(r, q) {
return Math.random() * (q - r) + r
}
function m(r) {
if (o.colorful) {
var q = l(0, 360);
return "hsla(" + l(q - 10, q + 10) + ", 100%, " + l(50, 80) + "%, " + 1 + ")"
} else {
return window.getComputedStyle(r).color
}
}
function e() {
var t = document.activeElement;
var v;
if (t.tagName === "TEXTAREA" || (t.tagName === "INPUT" && t.getAttribute("type") === "text")) {
var u = b(1)(t, t.selectionStart);
v = t.getBoundingClientRect();
return {
x: u.left + v.left,
y: u.top + v.top,
color: m(t)
}
}
var s = window.getSelection();
if (s.rangeCount) {
var q = s.getRangeAt(0);
var r = q.startContainer;
if (r.nodeType === document.TEXT_NODE) {
r = r.parentNode
}
v = q.getBoundingClientRect();
return {
x: v.left,
y: v.top,
color: m(r)
}
}
return {
x: 0,
y: 0,
color: "transparent"
}
}
function h(q, s, r) {
return {
x: q,
y: s,
alpha: 1,
color: r,
velocity: {
x: -1 + Math.random() * 2,
y: -3.5 + Math.random() * 2
}
}
}
function o() {
var t = e();
var s = 5 + Math.round(Math.random() * 10);
while (s--) {
n[j] = h(t.x, t.y, t.color);
j = (j + 1) % 500
}
f = k;
if (!p) {
requestAnimationFrame(i)
}
if (o.shake) {
var r = 1 + 2 * Math.random();
var q = r * (Math.random() > 0.5 ? -1 : 1);
var u = r * (Math.random() > 0.5 ? -1 : 1);
document.body.style.marginLeft = q + "px";
document.body.style.marginTop = u + "px";
setTimeout(function() {
document.body.style.marginLeft = "";
document.body.style.marginTop = ""
}, 75)
}
}
o.colorful = false;
function i() {
if (f > 0) {
requestAnimationFrame(i);
f--;
p = true
} else {
p = false
}
a.clearRect(0, 0, d.width, d.height);
for (var q = 0; q < n.length; ++q) {
var r = n[q];
if (r.alpha <= 0.1) {
continue
}
r.velocity.y += 0.075;
r.x += r.velocity.x;
r.y += r.velocity.y;
r.alpha *= 0.96;
a.globalAlpha = r.alpha;
a.fillStyle = r.color;
a.fillRect(Math.round(r.x - 1.5), Math.round(r.y - 1.5), 3, 3)
}
}
requestAnimationFrame(i);
c.exports = o
}, function(b, a) {
(function() {
var d = ["direction", "boxSizing", "width", "height", "overflowX", "overflowY", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "fontStyle", "fontVariant", "fontWeight", "fontStretch", "fontSize", "fontSizeAdjust", "lineHeight", "fontFamily", "textAlign", "textTransform", "textIndent", "textDecoration", "letterSpacing", "wordSpacing", "tabSize", "MozTabSize"];
var e = window.mozInnerScreenX != null;
function c(k, l, o) {
var h = o && o.debug || false;
if (h) {
var i = document.querySelector("#input-textarea-caret-position-mirror-div");
if (i) {
i.parentNode.removeChild(i)
}
}
var f = document.createElement("div");
f.id = "input-textarea-caret-position-mirror-div";
document.body.appendChild(f);
var g = f.style;
var j = window.getComputedStyle ? getComputedStyle(k) : k.currentStyle;
g.whiteSpace = "pre-wrap";
if (k.nodeName !== "INPUT") {
g.wordWrap = "break-word"
}
g.position = "absolute";
if (!h) {
g.visibility = "hidden"
}
d.forEach(function(p) {
g[p] = j[p]
});
if (e) {
if (k.scrollHeight > parseInt(j.height)) {
g.overflowY = "scroll"
}
} else {
g.overflow = "hidden"
}
f.textContent = k.value.substring(0, l);
if (k.nodeName === "INPUT") {
f.textContent = f.textContent.replace(/\s/g, "\u00a0")
}
var n = document.createElement("span");
n.textContent = k.value.substring(l) || ".";
f.appendChild(n);
var m = {
top: n.offsetTop + parseInt(j["borderTopWidth"]),
left: n.offsetLeft + parseInt(j["borderLeftWidth"])
};
if (h) {
n.style.backgroundColor = "#aaa"
} else {
document.body.removeChild(f)
}
return m
}
if (typeof b != "undefined" && typeof b.exports != "undefined") {
b.exports = c
} else {
window.getCaretCoordinates = c
}
}())
}])
});
POWERMODE.colorful = true;
POWERMODE.shake = false;
document.body.addEventListener("input", POWERMODE);
<!--彩色粒子特效结束-->新用户注册滚动播报
分享一段函数代码，挺简单的一个小功能，可以实现新用户注册滚动播报，有能力可以自行二次开发成小工具。
function DearLicy_notice() {
global $wpdb;
// 定义SQL查询来获取最新注册的十个用户
$sql = "SELECT ID, user_login, user_registered
FROM $wpdb->users
ORDER BY user_registered DESC
LIMIT 10"; //将10改为20则获取20个用户
// 执行查询
$users = $wpdb->get_results($sql);
$slides = ''; // 初始化$slides变量，用于存储每个用户的HTML代码片段
// 遍历结果集并生成HTML代码
if ($users) {
foreach ($users as $user) {
$user_name = $user->user_login;
$avatar = zib_get_avatar_box($user->ID, 'avatar-img avatar-mini mr6', false, true);
$link = zib_get_user_home_url($user->ID);
$registration_date = date('Y-m-d H:i:s', strtotime($user->user_registered));
// 为每个用户生成一个swiper-slide
$slide = '<div class="swiper-slide notice-slide">';
$slide .= '<a class="text-ellipsis" href="'.$link.'">' . $avatar . $user_name . ' 在 ' . $registration_date . ' 加入了本站</a>';
$slide .= '</div>';
// 拼接每个用户的HTML代码片段
$slides .= $slide;
}
}
// 构建完整的HTML结构
$html = '<div class="swiper-bulletin c-red radius8">';
$html .= '<div class="new-swiper" data-interval="5000" data-direction="vertical" data-loop="true" data-autoplay="1">';
$html .= '<div class="swiper-wrapper">';
$html .= $slides; // 插入所有用户的HTML代码片段
$html .= '</div>';
$html .= '<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>';
$html .= '</div>';
$html .= '</div>';
return $html; // 返回生成的HTML代码
}想要在自己网站显示这个效果就自行二开成小工具或者在合适的文件位置输出函数代码。
例如在主题目录下的index.php文件main标签下方插入一行。
今日签到增加五彩缤纷的背景颜色
添加教程：zibll主题后台–自定义代码–自定义CSS样式添加下面的CSS代码：
/*加点颜色加点料*/
.user-ranking-item.relative {
background: #ffd1d8;
border-radius: var(--main-radius);
}
.user-ranking-item.relative:nth-child(1) {
background: #ffd1d8;
}
.user-ranking-item.relative:nth-child(2) {
background: #ffa50085;
}
.user-ranking-item.relative:nth-child(3) {
background: #ffff0080;
}
.user-ranking-item.relative:nth-child(4) {
background: #98ff0073;
}
.user-ranking-item.relative:nth-child(5) {
background: #c4cffa;
}
.user-ranking-item.relative:nth-child(6) {
background: #c97eff75;
}
.user-ranking-item.relative:nth-child(7) {
background: #82eee782;
}
.user-ranking-item.relative:nth-child(8) {
background: #ff559480;
}
.user-ranking-item.relative:nth-child(9) {
background: #089e0f7d;
}
.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.posts-item .item-heading>a {font-weight: bold;color: unset;}.lazyloaded{--lazy-animation: lazy_fade;}@media (max-width:640px) {
.meta-right .meta-view{
display: unset !important;
}
}禁止中文用户名注册
WordPress子比主题优化：注册时禁止使用中文用户名，我们可以通过禁止非英文数字注册，达到我们想要的效果。
在主题根目录下的func.php文件第一行写<?php换行插入下方的代码：
/*禁止非英文数字注册*/
function restrict_chinese_usernames($username) {
$error_msgs = array();
if (preg_match('/[^\x20-\x7F]/', $username)) {
if ( empty( $error_msgs ) ) {
$error_msgs[] = '仅允许字母数字作为用户名';
}
}
if ( ! empty( $error_msgs ) ) {
wp_send_json( array( 'error' => 1, 'msg' => $error_msgs ) );
}
return $username;
}
add_filter('sanitize_user', 'restrict_chinese_usernames', 10, 3);代码也可以放在主题根目录下functions.php，效果是一样的。
粉色细节优化
给你的worpdress网站增加一个粉色果冻泡泡loading动画，经测试，这个动画特效会稍微拉低网站的访问速度。
增强视觉吸引力：粉色是一种温馨、甜美的颜色，可以给网站增添一份柔和、温暖的感觉，使得文章框更加引人注目。
提升用户体验：通过为文章框添加外框，可以使得文章内容更加突出，更容易被用户注意到。而粉色的外框则可以增加文章框的辨识度，使得用户在浏览网页时能够更快地找到所需的信息。
增加页面层次感：外框可以将文章框与其他页面元素区分开来，增加页面的层次感。粉色的外框可以作为一种视觉引导，帮助用户更好地理解页面结构。
体现品牌形象：如果网站的目标受众是年轻人群，那么粉色的外框可以更好地符合目标受众的审美需求，体现品牌的年轻、时尚、温馨的形象。
需要注意的是，设计元素的选择应根据网站的整体风格和定位来进行。粉色外框可能不适合所有类型的网站或文章内容，所以在实际应用中需要综合考虑自己更换喜欢的颜色。
将下方CSS放置于后台——自定义代码——自定义CSS内即可
/*粉色细节优化*/
.navbar-top .navbar-right .sub-menu {
-webkit-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
-moz-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
box-shadow: inset 0 1px 4px 0 #FFD1D8;
}
.posts-item.card{
-webkit-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
-moz-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
box-shadow: inset 0 1px 4px 0 #FFD1D8;
}
.zib-widget{
-webkit-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
-moz-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
box-shadow: inset 0 1px 4px 0 #FFD1D8;
}
.plate-lists .plate-item{
-webkit-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
-moz-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
box-shadow: inset 0 1px 4px 0 #FFD1D8;
}
.forum-posts{
-webkit-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
-moz-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
box-shadow: inset 0 1px 4px 0 #FFD1D8;
}
.article{
-webkit-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
-moz-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
box-shadow: inset 0 1px 4px 0 #FFD1D8;
}
.radius8{
-webkit-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
-moz-box-shadow: 0 1px 4px 0 #FFD1D8 inset;
box-shadow: inset 0 1px 4px 0 #FFD1D8;
}导航菜单添加彩色渐变的文字
以下代码放到菜单
<span class="meihua">你的菜单名称</span>以下代码放入css样式
.meihua {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@media (max-width:768px) {
span.ua-info {
display: none
}
.comment-author .user-title {
width: 40% !important
}
}
.comment-author .user-title {
font-size: 13px;
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@keyframes text {
0% {
background-position: 0 0
}
100% {
background-position: -150% 0
}
}
.b2-qr-code-fill {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}纯代码实现未登录时图片高斯模糊显示
将以下提供的代码添加到主题根目录下的 functions.php 中
//未登录时全站图片模糊
function n_yingcang_css(){
echo '<style>
img {
-webkit-filter: blur(10px)!important;
-moz-filter: blur(10px)!important;
-ms-filter: blur(10px)!important;
filter: blur(6px)!important;}
</style>';
}
if( !is_user_logged_in()) {add_action( 'wp_head', 'n_yingcang_css' );};
//未登录时全站图片模糊Zibll子比主题悬浮按钮美化
和大家分享个CSS代码美化子比主题自带的悬浮按钮样式把，其实就是把它自带的按钮改变成彩色按钮也没啥，所以这篇教程非常的简单，看教程吧。
直接把下面代码放在子比主题后台自定义CSS代码，然后这里我就不多说了，相信用子比主题的人，这个都会弄这个东西，这里注意的是如果放了还不显示效果就是这个CSS和其他的CSS代码有冲突，自己排查下就可以了。
/*自定义子比浮窗样式*/
.wiiuii-zbfc-sty{display:flex;flex-direction:column;align-items:center;justify-content:center}
.wiiuii-zbfc-img{border-top-left-radius:8px;border-top-right-radius:8px}
.wiiuii-zbfc-sty>a{width:100%}
.wiiuii-zbfc-btn{color:#000;text-align:center;background:linear-gradient(288deg,#ffb6b9 0,#ffb6b9 35%,#fae3d9 calc(35% + 1px),#fae3d9 45%,#bbded6 calc(45% + 1px),#bbded6 65%,#61c0bf calc(65% + 1px),#61c0bf 100%);width:100%;padding:10px;margin-top:5px;border-bottom-right-radius:8px;border-bottom-left-radius:8px}
.wiiuii-zbfc-btn:hover{color:#fff;background:linear-gradient(123deg,#461b93 0,#461b93 40%,#6a3cbc calc(40% + 1px),#6a3cbc 60%,#8253d7 calc(60% + 1px),#8253d7 70%,#f78f1e calc(70% + 1px),#f78f1e 100%)}添加滚动播报小工具
只需在后台—>外观—>小工具—>自定义HTML添加下面的代码，把它放在合适的位置（本站放在侧边栏），然后就可以啦。
<style type="text/css">
#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;line-height:50px;text-align:center;padding: 10px;background: linear-gradient(45deg, #C7F5FE 10%, #C7F5FE 40%, #FCC8F8 40%, #FCC8F8 60%, #EAB4F8 60%, #EAB4F8 65%, #F3F798 65%, #F3F798 90%);border-radius: var(--main-radius);}
#flip-box-1{overflow:hidden;height:50px;border-radius:99px}
#flip-box-1 div{height:50px}
#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}
#flip-box-1 div:first-child{animation:show 8s linear infinite}
.flip-box-1-1{background-image:linear-gradient(to right,#fa709a 0,#fee140 100%)}
.flip-box-1-2{background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);}
.flip-box-1-3{background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);}
.flip-box-1-4{background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);}
.flip-box-1-5{background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);}
.flip-box-1-6{background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);}
@keyframes show{0%{margin-top:-300px}
5%{margin-top:-250px}
16.666%{margin-top:-250px}
21.666%{margin-top:-200px}
33.332%{margin-top:-200px}
38.332%{margin-top:-150px}
49.998%{margin-top:-150px}
54.998%{margin-top:-100px}
66.664%{margin-top:-100px}
71.664%{margin-top:-50px}
83.33%{margin-top:-50px}
88.33%{margin-top:0}
99.996%{margin-top:0}
100%{margin-top:300px}
}
</style>
<div id="container-box-1">
<div class="container-box-1-1"><svg class="icon" aria-hidden="true"><use xlink:href="#iconxiangwenbiaoqing"></use></svg> 坚持每天来逛逛，会让你 <svg class="icon" aria-hidden="true"><use xlink:href="#iconpaomeiyanbiaoqing"></use></svg></div>
<div id="flip-box-1"><div><div class="flip-box-1-1">生活也美好了！</div>
</div><div><div class="flip-box-1-2">心情也舒畅了！</div></div>
<div><div class="flip-box-1-3">走路也有劲了！</div></div><div>
<div class="flip-box-1-4">腿也不痛了！</div></div>
<div><div class="flip-box-1-5">腰也不酸了！</div></div>
<div><div class="flip-box-1-6">工作也轻松了！</div></div>
</div><div class="container-box-1-2"><svg class="icon" aria-hidden="true"><use xlink:href="#iconkaixinbiaoqing"></use></svg> 你好我也好，不要忘记哦! <svg class="icon" aria-hidden="true"><use xlink:href="#icondaxiaobiaoqing"></use></svg></div></div>网站底部通用美化代码
网站通用代码，底部美化css代码，代码内有注释解释，可自由搭配颜色和图案，精简代码，增快访问速度。
HTML代码
放在适当位置： WordPress为footer.php中即可
<!--网站底部自定义链接 -开始-->
<div class="github-badge">
<span class="badge-subject bg-blue">
<a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a>
</span>-
<span class="badge-subject bg-brightgreen">
<a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a>
</span>-
<span class="badge-subject bg-green">
<a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a>
</span>-
<span class="badge-subject bg-orange">
<a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a>
</span>-
<span class="badge-value bg-blueviolet">
<a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a>
</span>-
<span class="badge-value bg-red">
<a style="color:#fff" href="链接地址" target="_blank">自行修改文字</a>
</div>
<!--网站底部自定义链接 -结束-->CSS代码：
/*CSS 网站底部自定义按钮美化开始*/:root{--theme-color:#f04494;--focus-shadow-color:rgba(240,68,148,.4);--mian-max-width:1200px;}.github-badge {
display: inline-block;
border-radius: 4px; text-shadow: none; font-size: 12px; color: #fff; line-height: 15px; margin-bottom: 5px;}.badge-subject {
display: inline-block; background-color: #4d4d4d; padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;}.github-badge .bg-blue {
background-color: #007ec6;}.github-badge .bg-brightgreen {
background-color: #4dc820;}.github-badge .bg-blueviolet {
background-color: #8833d7;}.github-badge .badge-value {
display: inline-block; padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;}.github-badge .bg-orange {
background-color: orange;}.github-badge .bg-red {
background-color: red;}/*CSS 网站底部自定义按钮美化结束*/本站已安全运行代码美化
主题设置→底部页脚→页脚自定义HTML
//开始
<font color="#e955fd"><b>本站已安全运行:</b></font>
<span id="momk"></span>
<script language=javascript>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("02-10-2022 12:12:18");//建站日期
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(daysold-e_daysold)*-24;
hrsold=Math.floor(e_hrsold);
e_minsold=(hrsold-e_hrsold)*-60;
minsold=Math.floor((hrsold-e_hrsold)*-60);
seconds=Math.floor((minsold-e_minsold)*-60);
momk.innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒" ;
}
show_date_time();
</script>
</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>
// 结束文章标题加上渐变彩色文字
代码
/*文章标题加上渐变彩色文字 开始*/
.item-heading :hover,
.text-ellipsis :hover,
.text-ellipsis-2 :hover,
.links-lists :hover {
background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: maskedAnimation 4s infinite linear;
}
@keyframes maskedAnimation {
0% {
background-position: 0 0
}
100% {
background-position: -100% 0
}
}
/*文章标题加上渐变彩色文字 结束*/文章缩略图添加优雅的动态圆圈
将以下css代码追加保存到主题设置->自定义代码->自定义CSS代码
/*文章缩略图的动态圆圈 开始*/
.item-thumbnail:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0);
transition: background .35s;
border-radius: 8px;
z-index: 2;
max-width: 765px;
margin: 0 auto;
pointer-events: none;
}
.item-thumbnail:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background: url(图片URL地址);
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 3;
-webkit-transform: scale(2);
transform: scale(2);
transition: opacity .35s,-webkit-transform .35s;
transition: transform .35s,opacity .35s;
transition: transform .35s,opacity .35s,-webkit-transform .35s;
opacity: 0;
pointer-events: none;
}
.item-thumbnail:hover:before {
background: rgba(0,0,0,.5)
}
.item-thumbnail:hover:after {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1
}
/*文章缩略图的动态圆圈 结束*/首页文章列表悬停上浮
CSS代码：
/*首页文章列表悬停上浮*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}导航栏标题字体加粗
CSS代码：
/*导航栏字体加粗*/ul.nav {font-weight: 700;}自定义网站图片背景
/***日间主题模式***/
body {
background-image: url("/**这里改为你自己的图片地址**/");
background-position-x: center;
background-position-y: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
/***夜间主题模式***/
.dark-theme {
background-position-x: center;
background-position-y: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url("/**这里改为你自己的图片地址**/");
background-size: cover;
}友情链接右侧添加美化按钮
添加方法： 后台设置—>外观—>小工具—>添加Zibll 链接列表(新版)，加到标题右侧按钮即可。
<span class="but c-blue radius"><svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#icon-fengche1"></use></svg>申请友链侧边栏添加简单的小模块[WP小工具]
站点后台 >> 外观 >> 小工具 >> html代码 然后把小工具添加到指定侧边栏中即可。
可以用来做侧边栏的广告、领取优惠等。
<a class="ads" href="链接地址 "style="border-radius:5px;">
<h4>小工具</h4>
<h5>安全有保障</h5>
<span class="ads-btn ads-btn-outline">立即进入</span></a>
<style>
.ads{display:block; padding:40px 15px; text-align:center; color:#fff!important; background:#ff5719; background-image:-webkit-linear-gradient(135deg,#bbafe7,#5368d9); background-image:linear-gradient(135deg,#bbafe7,#5368d9)}.ads h4{margin:0; font-size:22px; font-weight:bold}.ads h5{margin:10px 0 0; font-size:14px; font-weight:bold}.ads.ads-btn{margin-top:20px; font-weight:bold}.ads.ads-btn:hover{color:#ff5719}.ads-btn{display:inline-block; font-weight:normal; margin-top:10px; color:#666; text-align:center; vertical-align:top; user-select:none; border:none; padding:0 36px; line-height:38px; font-size:14px; border-radius:10px; outline:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out}.ads-btn:hover,.btn:focus,.btn.focus{outline:0; text-decoration:none}.ads-btn:active,.btn.active{outline:0; box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.ads-btn-outline{line-height:36px; color:#fff; background-color:transparent; border:1px solid#fff}.ads-btn-outline:hover,.btn-outline:focus,.btn-outline.focus{color:#343a3c; background-color:#fff}
</style>说明：如果只是使用的话，CSS可无需修改，只需修改文本和跳转的网址即可。不需要圆边的话删除style=”border-radius:5px;”即可。
主题文章标签美化
复制CSS代码到后台子比主题设置—》自定义CSS样式—》将CSS代码粘贴框里。
CSS代码：
/*文章随机彩色标签*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}注：CSS代码已进行压缩，直接复制粘贴即可。
网站格子图背景CSS代码
CSS代码
body::before {
background-image: linear-gradient(90deg, rgba(60, 10, 30, .04) 3%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .04) 3%, transparent 0);
background-size: 20px 20px;
background-position: 50%;
background-repeat: repeat;
}👋 感谢您的观看！
© 版权声明
THE END