子比主题美化教程WP美化集合

0609

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

美化说明:

美化教程（集合）

  • 一些老教程随机顺序，新教程排在最后，越往后越新。
  • ↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓
  • （最新版）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;}

效果图

图片[1]-子比主题美化教程WP美化集合-玖零笔记
/* 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>
<!--底部波浪结束-->

效果图:

图片[2]-子比主题美化教程WP美化集合-玖零笔记

将下面的函数代码加入到主题目录下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;
    }

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

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

article_time_update();//文章过期提示
图片[3]-子比主题美化教程WP美化集合-玖零笔记

CSS代码：（在自定义CSS样式添加下面代码）

/*过期文章提示样式*/
.article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}

效果图：

图片[4]-子比主题美化教程WP美化集合-玖零笔记

在后台—》外观—》小工具—》首页-底部全宽度，自定义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>

效果截图:

图片[5]-子比主题美化教程WP美化集合-玖零笔记

代码：

<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美化集合-玖零笔记

在主题设置—》自定义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;}
  • 说明：图片自己保存到本地，图片大小（162 X 75，建议透明的png图片）,自己添加喜欢的背景图片。
  • 效果：
图片[7]-子比主题美化教程WP美化集合-玖零笔记

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>
                <!--结束-->

添加说明（注意）：主题目录zibll/pages/download.php,在合适的位置添加上面的即可，大概是在115行位置添加（我的在115行添加，不知道新版有没有变化）。

效果:

图片[8]-子比主题美化教程WP美化集合-玖零笔记

把下面背景图代码放到主题下的css里面，我是子比主题就放到后台的css里面就可以了,把下面代码的图片链接改成你需要的背景图就行了。

如果不想用背景图，改背景色也可以，下面的背景色代码放入css里面颜色代码我就不多说了。

/*背景图*/
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;}

效果看本站首页就好了

如果用的子比主题：把代码复制粘贴到主题后台–>自定义代码–>自定义底部HTML代码

其它主题：把代码放到主题footer.php文件的在 <footer></footer> 之间添加两行代码

<div id="jsi-flying-fish-container"></div>
<script src="https://www.atbkw.cn/aotian/js/script.js"></script>

© 版权声明
版权声明
本站网络名称： 玖零笔记
本站永久网址： https://7490.cn
网站侵权说明： 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ1622383724删除处理。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
技术教程
# 教程# 子比主题# 美化# 浏览器# logo
喜欢就支持一下吧
点赞9 分享
玖零的头像-玖零笔记
Ypay源支付系统V6.9.9最新源码，支持易支付和码支付-玖零笔记
Ypay源支付系统V6.9.9最新源码，支持易支付和码支付
Ypay源支付系统V6.9.9最新源码，支持易支付和码支付
1年前 349
源支付ypay系统v7稳定最新免授权源码-玖零笔记
源支付ypay系统v7稳定最新免授权源码
源支付ypay系统v7稳定最新免授权源码
1年前 208
源支付V7最/新版开源！码支付！免签聚合免签系统v免签易支付-玖零笔记
源支付V7最/新版开源！码支付！免签聚合免签系统v免签易支付
源支付V7最/新版开源！码支付！免签聚合免签系统v免签易支付
7个月前 199
亲测|活码管理平台系统源码-支持群活码、淘宝客、分享卡片、短网址等-玖零笔记
亲测|活码管理平台系统源码-支持群活码、淘宝客、分享卡片、短网址等
亲测|活码管理平台系统源码-支持群活码、淘宝客、分享卡片、短网址等
1年前 137
小旋风蜘蛛池Pro2.0源码-玖零笔记
小旋风蜘蛛池Pro2.0源码
小旋风蜘蛛池Pro2.0源码
1年前 131
小狐狸GPT付费AI创作系统v2.04 PC+H5+小程序端-玖零笔记
小狐狸GPT付费AI创作系统v2.04 PC+H5+小程序端
小狐狸GPT付费AI创作系统v2.04 PC+H5+小程序端
1年前 128
相关推荐
给子比主题个人中心和用户页头部添加ID展示和注册时间美化-玖零笔记
给子比主题个人中心和用户页头部添加ID展示和注册时间美化
给子比主题个人中心和用户页头部添加ID展示和注册时间美化
9个月前 96
狐狸库自定义底部样式【子比美化】-玖零笔记
狐狸库自定义底部样式【子比美化】
狐狸库自定义底部样式【子比美化】
1年前 84
子比主题添加一个友情链接检测模块-玖零笔记
子比主题添加一个友情链接检测模块
子比主题添加一个友情链接检测模块
9个月前 83
子比主题-友链检测-玖零笔记
子比主题-友链检测
子比主题-友链检测
1年前 80
WordPress某源码站带数据整站打包下载4G数据-玖零笔记
WordPress某源码站带数据整站打包下载4G数据
WordPress某源码站带数据整站打包下载4G数据
1年前 75
恶意软件沙箱自动分析项目，配置/Payload/行为等详细技术分析：CAPE-玖零笔记
恶意软件沙箱自动分析项目，配置/Payload/行为等详细技术分析：CAPE
恶意软件沙箱自动分析项目，配置/Payload/行为等详细技术分析：CAPE
1年前 75
评论 抢沙发

请登录后发表评论

    暂无评论内容

搜索
开启精彩搜索
用户封面
玖零的头像-玖零笔记
源支付V7最/新版开源！码支付！免签聚合免签系统v免签易支付
CSS选中文字改变文字+背景色效果
最简单提高WordPress网站速度和性能的方法
SynergiaNet团队官网程序-新品发布啦
300条颓废悲伤文案
104条扎心文案
Ypay源支付系统V6.9.9最新源码，支持易支付和码支付-玖零笔记
349人已阅读
Ypay源支付系统V6.9.9最新源码，支持易支付和码支付
TOP1
源支付ypay系统v7稳定最新免授权源码-玖零笔记
源支付ypay系统v7稳定最新免授权源码
1年前208人已阅读
TOP2
源支付V7最/新版开源！码支付！免签聚合免签系统v免签易支付-玖零笔记
源支付V7最/新版开源！码支付！免签聚合免签系统v免签易支付
7个月前199人已阅读
TOP3
亲测|活码管理平台系统源码-支持群活码、淘宝客、分享卡片、短网址等-玖零笔记
亲测|活码管理平台系统源码-支持群活码、淘宝客、分享卡片、短网址等
1年前137人已阅读
TOP4
小旋风蜘蛛池Pro2.0源码-玖零笔记
小旋风蜘蛛池Pro2.0源码
1年前131人已阅读
TOP5
小狐狸GPT付费AI创作系统v2.04 PC+H5+小程序端-玖零笔记
小狐狸GPT付费AI创作系统v2.04 PC+H5+小程序端
1年前128人已阅读
TOP6
标签云
黑客自媒体自动秒收录腾讯聚合登录美化红警2共和国之辉红警码支付短视频源码源支付浏览器桌面宠物文案教程插件挂载拟态UI开源