WordPress子比主题美化教程合集（持续更新）-星客纪元

AI 文章摘要

这篇文章整理了 WordPress 子比主题的多种美化教程，涵盖菜单图标旋转、标签样式优化、Logo 扫光特效及侧边滚动条定制等实用功能。作者强调所有代码均经过测试且免费开放，但指出美化可能影响加载速度或造成 CSS 污染，建议用户务必先备份并在测试环境验证后再上线使用。此外，文章明确了不同代码（CSS/JS/HTML）在后台的具体添加路径，方便用户快速部署。

前言

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

注意说明

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

教程即说明

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

1、子比主题美化网站菜单图标旋转教程

我们第一步将下面的代码放到：子比主题–>>自定义CSS样式

.figure{
    width: 15px;
    animation:0ms;
    -webkit-animation:rotateImg 3s linear infinite;
    vertical-align: middle;
  }
  @keyframes rotateImg {
    0% {transform : rotate(0deg);}
    100% {transform : rotate(360deg);}
  }
  @-webkit-keyframes rotateImg {
      0%{-webkit-transform : rotate(0deg);}
    100%{-webkit-transform : rotate(360deg);}
  }

然后我们再利用figure这个标签进行图标旋转，如下图，第一个箭头就是利用的标签，然后第二个箭头是你的图标代码！

图标代码

<svg class="figure"  aria-hidden="true"><use xlink:href="#icon-surface_gongju"></use></svg>

icon-surface_gongju改成你的图标就可以了！

2、子比主题文章标签美化

将下面的代码放到：子比主题–>>自定义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}

3、网站顶部Logo扫光

教程

将下列代码粘贴到”zibll主题设置->全局&功能－>自定义代码－>自定义css样式中：

/* 【星客纪元】网站顶部Logo扫光 */
.navbar-brand {
    position: relative;
    overflow: hidden;
    margin: 0;
}
.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: 0;
    }
}

4、子比主题侧边滚动条样式美化

一共有两款侧边滚动条美化，放到子比主题–>>自定义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;
}

版权声明 1 本站名称： 星客纪元
2 本站网址：www.xker.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6 本站附件资源、教程等内容如因时效原因失效或不可用，请评论区留言或联系站长及时更新。

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

如果用于其他用途，请购买正版支持作者，谢谢！若您认为「XKER.CN」发布的内容若侵犯到您的权益，请联系站长邮箱:xkera@qq.com 进行删除处理。
本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。

THE END