WordPress子比美化教程（持续更新中）2025/12/14更新-浩旭的资源站

WordPress子比美化教程（持续更新中）

浩旭

发表于2025-12-14

更新于2025-12-14

该文章1776字

阅读需9分钟

热度值125

2条评论

本页主题美化内容是浩旭资源站在建站时一个一个测试过无任何错误的记录合集，使用之前先参考本站，若觉得实用就拿去用吧，浩旭资源站会持续的更新美化教程！

美化说明

主题美化、小工具可能会有一定程度使网站加载缓慢、CSS 全局污染等等一系列的问题，请一定要测试后在进行美化。
主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。

必要说明：（核心重点）

↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓
（最新版子比主题）CSS 代码添加到后台：子比主题设置–>>自定义代码–>>自定义 CSS 样式
（最新版子比主题）JS 即 javascript 代码添加到：后台子比主题设置–>>自定义代码–>>自定义 javascript 代码
（最新版子比主题）没有特殊说明的小工具，自定义 HTML 小工具：添加网站后台–>>外观–>>小工具–>>点击【自定义 HTML】选择放置的位置—>把代码复制进去，保存即可。
↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑
其他添加方式的，我会在教程里告知，若只需添加 CSS+JS 的教程，我可能不重复告知了，请注意看上面的方法。
有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面。

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

图片[1]-WordPress子比美化教程（持续更新中）2025/12/14更新-浩旭的资源站

我们第一步将下面的代码放到：子比主题–>>自定义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);}
  }

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

图片[2]-WordPress子比美化教程（持续更新中）2025/12/14更新-浩旭的资源站

将下面的代码放到：子比主题–>>自定义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.首页文章列表悬停上浮样式1

图片[3]-WordPress子比美化教程（持续更新中）2025/12/14更新-浩旭的资源站

将下面的代码放到：子比主题–>>自定义CSS样式即可

此处内容已隐藏，请评论后刷新页面查看.

温馨提示：本文最后更新于2025-12-14 16:50:52，某些文章具有时效性，若有错误或网盘失效，请在下方留言或联系站长。

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

THE END