文章最后更新时间:
21、子比主题评论框添加背景图片
在子比主题设置—自定义CSS样式,添加下面的CSS代码:
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(图片链接) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
图片自己保存到本地,图片大小(162 X 75,建议透明的png图片),自己添加喜欢的背景图片。
效果
![图片[1] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251209064106115.png)
22、彩色随机标签页按钮美化
![图片[2] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251219150940683.png)
将下面代码放到子比主题-自定义CSS样式里面即可
/*文章随机彩色标签*/
.widget-tag-cloud.fixed-width .but:hover{opacity: 1;}.widget-tag-cloud.fixed-width .but{opacity: 0.6;line-height: 20px !important;padding: 4px 10px !important;font-size: 12px !important;}.widget-tag-cloud.fixed-width .but:nth-child(5n){background-color: #4A4A4A;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+3){background-color: #1ac756;color: #FFF}.widget-tag-cloud.fixed-width .but:nth-child(5n+4){background-color: #19B5FE;color: #FFF}
23、文章底部加一个商业版权声明
![图片[3] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251219151302239.png)
将下面代码放到子比主题设置=>>文章列表=>>文章页面=>>在文章内容后-插入内容
<div class="shangye">本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!</div>
将下面的代码放到自定义CSS即可实现
.shangye {
color: #fff;
background: #5282f7 url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01BCJh7X1QbIi6fiBx8_!!2210123621994.png) 3px 7px no-repeat;
border: 1px solid #5282f7;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 50px;
border-radius: 4px;
}
24、子比主题给首页左侧添加联系站长按钮
![图片[4] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251219151715973.png)
如果要每个页面显示,将代码放入footer.php文件即可
<style>@keyframes shangxa {
0%,
100%,
20%,
50%,
80% {
transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transform: translate3d(0, 0, 0);
}
40%,
43% {
transition-timing-function: cubic-bezier(0.755, 0.50, 0.855, 0.060);
transform: translate3d(0, -10px, 0);
}
70% {
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -6px, 0);
}
90% {
transform: translate3d(0, -3px, 0);
}
}
.leke {
display: flex;
position: fixed;
left: 0;
top: calc(50% - 103px);
flex-direction: column;
-webkit-box-align: center;
align-items: center;
color: rgb(255, 255, 255);
font-size: 16px;
font-weight: 500;
line-height: 20px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 6px -4px, rgba(13, 206, 158, .37) 0px 6px 10px;
z-index: 10;
overflow: hidden;
background: #0dce9e;
padding: 12px 8px 12px 5px;
border-radius: 0 14px 14px 0;
transition: height 0.2s ease 0s, top 0.2s ease 0s;
}
.leke:hover {
opacity: .8;
}
.leke .upload-icon {
flex-shrink: 0;
width: 28px;
height: auto;
display: block;
margin-bottom: 2px;
-webkit-animation: shangxa 2s infinite;
animation: shangxa 2s infinite;
}
@media screen AND (max-width: 768px) {
.leke {
display: none;
}
}
#qidiana {
cursor: pointer;
}
.class_qidian_wpa {
border-radius: 6px !important;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
}
</style>
<a href="http://wpa.qq.com/msgrd?v=3&uin=8442606&site=qq&menu=yes" target="_blank">
<div id="qidiana" class="leke"><svg t="1599210542874" class="upload-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16321" width="30" height="30">
<path d="M224.99 512a287.01 287.01 0 1 0 574.02 0 287.01 287.01 0 1 0-574.02 0z" fill="#FFDA33" p-id="16322"></path>
<path d="M659.18375 635.7275c5.61375-6.55875 3.74625-16.86375-2.82375-22.5-6.5475-5.61375-16.86375-3.735-22.48875 2.82375-33.75 37.485-70.30125 55.305-121.86 55.305-51.55875 0-84.375-14.0625-121.87125-55.305-5.625-6.57-15.94125-8.4375-22.5-2.82375-6.57 5.63625-8.4375 15.94125-2.8125 22.5 44.055 49.69125 85.30875 68.43375 147.18375 68.43375 61.86375 0 107.7975-22.48875 147.1725-68.43375zM390.15125 469.8125v-56.25c0-14.99625-12.18375-28.125-28.125-28.125-14.99625 0-28.11375 12.18375-28.11375 28.125v56.25c0 14.99625 12.1725 28.125 28.11375 28.125 14.99625 0 28.125-12.18375 28.125-28.125z m494.94375-59.0625c-42.1875-170.6175-193.10625-297.1575-373.08375-297.1575-179.98875 0-330.9075 126.54-373.10625 297.1575-45 16.875-76.87125 66.555-76.87125 124.68375 0 66.56625 42.1875 121.86 97.4925 130.30875 0 0 0 0.93375 0.945 0.93375h62.80875a339.87375 339.87375 0 0 1-39.375-159.3675c0-186.5475 147.18375-337.4775 328.10625-337.4775s328.08375 150.93 328.08375 337.4775c0 125.60625-66.54375 234.36-165.915 292.48875A54.9 54.9 0 0 0 661.0625 797.91875c-30.9375 0-56.25 25.30125-56.25 56.2275 0 30.94875 25.3125 56.26125 56.25 56.26125 30.92625 0 56.23875-25.3125 56.23875-56.26125 0-4.68-0.93375-9.36-1.87875-13.10625 64.6875-42.1875 117.18-103.12875 148.12875-175.2975 55.29375-9.39375 98.415-63.7425 98.415-130.30875 0-58.12875-32.81625-107.80875-76.87125-124.68375z m-194.985 59.0625v-56.25c0-14.99625-12.18375-28.125-28.11375-28.125-15.0075 0-28.125 12.18375-28.125 28.125v56.25c0 14.99625 12.18375 28.125 28.125 28.125 14.99625 0 28.11375-12.18375 28.11375-28.125z" fill="#515151" p-id="16323" data-spm-anchor-id="a313x.7781069.0.i0" class=""></path>
</svg><span>联</span><span>系</span><span>站</span><span>长</span></div>
</a>
25、子比主题给文章内超链接加上波浪效果
![图片[5] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251219152103359.gif)
26、子比文章内图片鼠标移动到图片外边框自动发光
![图片[6] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251219152405683.png)
子比主题设置–>>自定义代码–>>自定 CSS 代码,把下面的 css 代码复制粘贴到里面即可,里面的 8px 大小可自行调节,颜色代码#63B8FF 也可自行设置
/*鼠标移动图片外发光*/
.wp-posts-content img:hover {
box-shadow:0px 0px 8px #63B8FF;
}
27、网站添加一个彩色渐变的滚动移动公告
![图片[7] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251219152616988.gif)
代码如下
28、给子比主题加个格子图背景CSS代码
![图片[8] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251219152847606.png)
直接将下面代码放到自定义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;
}
29、子比主题右上角开通会员炫彩色
![图片[9] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251219153005280.png)
30、子比主题拟态CSS
![图片[10] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客](https://image.nuoso.cn/2025/12/20251219153124539.jpg)
将代码放到自定义CSS里面即可!!
© 版权声明
© 版权声明 All Rights Reserved
THE END




![诺守博客 - 专业的网络资源分享平台![官网]](https://image.nuoso.cn/2025/12/20251205102715204.png)


- 最新
- 最热
只看作者