本站同款美化（会持续更新）适合子比主题-九块九源码

温馨提示：本文最后更新于2025-08-26 10:09:31，某些文章具有时效性，若有错误或已失效，请在下方留言或联系站长。

Hello~ 此文章是汇集了本站的所有装修代码做了一个整合，所以象征性的做一个收费~

这里面大多数代码都是拿别的博客里面写的教程，也包括了我自己本人付费购买的插件，

按照我这里面的所有教程来，你就能打造出一个跟我一模一样的装修风格~后续本站更新也会同步在此文章更新！

文章中有一些超链以及一些第三方链接记得改成自己的例如一些挂靠到别人网址的或图床尽量改成自己的否则后期如果他人的站点没开了那么你的那个图片就会失效

插条广告：如不想自己手动操作或者怕哪里出现问题可以联系本站长代劳操作！（付费）

提醒：在/wp-content/themes/zibll 这个目录下创建一个func.php文件记得<?php开头，这样子当你有PHP文件需要添加的时候可以添加在此PHP文件里面，一样会引用！你可以理解func.php当functions.php用！

温馨提示：在装修网站前，请提前安装好此插件，此插件可以让你后期再维护一些美化代码的时候可以帮你省下好多时间！（我就是发现的晚，所以我就全部安装在子比主题里面自带的自定义代码和CSS里面，导致现在翻查一些代码的时候特别麻烦，因为子比给出的自定义代码可以看到的行数有限，）强烈推荐！！！

插件安装：后台–插件–安装新插件–选择你下载的这个压缩包上传即可安装完成在侧边栏有显示

子比代码自定义插件

下载

提取码:9k9y

1、热搜

两个版本分两个文件，定位：/wp-content/themes/zibll/pages 目录下，自己创建一个文件后缀php就行，我这里的是 hottop.php 文件，自己创建一个新文件，话不多说直接上附件代码！直接将下面的代码上传到pages下面，两个版本文件名字一样，喜欢哪个就上传哪个！

上传之后到：WP后台–>>页面–>>新建页面–>>选择你上传的版本

热搜

下载

提取码:9k9y

2、文本超链接美化样式

子比主题–>>自定义CSS样式即可

@font-face {<br>    font-family: 'tengfei-font';<br>    src: url('//at.alicdn.com/t/c/font_4823557_nwo4uyriby.woff2?t=1741491889382') format('woff2'),<br>      url('//at.alicdn.com/t/c/font_4823557_nwo4uyriby.woff?t=1741491889382') format('woff'),<br>      url('//at.alicdn.com/t/c/font_4823557_nwo4uyriby.ttf?t=1741491889382') format('truetype');<br>   }<br>   <br>    .wp-posts-content a:not([class]),.wp-block-list a:not([class]) {<br>      color: var(--focus-color);<br>      line-height: 1.15em;<br>      padding: .1em .35em;<br>      font-size: max(.75rem,.75em);<br>      border-radius: 2em;<br>      background: var(--focus-color-opacity1) linear-gradient(var(--focus-shadow-color) 0 0) no-repeat 100% 100%/0 100% border-box;<br>      -webkit-box-decoration-break: clone;<br>      box-decoration-break: clone;<br>      transition: .7s cubic-bezier(.6,.1,0,1),background-position 0s;<br>      word-break: break-all;<br>      display: inline-flex;<br>      align-items: center;<br>      transform: translateY(-1.15px)<br>    }<br>    .wp-posts-content a:not([class]):hover,.wp-block-list a:not([class]):hover {<br>      color: #fff;<br>      background-position-x: 0;<br>      background-size: 100% 100%<br>    }<br>    .wp-posts-content a:not([class]):before,.wp-block-list a:not([class]):before {<br>     content: "\ec7f";<br>     font-family: 'tengfei-font';<br>      height: 1.15em;<br>      display: -webkit-inline-flex;<br>      display: inline-flex;<br>      -webkit-align-items: center;<br>      align-items: center;<br>      -webkit-justify-content: center;<br>      justify-content: center;<br>      aspect-ratio: 1;<br>      margin: 0 0 0 -.3em;<br>      background: var(--focus-shadow-color);<br>      border-radius: 50%;<br>      color: #fff;<br>      transition: inherit<br>    }<br>    .wp-posts-content a:not([class]):hover:before,.wp-block-list a:not([class]):hover:before {<br>      background: #fff;<br>      color: var(--focus-color);<br>      rotate: 45deg;<br>      scale: .9<br>    }

3、子比主题美化 – 小工具标题美化

有两个版本,本站用的是第二个版本，这里根据你们自己的需求看看你们喜欢那种版本！

第一个版本

将一下代码放进后台的小工具

小工具–自定义HTML–（首页-主内容上面）

<div class="file-format" data-v-2775696c=""><span id="index-xtips" class="txt-file-format" data-v-2775696c="">超强生产力，动力足！</span> <span class="file-format-icons" data-v-2775696c=""><i class="icon_ps" data-v-2775696c=""></i> <i class="icon_ai" data-v-2775696c=""></i> <i class="icon_sketch" data-v-2775696c=""></i> <i class="icon_3dMax" data-v-2775696c=""></i> <i class="icon_cdr" data-v-2775696c=""></i> <i class="icon_c4d" data-v-2775696c=""></i> <i class="icon_blender" data-v-2775696c=""></i></span></div>

CSS代码

/*小工具副标题美化*/
.file-format {
  padding: 0 20px;
  height: 38px;
  background: linear-gradient(224deg, rgba(255, 110, 144, .08), rgba(208, 147, 255, .08) 42%, rgba(105, 105, 255, .08) 100%, rgba(105, 105, 255, .08) 0);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

span.txt-file-format {
  font-size: 13px;
  font-weight: 700;
  color: #424866;
  line-height: 18px;
  margin-right: 17px;
}

i.icon_ai[data-v-2775696c], i.icon_ps[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}
i.icon_ps[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-ps.svg) no-repeat 50% / 100%;
}

.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}

i.icon_ai[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-ai.svg) no-repeat 50% / 100%;
}

i.icon_sketch[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  background: url(https://www.macgf.com/img/icon-sketch.svg) no-repeat 50% / 100%;
  vertical-align: middle;
}

.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}

i.icon_3dMax[data-v-2775696c], i.icon_blender[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}
i.icon_3dMax[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-3dMax.svg) no-repeat 50% / 100%;
}

.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}

i.icon_c4d[data-v-2775696c], i.icon_cdr[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}
i.icon_cdr[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-cdr.svg) no-repeat 50% / 100%;
}

.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}

i.icon_c4d[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-c4d.svg) no-repeat 50% / 100%;
}

i.icon_blender[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-blender.svg) no-repeat 50% / 100%;
}
i.icon_3dMax[data-v-2775696c], i.icon_blender[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}
/*小工具副标题美化*/

第二个版本

小工具–自定义HTML–（首页-主内容上面）

记得把一下代码里面的这个地址替换成图片得地址，不然前端显示不出图片，https://www.macgf.com/img/index-new.svg

直接保存图片即可—上传后台的媒体库然后直接复制里面的链接

<div class="wapnone">
<div id="zuixinfabu" class="index-new"><img draggable="false" oncontextmenu="return false;" src="https://www.macgf.com/img/index-new.svg" alt="最新发布"><div class="file-format" data-v-2775696c=""><span id="index-xtips" class="txt-file-format" data-v-2775696c="">公告：按照用户要求，本站已取消频繁的通知提示</span><span class="typed-cursor typed-cursor--blink" aria-hidden="true"></span> <span class="file-format-icons" data-v-2775696c=""><i class="icon_ps" data-v-2775696c=""></i> <i class="icon_ai" data-v-2775696c=""></i> <i class="icon_sketch" data-v-2775696c=""></i> <i class="icon_3dMax" data-v-2775696c=""></i> <i class="icon_cdr" data-v-2775696c=""></i> <i class="icon_c4d" data-v-2775696c=""></i> <i class="icon_blender" data-v-2775696c=""></i></span></div></div>
</div>
<style>
  .absolute::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 58%;
    right: 0;
    bottom: 0;
    transform: scale(1.01);
    background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, var(--body-bg-color) 100%);
}


.file-format {
  padding: 0 20px;
  height: 38px;
  background: linear-gradient(224deg, rgba(255, 110, 144, .08), rgba(208, 147, 255, .08) 42%, rgba(105, 105, 255, .08) 100%, rgba(105, 105, 255, .08) 0);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

span.txt-file-format {
  font-size: 13px;
  font-weight: 700;
  color: var(--main-color);
  line-height: 18px;
  margin-right: 17px;
}

i.icon_ai[data-v-2775696c], i.icon_ps[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}
i.icon_ps[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-ps.svg) no-repeat 50% / 100%;
}

.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}

i.icon_ai[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-ai.svg) no-repeat 50% / 100%;
}

i.icon_sketch[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  background: url(https://www.macgf.com/img/icon-sketch.svg) no-repeat 50% / 100%;
  vertical-align: middle;
}

.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}

i.icon_3dMax[data-v-2775696c], i.icon_blender[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}
i.icon_3dMax[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-3dMax.svg) no-repeat 50% / 100%;
}

.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}

i.icon_c4d[data-v-2775696c], i.icon_cdr[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}
i.icon_cdr[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-cdr.svg) no-repeat 50% / 100%;
}

.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
  margin-right: 9px;
}

i.icon_c4d[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-c4d.svg) no-repeat 50% / 100%;
}

i.icon_blender[data-v-2775696c] {
  background: url(https://www.macgf.com/img/icon-blender.svg) no-repeat 50% / 100%;
}
i.icon_3dMax[data-v-2775696c], i.icon_blender[data-v-2775696c] {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
}


div#zuixinfabu {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.posts-item .item-heading>a {font-weight: bold;color: unset;}@media (max-width:640px) {
    .meta-right .meta-view{
      display: unset !important;
    }
  }

/*文字列表标题图片样式*/
.index-new img {
  height: 35px;
  padding-left: 10px
}
.index-new {
  margin-bottom: 5px;
}
/*文字列表标题图片样式结束*/
  /*手机端不显示CSS代码*/
@media screen and (max-width: 1221px) { .wapnone{display:none; }
      }
</style>

4、子比主题功能增强 – 文章列表标题自定义文字或图标前缀

本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！

THE END