详情
评论
问答

子比主题美化教程WP美化集合【已更新8.5】

18010.7W+1702
智能总结摘要
AI助理
生成中...

文章最后更新时间：2025-02-23 06:56:27

本文章只是个人无聊时的对子比主题美化记录集合，同时也是本人的备忘录。若您觉得可以的话就拿去贵站使用吧，我会不定期（主要是想不到好的美化了）更新一些美化教程、好玩的小工具、页面等等。

美化说明：

美化教程（集合）

  • 一些老教程随机顺序，新教程排在最后，越往后越新。
  • ↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓
  • （最新版）CSS代码添加到后台子比主题设置—>自定义代码—>自定义CSS样式
  • （最新版）JS即javascript代码添加到后台子比主题设置—>自定义代码—>自定义javascript代码
  • （最新版）没有特殊说明的小工具，自定义HTML小工具添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去，保存即可。
  • ↑↑↑↑↑↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑↑↑↑↑
  • 其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我可能不重复告知了，请注意看上面的方法。
  • 有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面。
  • CSS代码：
/点击更多/
.theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a{border-radius: 30px; padding: 15px 150px; color: var(--muted-color); background-color:var(--main-bg-color);color: #FF0033;display: block;opacity: 1;font-weight:bold;}
/点击更多/
.theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a{border-radius: 30px; padding: 15px 150px; color: var(--muted-color); background-color:var(--main-bg-color);color: #FF0033;display: block;opacity: 1;font-weight:bold;}
/点击更多/
.theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a{border-radius: 30px; padding: 15px 150px; color: var(--muted-color); background-color:var(--main-bg-color);color: #FF0033;display: block;opacity: 1;font-weight:bold;}
  • 截图
图片[1]-子比主题美化教程WP美化集合【已更新8.5】-轩逸博客

/* logo扫光 */
.navbar-brand{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扫光 */
.navbar-brand{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扫光 */
.navbar-brand{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处。

在zibll主题目录下，footer.php文件中的“</footer>”（重要）下面添加下面的代码：

<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->
<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->
<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->
  • 效果
图片[2]-子比主题美化教程WP美化集合【已更新8.5】-轩逸博客
  • 将下面的函数代码加入到主题目录下functions.php文件中。
//文章过期提示
function article_time_update() {
    date_default_timezone_set('PRC');
    $newdate=time();
    $updated_date = get_the_modified_time('Y-m-d H:i:s');
    $updatetime=strtotime($updated_date);
    $custom_content = '';
    if ( $newdate > $updatetime+86400) {
    $custom_content= '<div class="article-timeout"><strong><i class="fa fa-bell" aria-hidden="true"></i> 温馨提示：</strong>本文最后更新于<code>'. $updated_date . '</code>，某些文章具有时效性，若有错误或已失效，请在下方<a href="#comment">留言</a>或联系<a target="_blank" title="轩逸博客" href="http://wpa.qq.com/msgrd?v=3&uin=1649825180&site=qq&menu=yes"><b>轩逸站长</b></a>。</div >';
    }
        echo $custom_content;
    }
//文章过期提示
function article_time_update() {
    date_default_timezone_set('PRC');
    $newdate=time();
    $updated_date = get_the_modified_time('Y-m-d H:i:s');
    $updatetime=strtotime($updated_date);
    $custom_content = '';
    if ( $newdate > $updatetime+86400) {
    $custom_content= '<div class="article-timeout"><strong><i class="fa fa-bell" aria-hidden="true"></i> 温馨提示：</strong>本文最后更新于<code>'. $updated_date . '</code>，某些文章具有时效性，若有错误或已失效，请在下方<a href="#comment">留言</a>或联系<a target="_blank" title="轩逸博客" href="http://wpa.qq.com/msgrd?v=3&uin=1649825180&site=qq&menu=yes"><b>轩逸站长</b></a>。</div >';
    }
        echo $custom_content;
    }
//文章过期提示
function article_time_update() {
    date_default_timezone_set('PRC');
    $newdate=time();
    $updated_date = get_the_modified_time('Y-m-d H:i:s');
    $updatetime=strtotime($updated_date);
    $custom_content = '';
    if ( $newdate > $updatetime+86400) {
    $custom_content= '<div class="article-timeout"><strong><i class="fa fa-bell" aria-hidden="true"></i> 温馨提示：</strong>本文最后更新于<code>'. $updated_date . '</code>，某些文章具有时效性，若有错误或已失效，请在下方<a href="#comment">留言</a>或联系<a target="_blank" title="轩逸博客" href="http://wpa.qq.com/msgrd?v=3&uin=1649825180&site=qq&menu=yes"><b>轩逸站长</b></a>。</div >';
    }
        echo $custom_content;
    }

说明：请自己修改上面有关于本站的信息，改成自己网站信息即可，图标可以用阿里矢量图。

在主题目录zibll/inc/functions/zib-single.php文件中，文章分页函数（子比主题V6.1版本（主题更新有可能会有变动）大概是296回车一行代码放在297行，见下图）下面添加下方代码即可。

article_time_update();//文章过期提示
article_time_update();//文章过期提示
article_time_update();//文章过期提示
图片[3]-子比主题美化教程WP美化集合【已更新8.5】-轩逸博客
  • CSS代码：（在自定义CSS样式添加下面代码）
/*过期文章提示样式*/
.article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}
/*过期文章提示样式*/
.article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}
/*过期文章提示样式*/
.article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}
  • 效果图：
图片[4]-子比主题美化教程WP美化集合【已更新8.5】-轩逸博客
  • 在后台—》外观—》小工具—》首页-底部全宽度，自定义HTML添加下面代码即可。
<div id="ijinse" style="box-shadow: 0 0 10px var(--main-shadow);">
<section class="buy-container">
  <div class="buy-box">
    <div class="slogan">
      <h3>轩逸博客</h3>
      <p>锦瑟无端五十弦  一弦一柱思华年</p>
    </div>
    <ul class="actions">
      <li>
        <a href="https://img.buerds.com" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a>
      </li>
      <li>
        <a href="https:/xuanyiidc.cn/youqing/j" target="_blank" class="demo-button" rel="noopener noreferrer">友链通道</a>
      </li>
    </ul>
  </div>
  <span class="tips"><div id="go-fav">更多精彩文章，按<span>Ctrl</span>+<span>D</span>收藏本站！</div></span>
  </section>
  </div>
<style type="text/css">
.buy-container{color: #ccc; padding: 60px 40px 50px 40px;margin: 0 auto; /*background: rgb(224,32,140); */background: linear-gradient(to right, rgb(103,58,183) 0%, rgb(233,30,99) 100%);border-radius: var(--main-radius);}.buy-container .buy-box{display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 900px; margin: 0 auto;}@media screen and (max-width: 700px){.buy-container .buy-box{display: block; text-align: center;}.buy-container .buy-box .slogan{margin-bottom: 30px;}}.buy-container .buy-box .slogan h3{color: #fff;font-size: 26px;margin: 0 0 10px 0;}@media screen and (max-width: 800px){.buy-container .buy-box .slogan h3{font-size: 24px;}}@media screen and (max-width: 500px){.buy-container .buy-box .slogan h3{font-size: 20px;}}@media screen and (max-width: 400px){.buy-container .buy-box .slogan h3{font-size: 18px;}}.buy-container .buy-box .slogan p{color: #fff;font-size: 14px;font-weight: bold;margin: 10px 0;}.buy-container .buy-box .actions{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;list-style-type: none;margin: 0;padding: 0;}@media screen and (max-width: 700px){.buy-container .buy-box .actions{-webkit-box-pack: justify; justify-content: center;}}.buy-container .buy-box .actions li{margin: 0;}.buy-container .buy-box .actions li:last-child{margin-left: 10px;}.buy-container .buy-box .actions li a{position: relative;color: #fff !important;font-size: 14px;font-weight: bold; line-height: 1;text-decoration: none;padding: 10px 20px;background-color: rgba(255, 255, 255, .1);-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-webkit-transition: .2s;-moz-transition: .2s;-o-transition: .2s;transition: .2s;}.buy-container .buy-box .actions li a:hover{-webkit-transform: translateY(-2px);-moz-transform: translateY(-2px);-o-transform: translateY(-2px);transform: translateY(-2px); -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);opacity: 1 !important;}@media screen and (max-width: 330px){.buy-container .buy-box .actions li a{font-size: 12px;}}.buy-container .buy-box .actions li a:not(.primary):before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-box-shadow: inset 0 0 0 1px currentColor;-moz-box-shadow: inset 0 0 0 1px currentColor;-o-box-shadow: inset 0 0 0 1px currentColor;box-shadow: inset 0 0 0 1px currentColor;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-khtml-opacity: .3;-moz-opacity: .3;opacity: .3;}.buy-container .buy-box .actions li a:after{display: none;}.buy-container .buy-box .actions li a.primary{color: #ff3b30 !important;background-color: #fff;}.buy-container .tips{border-top: 1px solid rgba(255, 255, 255, .1);display: block;color: #fff;font-size: 12px;text-align: center; max-width: 900px;margin: 30px auto 0 auto;padding-top: 30px;}@media screen and (max-width: 768px){.buy-container {padding: 30px 40px 30px 40px;}}#go-fav{width:100%; height:100%; line-height:30px; text-align:center; font-size:14px; font-weight:700; color:rgba(255, 255, 255, 1);}#go-fav span{padding:5px 10px; background:#f0e7e2; border-radius:8px; color:#202020; margin:0 5px;}
</style>
<script>
document.getElementById("ijinse").parentNode.parentNode.style.padding=0;
</script>
<div id="ijinse" style="box-shadow: 0 0 10px var(--main-shadow);">
<section class="buy-container">
  <div class="buy-box">
    <div class="slogan">
      <h3>轩逸博客</h3>
      <p>锦瑟无端五十弦  一弦一柱思华年</p>
    </div>
    <ul class="actions">
      <li>
        <a href="https://img.buerds.com" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a>
      </li>
      <li>
        <a href="https:/xuanyiidc.cn/youqing/j" target="_blank" class="demo-button" rel="noopener noreferrer">友链通道</a>
      </li>
    </ul>
  </div>
  <span class="tips"><div id="go-fav">更多精彩文章，按<span>Ctrl</span>+<span>D</span>收藏本站！</div></span>
  </section>
  </div>
<style type="text/css">
.buy-container{color: #ccc; padding: 60px 40px 50px 40px;margin: 0 auto; /*background: rgb(224,32,140); */background: linear-gradient(to right, rgb(103,58,183) 0%, rgb(233,30,99) 100%);border-radius: var(--main-radius);}.buy-container .buy-box{display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 900px; margin: 0 auto;}@media screen and (max-width: 700px){.buy-container .buy-box{display: block; text-align: center;}.buy-container .buy-box .slogan{margin-bottom: 30px;}}.buy-container .buy-box .slogan h3{color: #fff;font-size: 26px;margin: 0 0 10px 0;}@media screen and (max-width: 800px){.buy-container .buy-box .slogan h3{font-size: 24px;}}@media screen and (max-width: 500px){.buy-container .buy-box .slogan h3{font-size: 20px;}}@media screen and (max-width: 400px){.buy-container .buy-box .slogan h3{font-size: 18px;}}.buy-container .buy-box .slogan p{color: #fff;font-size: 14px;font-weight: bold;margin: 10px 0;}.buy-container .buy-box .actions{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;list-style-type: none;margin: 0;padding: 0;}@media screen and (max-width: 700px){.buy-container .buy-box .actions{-webkit-box-pack: justify; justify-content: center;}}.buy-container .buy-box .actions li{margin: 0;}.buy-container .buy-box .actions li:last-child{margin-left: 10px;}.buy-container .buy-box .actions li a{position: relative;color: #fff !important;font-size: 14px;font-weight: bold; line-height: 1;text-decoration: none;padding: 10px 20px;background-color: rgba(255, 255, 255, .1);-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-webkit-transition: .2s;-moz-transition: .2s;-o-transition: .2s;transition: .2s;}.buy-container .buy-box .actions li a:hover{-webkit-transform: translateY(-2px);-moz-transform: translateY(-2px);-o-transform: translateY(-2px);transform: translateY(-2px); -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);opacity: 1 !important;}@media screen and (max-width: 330px){.buy-container .buy-box .actions li a{font-size: 12px;}}.buy-container .buy-box .actions li a:not(.primary):before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-box-shadow: inset 0 0 0 1px currentColor;-moz-box-shadow: inset 0 0 0 1px currentColor;-o-box-shadow: inset 0 0 0 1px currentColor;box-shadow: inset 0 0 0 1px currentColor;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-khtml-opacity: .3;-moz-opacity: .3;opacity: .3;}.buy-container .buy-box .actions li a:after{display: none;}.buy-container .buy-box .actions li a.primary{color: #ff3b30 !important;background-color: #fff;}.buy-container .tips{border-top: 1px solid rgba(255, 255, 255, .1);display: block;color: #fff;font-size: 12px;text-align: center; max-width: 900px;margin: 30px auto 0 auto;padding-top: 30px;}@media screen and (max-width: 768px){.buy-container {padding: 30px 40px 30px 40px;}}#go-fav{width:100%; height:100%; line-height:30px; text-align:center; font-size:14px; font-weight:700; color:rgba(255, 255, 255, 1);}#go-fav span{padding:5px 10px; background:#f0e7e2; border-radius:8px; color:#202020; margin:0 5px;}
</style>
<script>
document.getElementById("ijinse").parentNode.parentNode.style.padding=0;
</script>
<div id="ijinse" style="box-shadow: 0 0 10px var(--main-shadow);">
<section class="buy-container">
  <div class="buy-box">
    <div class="slogan">
      <h3>轩逸博客</h3>
      <p>锦瑟无端五十弦  一弦一柱思华年</p>
    </div>
    <ul class="actions">
      <li>
        <a href="https://img.buerds.com" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a>
      </li>
      <li>
        <a href="https:/xuanyiidc.cn/youqing/j" target="_blank" class="demo-button" rel="noopener noreferrer">友链通道</a>
      </li>
    </ul>
  </div>
  <span class="tips"><div id="go-fav">更多精彩文章，按<span>Ctrl</span>+<span>D</span>收藏本站！</div></span>
  </section>
  </div>
<style type="text/css">
.buy-container{color: #ccc; padding: 60px 40px 50px 40px;margin: 0 auto; /*background: rgb(224,32,140); */background: linear-gradient(to right, rgb(103,58,183) 0%, rgb(233,30,99) 100%);border-radius: var(--main-radius);}.buy-container .buy-box{display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 900px; margin: 0 auto;}@media screen and (max-width: 700px){.buy-container .buy-box{display: block; text-align: center;}.buy-container .buy-box .slogan{margin-bottom: 30px;}}.buy-container .buy-box .slogan h3{color: #fff;font-size: 26px;margin: 0 0 10px 0;}@media screen and (max-width: 800px){.buy-container .buy-box .slogan h3{font-size: 24px;}}@media screen and (max-width: 500px){.buy-container .buy-box .slogan h3{font-size: 20px;}}@media screen and (max-width: 400px){.buy-container .buy-box .slogan h3{font-size: 18px;}}.buy-container .buy-box .slogan p{color: #fff;font-size: 14px;font-weight: bold;margin: 10px 0;}.buy-container .buy-box .actions{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;list-style-type: none;margin: 0;padding: 0;}@media screen and (max-width: 700px){.buy-container .buy-box .actions{-webkit-box-pack: justify; justify-content: center;}}.buy-container .buy-box .actions li{margin: 0;}.buy-container .buy-box .actions li:last-child{margin-left: 10px;}.buy-container .buy-box .actions li a{position: relative;color: #fff !important;font-size: 14px;font-weight: bold; line-height: 1;text-decoration: none;padding: 10px 20px;background-color: rgba(255, 255, 255, .1);-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-webkit-transition: .2s;-moz-transition: .2s;-o-transition: .2s;transition: .2s;}.buy-container .buy-box .actions li a:hover{-webkit-transform: translateY(-2px);-moz-transform: translateY(-2px);-o-transform: translateY(-2px);transform: translateY(-2px); -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);opacity: 1 !important;}@media screen and (max-width: 330px){.buy-container .buy-box .actions li a{font-size: 12px;}}.buy-container .buy-box .actions li a:not(.primary):before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-box-shadow: inset 0 0 0 1px currentColor;-moz-box-shadow: inset 0 0 0 1px currentColor;-o-box-shadow: inset 0 0 0 1px currentColor;box-shadow: inset 0 0 0 1px currentColor;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-khtml-opacity: .3;-moz-opacity: .3;opacity: .3;}.buy-container .buy-box .actions li a:after{display: none;}.buy-container .buy-box .actions li a.primary{color: #ff3b30 !important;background-color: #fff;}.buy-container .tips{border-top: 1px solid rgba(255, 255, 255, .1);display: block;color: #fff;font-size: 12px;text-align: center; max-width: 900px;margin: 30px auto 0 auto;padding-top: 30px;}@media screen and (max-width: 768px){.buy-container {padding: 30px 40px 30px 40px;}}#go-fav{width:100%; height:100%; line-height:30px; text-align:center; font-size:14px; font-weight:700; color:rgba(255, 255, 255, 1);}#go-fav span{padding:5px 10px; background:#f0e7e2; border-radius:8px; color:#202020; margin:0 5px;}
</style>
<script>
document.getElementById("ijinse").parentNode.parentNode.style.padding=0;
</script>
  • 效果截图:
图片[5]-子比主题美化教程WP美化集合【已更新8.5】-轩逸博客
  • 代码：
<div id="wiiuii1">
  <img src="https://www.wiiuii.cn/api/ip-label" class="post-cover-img-more ls-is-cached lazyloaded" data-src="https://www.wiiuii.cn/api/ip-label" alt="no pic now" style="/*border-radius:5px;*/border-radius: var(--main-radius);box-shadow: 0 0 10px var(--main-shadow);"><script>document.getElementById("wiiuii1").parentNode.parentNode.style.padding=0;</script></div>
<div id="wiiuii1">
  <img src="https://www.wiiuii.cn/api/ip-label" class="post-cover-img-more ls-is-cached lazyloaded" data-src="https://www.wiiuii.cn/api/ip-label" alt="no pic now" style="/*border-radius:5px;*/border-radius: var(--main-radius);box-shadow: 0 0 10px var(--main-shadow);"><script>document.getElementById("wiiuii1").parentNode.parentNode.style.padding=0;</script></div>
<div id="wiiuii1">
  <img src="https://www.wiiuii.cn/api/ip-label" class="post-cover-img-more ls-is-cached lazyloaded" data-src="https://www.wiiuii.cn/api/ip-label" alt="no pic now" style="/*border-radius:5px;*/border-radius: var(--main-radius);box-shadow: 0 0 10px var(--main-shadow);"><script>document.getElementById("wiiuii1").parentNode.parentNode.style.padding=0;</script></div>
  • 效果：
图片[6]-子比主题美化教程WP美化集合【已更新8.5】-轩逸博客
  • 在主题设置—》自定义CSS样式，添加下面的CSS代码：
/*评论背景图*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://www.atbkw.cn/wp-content/uploads/aotian/qita/pinglu.png) 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;}
/*评论背景图*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://www.atbkw.cn/wp-content/uploads/aotian/qita/pinglu.png) 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;}
/*评论背景图*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://www.atbkw.cn/wp-content/uploads/aotian/qita/pinglu.png) 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图片）,自己添加喜欢的背景图片。
  • 效果：
图片[7]-子比主题美化教程WP美化集合【已更新8.5】-轩逸博客
  • HTML代码
          <!--开始-->
                <style>
                .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}
                .panel:hover{border: 1px solid #FF6666;}/*框颜色背景色*/
                .panel{margin-bottom: 10px; background-color: #fff; border: 1px solid #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);}
                .panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/
                .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;}
                .panel-body .help li{line-height:25px;font-size:14px;color: #000;}
                .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;}
                .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;}
                </style>
                <div class="panel">
                     <div class="panel-heading">
                          <h3>下载说明</h3>
                     </div>
                     <div class="panel-body">
                      <ul class="help">
                        <li>1.轩逸博客网所提供的压缩包若无特别说明，解压密码均为<em>改自己的</em></em>;</li>
                        <li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li>
                      <li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li>
                      <li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便傲天博客网及时进行更新;</li>
                      <li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li>
                      </ul>
                     </div>
                     </div>
                     <div class="panel">
                     <div class="panel-heading">
                       <h3>站长声明</h3>
                     </div>
                     <div class="panel-body">
                      <span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span>
                     </div>
                    </div>
                <!--结束-->
          <!--开始-->
                <style>
                .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}
                .panel:hover{border: 1px solid #FF6666;}/*框颜色背景色*/
                .panel{margin-bottom: 10px; background-color: #fff; border: 1px solid #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);}
                .panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/
                .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;}
                .panel-body .help li{line-height:25px;font-size:14px;color: #000;}
                .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;}
                .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;}
                </style>
                <div class="panel">
                     <div class="panel-heading">
                          <h3>下载说明</h3>
                     </div>
                     <div class="panel-body">
                      <ul class="help">
                        <li>1.轩逸博客网所提供的压缩包若无特别说明，解压密码均为<em>改自己的</em></em>;</li>
                        <li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li>
                      <li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li>
                      <li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便傲天博客网及时进行更新;</li>
                      <li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li>
                      </ul>
                     </div>
                     </div>
                     <div class="panel">
                     <div class="panel-heading">
                       <h3>站长声明</h3>
                     </div>
                     <div class="panel-body">
                      <span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span>
                     </div>
                    </div>
                <!--结束-->
          <!--开始-->
                <style>
                .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}
                .panel:hover{border: 1px solid #FF6666;}/*框颜色背景色*/
                .panel{margin-bottom: 10px; background-color: #fff; border: 1px solid #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);}
                .panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/
                .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;}
                .panel-body .help li{line-height:25px;font-size:14px;color: #000;}
                .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;}
                .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;}
                </style>
                <div class="panel">
                     <div class="panel-heading">
                          <h3>下载说明</h3>
                     </div>
                     <div class="panel-body">
                      <ul class="help">
                        <li>1.轩逸博客网所提供的压缩包若无特别说明，解压密码均为<em>改自己的</em></em>;</li>
                        <li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li>
                      <li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li>
                      <li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便傲天博客网及时进行更新;</li>
                      <li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li>
                      </ul>
                     </div>
                     </div>
                     <div class="panel">
                     <div class="panel-heading">
                       <h3>站长声明</h3>
                     </div>
                     <div class="panel-body">
                      <span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span>
                     </div>
                    </div>
                <!--结束-->
  • 添加说明（注意）：主题目录zibll/pages/download.php,在合适的位置添加上面的即可，大概是在115行位置添加（我的在115行添加，不知道新版有没有变化）。
  • 效果:

看本站下载页面

  • 把下面背景图代码放到主题下的css里面，我是子比主题就放到后台的css里面就可以了,把下面代码的图片链接改成你需要的背景图就行了。
  • 如果不想用背景图，改背景色也可以，下面的背景色代码放入css里面颜色代码我就不多说了。
/*背景图*/
body {background: var(--body-bg-color);} :root{--body-bg-color:url(https://图片链接/) top fixed;}
/*背景图*/
body {background: var(--body-bg-color);} :root{--body-bg-color:url(https://图片链接/) top fixed;}
/*背景图*/
body {background: var(--body-bg-color);} :root{--body-bg-color:url(https://图片链接/) top fixed;}
/*背景色*/body {background: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%); background-color: #FFDEE9;}
/*背景色*/body {background: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%); background-color: #FFDEE9;}
/*背景色*/body {background: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%); background-color: #FFDEE9;}

效果看本站首页就好了

  • 如果用的子比主题：把代码复制粘贴到主题后台–>自定义代码–>自定义底部HTML代码
  • 其它主题：把代码放到主题footer.php文件的在 <footer></footer> 之间添加两行代码
<div id="jsi-flying-fish-container"></div>
<script src="https://www.atbkw.cn/aotian/js/script.js"></script>
<div id="jsi-flying-fish-container"></div>
<script src="https://www.atbkw.cn/aotian/js/script.js"></script>
<div id="jsi-flying-fish-container"></div>
<script src="https://www.atbkw.cn/aotian/js/script.js"></script>

1 2 3 4

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

供学习和研究使用，请在下载后24小时内删除
购买前可以联系作者确认资源信息，防止交易矛盾
展开阅读全文
Life must be lived with love, happiness, and dreams.
人生一定要有爱，有快乐，有梦想
一月 14

本站历史上的今天
THE END
子比美化技术分享教程网站建设
# 子比美化# 教程# WordPress美化# wp美化# WordPress# 免费# 子比主题# wordpress主题# WordPress教程# ico# 美化教程# 悬浮按钮栏美化# 评论区# 夸夸功能# 新通知# 弹窗样式# 发布ICON图标# 已更新
喜欢就支持一下吧
点赞1702发电 分享
相关推荐
评论 共180条

请登录后发表评论

    查看全部
    • 轩逸的头像-轩逸博客钻石菁英轩逸徽章-𝟚𝟘𝟚𝟝蛇年快乐-轩逸博客等级-LV10-轩逸博客作者0
      是不是就算解散已经近在眼前，一起演出时还是能找回过去的感觉呢？
      3年前
      蜡笔小新00001
用户封面
轩逸的头像-轩逸博客钻石菁英
情侣飞行棋真心话大冒险情侣情趣骰子php 版本
给网站加上不同时间段的温馨问候语
2025派小星DNS二级域名分发系统免费公测1.0.8版本
YPay标准版全开源代码– V1.8.1
子比主题-文章顶部信息4.0（插件版）
叮当猫wx云无限提卡后台dd

216.73.216.0

"想做一件任何人都可以做的事情"
文章目录
子比主题美化教程WP美化集合-轩逸博客

子比主题美化教程WP美化集合【已更新8.5】

Zibll主题抽奖插件-轩逸博客

Zibll主题抽奖插件【最新2.6.6】

简洁网址发布页面-轩逸博客

简洁网址发布页面

文章列表右上角添加文章置顶+新文章发布ICON图标-轩逸博客

文章列表右上角添加文章置顶+新文章发布ICON图标【子比教程】

子比主题右侧悬浮按钮栏美化-轩逸博客

子比主题右侧悬浮按钮栏美化【已更新】

本站一样的弹窗样式-轩逸博客

本站一样的弹窗样式【子比教程】

宝塔面板7.9最新企业板免授权无后门-轩逸博客

宝塔面板7.9最新企业板免授权无后门【推荐】

子比主题美化插件-轩逸博客

子比主题美化插件【推荐】