🎀 🌸

WordPress子比主题美化教程合集[2025/11/22](持续更新)

📝 星芒官方作者 🏷️ 子比美化

WordPress子比主题美化教程合集[2025/11/22](持续更新)

16710

前言

本页主题美化内容是博主在建站时一个一个测试过无任何错误的记录合集，使用之前先参考本站，若觉得实用就拿去用吧，我会不定时更新，如有长期未更新或者不能使用的请留言。

注意说明

每个人的审美观念不一样，所以请先参考本站或测试在用的美化。主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请一定要测试后再进行美化。主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。子比主题美化都是空白(我)自己鼓捣、测试后才发布的，完全免费，开放。

教程及说明

（最新版）CSS代码添加到子比主题后台设置->自定义代码->自定义CSS样式（最新版）JS即javascript代码添加到子比主题后台设置->自定义代码->自定义javascript代码（最新版）没有特殊说明的小工具，自定义HTML小工具添加网站后台->外观->小工具->点击【自定义HTML】选择放置的位置->把代码复制进去，保存即可。其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我不重复告知了，请注意看上面的方法。

 

#1 主题LOGO扫光

CSS代码：后台子比主题设置->自定义代码->自定义CSS样式

/* <a target="_blank" href="https://www.xkzhi.com/tag/91/" title="View all posts in logo">logo</a>扫光开始 kobai.top*/
.navbar-br<a target="_blank" href="https://www.xkzhi.com/tag/140/" title="View all posts in an">an</a>d{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
/* logo扫光结束 kobai.top*/
#2 文章标签美化

CSS代码：后台子比主题设置->自定义代码->自定义CSS样式

/*文章随机彩色标签开始 kobai.top*/
.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}
/*文章随机彩色标签结束 kobai.top*/
#3 侧边彩色滚动条

使用方法

一般主题都会自带 自定义代码 这样主题设置的，只需在主题设置自定义CSS代码里面添加美化的css代码就即可美化啦！如果主题没有 自定义代码 那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外CSS”里面美化的css代码就即可美！

单色滚动条样式

/*滚动条显示样式*/
::-webkit-scrollbar-thumb{
background-color:#FF6666; /*更改喜欢的十六进制颜色*/
height:50px;
outline-offset:-2px;
outline:2px solid #fff;
-webkit-border-radius:4px;
border: 2px solid #fff;
}
/*滚动条大小*/
::-webkit-scrollbar{
width:8px;
height:8px;
}
/*滚动框背景样式*/
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}

彩色滚动条样式

/**彩色滚动条样式*/
::-webkit-scrollbar {
width: 10px;
height: 1px;
}
::-webkit-scrollbar-thumb {
background-color: #12b7f5;
background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #f6f6f6;
}
#4 头像呼吸光环+鼠标悬停旋转放大

CSS代码：后台子比主题设置->自定义代码->自定义CSS样式

自定义代码CSS

/*头像呼吸光环和鼠标悬停旋转放大*/
.avatar{border-radius:50%; animation:light 4s ease-in-out infinite;transition:0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}
#5 动态LOGO变色代码

子比主题直接添加到后台自定义CSS位置即可

/*LOGO变色*/
.navbar-logo{animation: hue 4s infinite;}@keyframes hue {from {filter: hue-rotate(0deg);}to {filter: hue-rotate(-360deg);}}
#6 用户名文字彩色变换

将下面代码复制，粘贴在后台子比设置的 自定义代码—自定义CSS样式 位置，保存即可

/*用户名昵称文字彩色变换 蛙言网 b66b.cn*/
.display-name{
background-image: -webkit-linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 100% 600%;
animation: wzw 10s linear infinite;
}
@keyframes wzw {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -300%;
}
}
/*用户名昵称文字彩色变换 蛙言网 b66b.cn*/
#7 文章顶部/底部添加自定义内容按钮样式
图片[1]-WordPress子比主题美化教程合集[2025/11/22](持续更新)-星芒博客

这个样式非常适合放在文章的开头，提升整体的视觉效果。同时，这个按钮也具有实用的功能。如果你感兴趣，可以自行进行部署哦！

默认只有四个按钮，可以自定义文字和跳转地址，也可自己增加更多按钮

代码教程：将下面的代码放到：Zibll主题设置 – 文章内页 – 文章插入内容，前后自己选择，然后自行修改 文字/链接/图片等内容即可

<style>
    .hoayue_button_container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        padding: 20px 0;
        width: 100%;
        box-sizing: border-box;
    }

    .hoayue_button_block {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
        font-weight: 500;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #333;
        text-align: center;
        user-select: none;
        background: #f2f2f2;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border: 1px solid #ddd;
        text-decoration: none;
        gap: 6px;
        text-decoration: none;
        flex: 1 0 22%;
        box-sizing: border-box;
    }

    .hoayue_button_block:hover {
        background: #e0e0e0;
        transform: translateY(-2px);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    }

    .hoayue_button_icon {
        width: 18px;
        height: 18px;
    }

    @media (min-width: 1025px) {
        .hoayue_button_container {
            justify-content: space-between;
        }
        .hoayue_button_block {
            flex: 1 0 calc(25% - 20px);
            max-width: 23%;
            font-size: 14px;
            padding: 6px 14px;
        }
        .hoayue_button_icon {
            width: 16px;
            height: 16px;
        }
    }

    @media (min-width: 768px) and (max-width: 1024px) {
        .hoayue_button_block {
            flex: 1 0 calc(25% - 20px);
            max-width: 23%;
            font-size: 16px;
            padding: 8px 16px;
        }
        .hoayue_button_icon {
            width: 18px;
            height: 18px;
        }
    }

    @media (max-width: 767px) {
        .hoayue_button_block {
            flex: 1 0 calc(50% - 10px);
            font-size: 14px;
            padding: 8px 14px;
        }
        .hoayue_button_icon {
            width: 16px;
            height: 16px;
        }
    }
</style>
<div class="hoayue_button_container">
    
    <a href="/" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
        <img src="https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01b50zA11QbIknUHkm8_!!2210123621994.png" alt="加入QQ群图标" class="hoayue_button_icon" /> <!-- 图标替换为图片 -->
        加入QQ群
    </a>
    <a href="/" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
        <img src="https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01pj4Erv1QbIknUIxf0_!!2210123621994.png" alt="微信公众号图标" class="hoayue_button_icon" /> <!-- 图标替换为图片 -->
        关注微信公众号
    </a>
    <a href="/" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
        <img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN011LMFn11QbIknUHgg4_!!2210123621994.png" alt="联系我们图标" class="hoayue_button_icon" /> <!-- 联系我们图标 -->
        联系我们
    </a>
    <a href="/" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
        <img src="https://img.alicdn.com/imgextra/i1/2210123621994/O1CN014mUJD21QbIklklc6g_!!2210123621994.png" alt="请求更新图标" class="hoayue_button_icon" /> <!-- 图标替换为图片 -->
        请求更新
    </a>
</div>
#8 动态粒子背景GO跳转页面美化

美化简介

上传子比主题目录下覆盖go.php文件即可，注意！原来的go.php一定要备份！备份！备份!!,下面是效果图片

图片[2]-WordPress子比主题美化教程合集[2025/11/22](持续更新)-星芒博客

将下面代码复制，替换子比根目录下的go.php文件内容即可

  此处内容已隐藏，请评论后刷新页面查看.
#9 会员免评论查看功能

功能简介

这是一款子比主题会员免评论查看功能，为一级和二级会员用户提供免评论查看”评论可见”内容的特权，支持单独控制一级和二级会员的权限，喜欢的自行部署吧！

功能截图

图片[3]-WordPress子比主题美化教程合集[2025/11/22](持续更新)-星芒博客
图片[4]-WordPress子比主题美化教程合集[2025/11/22](持续更新)-星芒博客
  此处内容已隐藏，请评论后刷新页面查看.
#10 顶部多功能组件导航美化
© 版权声明

本站收集的资源仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负。

如果用于其他用途，请购买正版支持作者，谢谢！若您认为「4HS.CN」发布的内容若侵犯到您的权益，请联系站长邮箱:716312619@qq.com 进行删除处理。

本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。
THE END
子比美化
喜欢就支持一下吧
点赞10 分享
星芒官方作者的头像-星芒博客
子比插件（文章同步到微信公众号未认证）-星芒博客
子比插件（文章同步到微信公众号未认证）
子比插件（文章同步到微信公众号未认证）
1个月前 75
[子比主题美化] – 文章列表卡片3个小圆圈样式美化+代码区块添加圆点美化-星芒博客
[子比主题美化] – 文章列表卡片3个小圆圈样式美化+代码区块添加圆点美化
[子比主题美化] – 文章列表卡片3个小圆圈样式美化+代码区块添加圆点...
1个月前 67
适配子比主题1-100等级图标分享-星芒博客
适配子比主题1-100等级图标分享
适配子比主题1-100等级图标分享
1个月前 66
服务器监控2.0版-星芒博客
服务器监控2.0版
服务器监控2.0版
31天前 64
前端附件管理插件-星芒博客
前端附件管理插件
前端附件管理插件
1个月前 61
分享一个自己在用的子比主题推广插件小工具-星芒博客
分享一个自己在用的子比主题推广插件小工具
分享一个自己在用的子比主题推广插件小工具
1个月前 61
相关推荐
子比插件（文章同步到微信公众号未认证）-星芒博客
子比插件（文章同步到微信公众号未认证）
子比插件（文章同步到微信公众号未认证）
1个月前 75
WordPress子比主题美化教程合集[2025/11/22](持续更新)-星芒博客
WordPress子比主题美化教程合集[2025/11/22](持续更新)
WordPress子比主题美化教程合集[2025/11/22](持续更新)
1个月前 67
[子比主题美化] – 文章列表卡片3个小圆圈样式美化+代码区块添加圆点美化-星芒博客
[子比主题美化] – 文章列表卡片3个小圆圈样式美化+代码区块添加圆点美化
[子比主题美化] – 文章列表卡片3个小圆圈样式美化+代码区块添加圆点美化
1个月前 67
适配子比主题1-100等级图标分享-星芒博客
适配子比主题1-100等级图标分享
适配子比主题1-100等级图标分享
1个月前 66
前端附件管理插件-星芒博客
前端附件管理插件
前端附件管理插件
1个月前 61
分享一个自己在用的子比主题推广插件小工具-星芒博客
分享一个自己在用的子比主题推广插件小工具
分享一个自己在用的子比主题推广插件小工具
1个月前 61
评论 共1条

请登录后发表评论

    暂无评论内容