zibll美化教程(2023-7-18更新)

本内容是对子比主题美化记录集合,若您觉得可以的话就拿去贵站使用吧,会不定期更新。若有好的功能您可以前来投稿本站。

一些老教程随机顺序,新教程排在最后,越往后越新。

↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓

(最新版)CSS代码添加到后台子比主题设置—>自定义代码—>自定义CSS样式

(最新版)JS即javascript代码添加到后台子比主题设置—>自定义代码—>自定义javascript代码

(最新版)没有特殊说明的小工具,自定义HTML小工具添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去,保存即可。

↑↑↑↑↑↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑↑↑↑↑

其他添加方式的,我会在教程里告知,若只需添加CSS+JS的教程,我可能不重复告知了,请注意看上面的方法。

有些美化教程本站已经发布的,本文章将不再进行编写教程,直接跳转到文章页面。

网站底部波浪

在zibll主题目录下,footer.php文件中的“</footer>”(重要)下面添加下面的代码:

下载页面添加声明或说明
网站底部—灵动的鱼群跳跃

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

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

网站黑白教程

这个代码适合用于纪念重大的沉重事件日子,只需把代码复制粘贴到自定义CSS样式里即可。

添加鼠标样式

这个是一个小功能,也是为了留个备忘录,担心下次搬家这个给忘了

添加方法: 后台设置—>外观—>小工具—>添加 Zibll 链接列表(新版),加到标题右侧按钮即可

代码:

友情链接右侧申请按钮动态美化

这个是一个小功能,也是为了留个备忘录,担心下次搬家这个给忘了

添加方法: 后台设置—>外观—>小工具—>添加 Zibll 链接列表(新版),加到标题右侧按钮即可

代码

添加底部统计信息模块小工具

本站使用的版本,PHP代码自己看文章里面的,图标是阿里巴巴矢量图库,自己弄图标,然后修改<li>标签里面的代码即可,背景图片自己修改或者下载到本地:

图片[1]-资源网zibll美化教程(2023-7-18更新)-资源网宁速云博客
<!--信息统计开始-->
<div id="nuandao" style="box-shadow: 0 0 10px var(--main-shadow);">
    <div class="siteCount">
      <div class="wrapper">
        <div class="p-wh">
        <ul>
          <li>
            <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconyonghu"></use></svg></p>
            <span><script type="text/javascript" >
document.write(tj_jstext);
</script></span>
            <p>星友总数</p>
          </li>
          <li>
            <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconwenzhang"></use></svg></p>
            <span><script type="text/javascript" >
document.write(tj_rzzs);
</script></span>
            <p>文章总数</p>
          </li>
          <li>
            <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconliulanjilu"></use></svg></p>
            <span><script type="text/javascript" >
document.write(tj_view);
</script></span>
            <p>浏览总数</p>
          </li>
          <li>
            <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconfabu"></use></svg></p>
            <span></span>
            <span><script type="text/javascript" >
document.write(tj_24h);
</script></span>
            <p>今日发布</p>
          </li>
          <li>
            <p><svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#iconyunhangzhengchang"></use></svg></p>
            <span><script type="text/javascript" >
document.write(tj_wdyx);
</script></span>
            <p>稳定运行</p>
          </li>
        </ul>
        </div>
        <div class="join">
          <p style="text-align:center">欢迎光临星语的小木屋,快速获取优质IT资源吧!<br><br>By:星语社长</p>
        </div>
      </div>
    </div>
  </div>
<style type="text/css">
/*背景图*/#nuandao .siteCount{position: relative; padding: 60px 0; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(https://img.wiiuii.cn/tuapi/024.jpg) center center / cover no-repeat fixed;/*border-radius:8px;*/border-radius: var(--main-radius);}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}
  /*内容*/#nuandao .siteCount .wrapper{position: relative; z-index: 10; width: 100%; max-width: 100%; margin: 0 auto;}#nuandao .siteCount ul{display: flex;}#nuandao .siteCount ul li{width: 20%; color: #fff; text-align: center;}
  /*模块*/#nuandao .siteCount ul li span{font-size: 48px; font-family: Arial;}@media screen and (max-width: 768px){#nuandao .siteCount ul li span{font-size: 20px; font-family: Arial;}}#nuandao .p-wh{font-weight:700;}
  /*底部文本p标签*/.join{padding-top: 20px;font-size: 15px;color: #FFF;letter-spacing: 0.5px;font-weight: 600;}
  @media screen and (max-width: 768px){#nuandao .siteCount{position: relative; padding: 30px 0;border-radius:8px;}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}}
 </style>
<script>
//document.getElementById("nuandao").parentNode.parentNode.style.backgroundColor="transparent"
document.getElementById("nuandao").parentNode.parentNode.style.padding=0
</script>
<!--信息统计结束-->
底部炫酷引导卡片小工具

在后台—》外观—》小工具—》首页-底部全宽度,自定义HTML添加下面代码即可。

<div id="wiiuii" 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="http://wpa.qq.com/msgrd?v=3&uin=1431258805&site=qq&menu=yes" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a>
      </li>
      <li>
        <a href="https://www.wiiuii.cn/links" 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: -moz-linear-gradient(left, rgb(160,32,240) 0%, rgb(0,191,255) 100%);background: -webkit-linear-gradient(left, rgb(160,32,240) 0%,rgb(0,191,255) 100%); /*请更改此行代码,颜色为rgb模式*/background: linear-gradient(to right, rgb(160,32,240) 0%, rgb(0,191,255) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0208c', endColorstr='#fa6400',GradientType=1 );/*-webkit-border-radius: 8px;-moz-border-radius: 8px;-o-border-radius: 8px;border-radius: 8px;*/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("wiiuii").parentNode.parentNode.style.padding=0;
</script>
子比主题下载页面美化(简单的美化)

说明:

这是简单的改动一下代码,添加了几个类,如果作者更新主题时下载页面没改动代码的话,更新主题后【复制粘贴代码】进去就能用!(更新前记得备份!记得备份!记得备份!不然就被刷新代码了)

代码:(一些说明请仔细看)

CSS代码:(放在哪,这里就不在说了,自己可以压缩一下CSS代码)

/*下载样式*/
.download-article{
    padding: 0 10px;
}
.download-demo{
   margin: 10px 0;
  border: 1px dashed red;
    border-radius: 5px;
}
.download-wiui{
  padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.download-sty{
      text-align: center;
    height: 100%;
}
.download-sty p{
    font-size: 15px !important;
    text-align: center;
    margin: 0;
}
.download-sty img{
width: 140px;
    height: 100%;
}
.download-theme-box{
    margin-bottom: 20px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}
.download-right{
margin-left: 20px;
}

.download-file-name{
    font-size: 20px;
}
左侧菜单添加背景图片(手机才能看)
/*手机侧边栏背景图片*/
@media (max-width: 767px){
.mobile-navbar.show,.mobile-navbar.left{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
  background-image:linear-gradient(rgba(255, 255,255,0),rgba(255,255,255, 0.3)),url(https://img.wiiuii.cn/img/20200829145305_5a9ac.jpg);}
  .mobile-nav-widget .box-body {
    background: var(--muted-border-color) !important;}
}
修改外跳链接代码

打开主题文件夹找到go.php把下面的代码复制进去就可以

<?php
/*
 * @Author        : Qinver
 * @Url           : zibll.com
 * @Date          : 2020-09-29 13:18:36
 * @LastEditTime: 2022-04-28 21:25:40
 * @Email         : 770349780@qq.com
 * @Project       : Zibll子比主题
 * @Description   : 一款极其优雅的Wordpress主题
 * @Read me       : 感谢您使用子比主题,主题源码有详细的注释,支持二次开发。
 * @Remind        : 使用盗版主题会存在各种未知风险。支持正版,从我做起!
 */

if (
    strlen($_SERVER['REQUEST_URI']) > 384 ||
    strpos($_SERVER['REQUEST_URI'], "eval(") ||
    strpos($_SERVER['REQUEST_URI'], "base64")
) {
    @header("HTTP/1.1 414 Request-URI Too Long");
    @header("Status: 414 Request-URI Too Long");
    @header("Connection: Close");
    @exit;
}
//通过QUERY_STRING取得完整的传入数据,然后取得url=之后的所有值,兼容性更好

@session_start();
$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);
//数据处理
if (!empty($t_url)) {
    //判断取值是否加密
    if ($t_url == base64_encode(base64_decode($t_url))) {
        $t_url = base64_decode($t_url);
    }
    //防止xss
    $t_url = htmlspecialchars($t_url);

    //对取值进行网址校验和判断
    preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
    if ($matches) {
        $url   = $t_url;
        $title = '页面加载中,请稍候...';
    } else {
        preg_match('/\./i', $t_url, $matche);
        if ($matche) {
            $url   = 'http://' . $t_url;
            $title = '页面加载中,请稍候...';
        } else {
            $url   = 'http://' . $_SERVER['HTTP_HOST'];
            $title = '参数错误,正在返回首页...';
        }
    }
} else {
    $title = '参数缺失,正在返回首页...';
    $url   = 'http://' . $_SERVER['HTTP_HOST'];
}

$url = str_replace('&', '&', $url);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
<script>
function link_jump()
{
    //禁止其他网站使用我们的跳转页面
    var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
    if (!MyHOST.test(document.referrer)) {
         location.href="http://" + MyHOST;
    }
    location.href="<?php echo $url;?>";
}
//延时1S跳转,可自行修改延时时间
setTimeout(link_jump, 1500);
//延时50S关闭跳转页面,用于文件下载后不会关闭跳转页的问题
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<title><?php echo $title;?></title>

<style>html{height:100%;min-height:100%;overflow:hidden}html body{background:#222428;background-size:163px;font:14px/21px Monaco,sans-serif;color:#999;font-smoothing:antialiased;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;height:100%;min-height:100%}html body a,html body a:visited{text-decoration:none;color:#ff805f}html body h4{margin:0;color:#666}.scene{width:100%;height:100%;-webkit-perspective:600;perspective:600;display:flex;align-items:center;justify-content:center}.scene svg{width:240px;height:240px}.dc-logo{position:fixed;right:10px;bottom:10px}.dc-logo:hover svg{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-animation:arrow-spin 2.5s 0s cubic-bezier(0.165,0.84,0.44,1) infinite;animation:arrow-spin 2.5s 0s cubic-bezier(0.165,0.84,0.44,1) infinite}.dc-logo:hover:hover:before{content:'\2764';padding:6px;font:10px/1 Monaco,sans-serif;font-size:10px;color:#00fffe;text-transform:uppercase;position:absolute;left:-70px;top:-30px;white-space:nowrap;z-index:20px;box-shadow:0 0 4px #222;background:rgba(0,0,0,0.4)}.dc-logo:hover:hover:after{content:'Digital Craft';padding:6px;font:10px/1 Monaco,sans-serif;font-size:10px;color:#6e6f71;text-transform:uppercase;position:absolute;right:0;top:-30px;white-space:nowrap;z-index:20px;box-shadow:0 0 4px #222;background:rgba(0,0,0,0.4);background-image:none}@-webkit-keyframes arrow-spin{50%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}@keyframes arrow-spin{50%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}</style>
</head>
<body>
 
<div class="scene">
  <svg version="1.1" id="dc-spinner" x="0px" y="0px" width:"38"="" height:"38"="" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet">
    <text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">加载中...
      <animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite"></animate>
    </text>
    <path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
      C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
      C34.797,11.841,28.159,5.203,20,5.203z">
    </path>
 
    <path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
      S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
      S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
    </path>
 
    <path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20
      c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
      <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite"></animateTransform>
    </path>
 
    <path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
      c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
       C12.875,32.922,7.078,27.125,7.078,20z">
      <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s" repeatCount="indefinite"></animateTransform>
    </path>
  </svg>
</div>
</body>
</html>

© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容