主题美化说明：

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

网站左上角添加 FPS 帧率显示

使用方法

你只需在网站管理后台—》主题设置—》自定义代码—》自定义 javascript 代码，把下面的 js 代码复制粘贴到里面即可。

自定义 javascript 代码：

// FPS 帧开始
// by：56.ink
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){ 
    var requestAnimationFrame =  
        window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame || 
        function(callback) { 
            window.setTimeout(callback, 1000/60); 
        }; 
    var e,pe,pid,fps,last,offset,step,appendFps; 
 
    fps = 0; 
    last = Date.now(); 
    step = function(){ 
        offset = Date.now() - last; 
        fps += 1; 
        if( offset >= 1000 ){ 
        last += offset; 
        appendFps(fps); 
        fps = 0; 
        } 
        requestAnimationFrame( step ); 
    }; 
    appendFps = function(fps){ 
        console.log(fps+'FPS');
        $('#fps').html(fps+'FPS');
    };
    step();
})();
// by：56.ink
// FPS 帧结束

网站添加侧边彩色滚动条

使用方法

一般主题都会自带自定义代码这样主题设置的，只需在主题设置自定义 CSS 代码里面添加美化的 css 代码就即可美化啦！
如果主题没有自定义代码那么在 WordPress 主题目录文件里找 style.css 文件或者在 WordPress 后台里找“外观—>自定义—>额外 CSS”里面美化的 css 代码就即可美！

彩色滚动条代码 CSS：

/**彩色滚动条样式开始*/
/*by  56.ink*/
::-webkit-scrollbar {
  width: 10px;  
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}
/*by：56.ink*/
/**彩色滚动条样式结束*/

鼠标移动到文章标题变色彩色样式

/*文章标题阅读彩色样式 56.ink*/
.pink{background-color:#777777 !important;}
@media screen and (min-width: 680px){.joe_div{background: url(https://cdn.7uun.com/bq.png) right 10px bottom 10px no-repeat;background-size: 12%;}}
.joe_div{color:#989898;word-break: break-all;line-height: 25px;border-radius: 10px;border: 1px solid #777777;padding: 28px 14px 14px 14px;}
.item-heading :hover,
.text-ellipsis :hover,
.text-ellipsis-2 :hover,
.links-lists :hover {
  background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: maskedAnimation 4s infinite linear;
}
@keyframes maskedAnimation {
  0% {
    background-position: 0 0
  }
  100% {
    background-position: -100% 0
  }
}
/*文章标题阅读彩色样式结束by 56.ink*/

网站添加鼠标样式代码

CSS代码：

样式一

 /** 鼠标样式 开始**/
/** 普通指针样式**/
body{cursor: url(https://a-oss.zmki.cn/img/5ccab616ea9c8.cur), default;}
/** 链接指针样式**/
a:hover{cursor:url(https://a-oss.zmki.cn/img/5ccab63d8fc80.cur), pointer;}
/** 鼠标样式 结束**/

样式二

 /*鼠标指针样式*/ 
body{cursor:url(https://www.jishusongshu.com/wp-content/uploads/2020/01/normal1.png), default;}
a:hover{cursor:url(https://www.jishusongshu.com/wp-content/uploads/2020/01/link1.png), pointer;}

样式三

 /*本站指针样式*/ 
body{cursor:url(https://img.wwwo.top/A/%E8%93%9D%E5%BF%83.svg), default;}
a:hover{cursor:url(https://img.wwwo.top/A/%E7%BA%A2%E5%BF%83.svg), pointer;}

将上方代码添加到自定义CSS代码中即可，防止有盗链或者文件失效，建议下载上传到自己服务器！

子比主题logo扫光

CSS代码：

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

子比右侧悬浮按钮美化

把下面代码放到自定义css

/*悬浮按钮渐变颜色*/
.float-right .float-btn {
    width: 40px;
    line-height: 40px;
    display: block;
    font-size: 1.4em;
    --this-color: #fff;
    --this-bg: var(--float-btn-bg);
    background: linear-gradient(90deg, #fdfffc73 0%, #ff5683 100%);
    position: relative;
    color: var(--this-color)!important;
}
/*悬浮按钮圆形样式*/
.float-right.round .float-btn {
    margin-top: 5px;
    border-radius: 20px;
}

子比主题导航栏标题字体加粗

CSS代码：

/*导航栏字体加粗*/
ul.nav {font-weight: 700;}

修改主题字体（全站字体美化）

CSS代码：（字体样式一：）

 /*字体*/
@font-face{font-family:"ziti";src:url(https://www.cunshao.com/666666/meihua/adjzRQKK4rMhqM7T.ttf);}
*{font-family:"ziti"}

CSS代码（字体样式二）：

/*全站字体美化*/
@font-face{
font-family: 'moe';
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.ttf');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.otf');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.dfont');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.eot');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.svg');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff2');
}
body{
font-family:'moe';
}
.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.lazyloading:not(.swiper-lazy-loaded){opacity: 0;}@media (max-width:640px) {
    .meta-right .meta-view{
      display: unset !important;
    }
  }

注：（非常重要）font-family是自定义字体名称（自己修改），url这是字体文件的地址（自己修改），*这是全局显示。

子比主题头像呼吸光环和鼠标悬停旋转放大

子比主题美化添加路径： 网站管理后台-–》子比主题设置—》自定义代码—》自定义 CSS 样式，把下面的 css 代码复制粘贴到里面即可。

/*头像呼吸灯和悬停旋转放大开始BY 56.ink*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}
/*头像呼吸灯和悬停旋转放大结束 BY 56.ink*/

首页文章特色图片鼠标悬停&文章列表上浮效果

这个是两个小功能，鼠标移动到文章头图时会有动态效果以及首页文章列表移动鼠标悬停上浮效果

子比主题设置—>自定义代码—>自定义 CSS 样式：,添加以下 CSS 代码：

/*首页文章特色图片鼠标悬停效果开始 by 56.ink*/
.item-thumbnail:before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0);transition: background .35s;border-radius: 8px;z-index: 2;max-width: 765px;margin: 0 auto;pointer-events:none;}
.item-thumbnail:after {content: '';position: absolute;top: 50%;left: 50%;width: 50px;height: 50px;margin: -25px 0 0 -25px;background:url(https://files.imgdb.cn/static/images/11/bf/62e2205af54cd3f9378511bf.png);background-repeat: no-repeat;background-size: 100% 100%;z-index: 3;-webkit-transform: scale(2);transform: scale(2);transition: opacity .35s,-webkit-transform .35s;transition: transform .35s,opacity .35s;transition: transform .35s,opacity .35s,-webkit-transform .35s;opacity: 0;pointer-events:none;}
.item-thumbnail:hover:before{background:rgba(0,0,0,.5)}
.item-thumbnail:hover:after{-webkit-transform:scale(1);transform:scale(1);opacity:1}
/*首页文章特色图片鼠标悬停效果结束 by 56.ink*/

/*首页文章列表鼠标悬停上浮效果开始 by 56.ink*/
.tab-content .posts-item:not(article):hover{opacity: 1;z-index: 99;border-radius: 20px;transform: translateY(-5px);box-shadow: 0 5px 10px rgba(0, 0, 0, .15);animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards;}
@keyframes index-link-active {
    0%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(0);}
    16%{transform: perspective(2000px) rotateX(10deg) rotateY(5deg) translateZ(32px);}
    100%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(65px);}
}
/*首页文章列表悬停上浮效果结束 by 56.ink*/

子比翻页按钮美化

全局css代码

/*翻页按钮*/
.pagenav .current {
    background: linear-gradient(90deg, #7de4d7 0%, #ff89ee 100%);
    color: #fff!important;
}

网站底部运行时间代码教程

需要显示的地方添加一下代码

<style>
  .days {
    color: #e74c3c; /* 红色 */
  }

  .hours {
    color: #2ecc71; /* 绿色 */
  }

  .minutes {
    color: #f39c12; /* 橙色 */
  }

  .seconds {
    color: #3498db; /* 蓝色 */
  }
  .days,.hours,.minutes,.seconds{
	  font-weight: bold;
  }
</style>
<div style="text-align: center;"><span>本站已正常运行：<span id="uptime"></span></span></div>
<script>
  const websiteCreationDate = new Date('2023-07-01');
  
  function calculateUptime() {
    const currentDate = new Date();
    const timeDifference = currentDate - websiteCreationDate;
    const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
    const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
    
    const uptimeText = `
      <span class="time-unit days">${days}</span> 天
      <span class="time-unit hours">${hours}</span> 小时
      <span class="time-unit minutes">${minutes}</span> 分钟
      <span class="time-unit seconds">${seconds}</span> 秒
    `;
    
    document.getElementById('uptime').innerHTML = uptimeText;
  }

  calculateUptime();
  setInterval(calculateUptime, 1000); // 每秒更新一次
</script>

本站已运行时间动态渐变颜色代码

把此代码直接插入子比主题适当的位置：

 /*本站已运行时间渐变颜色代码*/
<span style="margin-left: 5px;" id="showsectime">已安全运行：56天15小时52分47秒</span>

以下是需要引用的JS代码：

 /*本站已运行时间渐变颜色核心代码*/
<script type="text/javascript">
    function NewDate(str) {
      str = str.split('-');
      var date = new Date();
      date.setUTCFullYear(str[0], str[1] - 1, str[2]);
      date.setUTCHours(0, 0, 0, 0);
      return date;
    }
    function showsectime() {
      var birthDay = NewDate("2022-1-1");
      var today = new Date();
      var timeold = today.getTime() - birthDay.getTime();
      var sectimeold = timeold / 1000
      var secondsold = Math.floor(sectimeold);
      var msPerDay = 24 * 60 * 60 * 1000; var e_daysold = timeold / msPerDay;
      var daysold = Math.floor(e_daysold);
      var e_hrsold = (daysold - e_daysold) * -24;
      var hrsold = Math.floor(e_hrsold);
      var e_minsold = (hrsold - e_hrsold) * -60;
      var minsold = Math.floor((hrsold - e_hrsold) * -60); var seconds = Math.floor((minsold - e_minsold) * -60).toString();
      document.getElementById("showsectime").innerHTML = "已安全运行：" + daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
      setTimeout(showsectime, 1000);
    } showsectime();
  </script>
</div>
<style>
  #showsectime {
    animation: change 10s infinite;
    font-weight: 800;
  }

  @keyframes change {
    0% {
      color: #5cb85c;
    }

    25% {
      color: #556bd8;
    }

    50% {
      color: #e40707;
    }

    75% {
      color: #66e616;
    }

    100% {
      color: #67bd31;
    }
  }
</style>

在网站右侧底部添加一个可爱的小猫叫声代码

站右侧底部添加一个可爱的小猫，访问还会有喵叫声哦~不仅如此，点击小喵可自动消失
在任意页面都可以添加一下代码。

<!--躲猫猫-->
<style>#maomao{position:fixed;bottom:40px;right:-5px;width:57px;height:70px;background-image:url(https://56.ink/wp-content/uploads/2023/08/1.gif);background-position:center;background-size:cover;background-repeat:no-repeat;transition:background .3s;z-index:99999999999999}#maomao:hover{background-position:60px 50%;}</style>
<div id="maomao" onmouseout="duoMaomao()" style="bottom: 60vh;"></div>
<script>var randomNum =function(minNum,maxNum) {switch (arguments.length) {case 1:return parseInt(Math.random() *minNum + 1,10);break;case 2:return parseInt(Math.random() *(maxNum - minNum + 1) + minNum,10);break;default:return 0;break;};};var duoMaomao =function() {var maomao =$('#maomao');maomao.css('bottom',randomNum(1,90) + 'vh');};</script>


<!--自动一声猫咪叫-->
<audio id="myaudio" src="//56.ink/wp-content/uploads/2023/09/music_miao.mp3" acontrols="controls" autoplay="autoplay" hidden="true"></audio>

wordpress纯代码实现删除文章时自动删除媒体库图片附件

使用教程其实也非常的简单只需要把下面的代码添加到主题的functions.php里即可

//删除文章时删除图片附件 
function delete_post_and_attachments($post_ID) {
    global $wpdb;
    //删除特色图片
    $thumbnails = $wpdb->get_results( "SELECT * FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
    foreach ( $thumbnails as $thumbnail ) {
        wp_delete_attachment( $thumbnail->meta_value, true );
    }
    //删除图片附件
    $attachments = $wpdb->get_results( "SELECT * FROM $wpdb->posts WHERE post_parent = $post_ID AND post_type = 'attachment'" );
    foreach ( $attachments as $attachment ) {
        wp_delete_attachment( $attachment->ID, true );
    }
    $wpdb->query( "DELETE FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
}
add_action('before_delete_post', 'delete_post_and_attachments');

子比主题用户名昵称渐变流彩字体效果代码

子比主题添加路径： 网站管理后台-–》子比主题设置—》自定义代码—》自定义 CSS 样式，把下面的 css 代码复制粘贴到里面即可。

/*昵称流彩字体效果开始BY 56.ink*/
.display-name{
background-image: -webkit-linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 100% 600%;
animation: wzw 10s linear infinite;
}
@keyframes wzw {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -300%;
}
}
/*昵称流彩字体结束BY 56.ink*/

首页文章特色图片鼠标悬停效果+鼠标移动图片外发光

/*鼠标移动图片外发光*/
.wp-posts-content img:hover {
box-shadow:0px 0px 10px #EF0C7E;
}
/*首页文章特色图片鼠标悬停效果开始by 56.ink*/
.item-thumbnail:before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0);transition: background .35s;border-radius: 8px;z-index: 2;max-width: 765px;margin: 0 auto;pointer-events:none;}
.item-thumbnail:after {content: '';position: absolute;top: 50%;left: 50%;width: 50px;height: 50px;margin: -25px 0 0 -25px;background:url(/wp-content/themes/zibll/img/mizhi/comimages.png);background-repeat: no-repeat;background-size: 100% 100%;z-index: 3;-webkit-transform: scale(2);transform: scale(2);transition: opacity .35s,-webkit-transform .35s;transition: transform .35s,opacity .35s;transition: transform .35s,opacity .35s,-webkit-transform .35s;opacity: 0;pointer-events:none;}
.item-thumbnail:hover:before{background:rgba(0,0,0,.5)}
.item-thumbnail:hover:after{-webkit-transform:scale(1);transform:scale(1);opacity:1}
/*首页文章特色图片鼠标悬停效果结束by 56.ink*/

点击按钮弹窗九宫格页面窗口代码

按钮代码：

<!--按钮代码（56.ink）-->
<a target="_blank" class="btn btn-danger" href="#recommend" style="font-weight:bold" data-toggle="modal"><i class="fa fa-users"></i> 工具推荐</a>

弹窗内容代码：

<!--弹窗代码开始（56.ink）-->
<div class="modal fade" align="left" id="recommend" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:linear-gradient(120deg, #0174DF 30%, #DF01D7 70%);">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span class="sr-only">Close</span></button>
                <center><h4 class="modal-title" id="myModalLabel"><b><font color="#fff">业务推荐</font></b></h4></center>
            </div>
            <br>
  <div class="col-xs-6 col-sm-3 col-md-4 layui-anim layui-anim-scaleSpring" data-="" anim="layui-anim-upbit">
  <a href="https://lanrenn.cn/">
  <div class="thumbnail" style="height:150px;">
  <center style="margin-top:5%;">
  <img src="填写图片地址" width="40" height="40" style="border-radius:10px">
<hr class="layui-bg-blue" style="width:80%">懒人云
  <br>
  <font color="red">点击进入</font>
  </center>
  </div>
  </a>
  </div>
  <div class="col-xs-6 col-sm-3 col-md-4 layui-anim layui-anim-scaleSpring" data-="" anim="layui-anim-upbit">
  <a href="https://lanrenwenan.cn/tool/se/">
  <div class="thumbnail" style="height:150px;">
  <center style="margin-top:5%;">
  <img src="填写图片地址" width="40" height="40" style="border-radius: 10px">
  <hr class="layui-bg-blue" style="width:80%">看你有多色
  <br>
  <font color="red">点击进入</font>
  </center>
  </div>
  </a>
  </div>
  <div class="col-xs-6 col-sm-3 col-md-4 layui-anim layui-anim-scaleSpring" data-="" anim="layui-anim-upbit">
  <a href="https://vip.lanrenn.cn/">
  <div class="thumbnail" style="height:150px;">
  <center style="margin-top:5%;">
  <img src="填写图片地址" width="40" height="40" style="border-radius: 10px">
  <hr class="layui-bg-blue" style="width:80%">VIP视频解析
  <br>
  <font color="red">点击进入</font>
  </center>
  </div>
  </a>
  </div>
  <div class="col-xs-6 col-sm-3 col-md-4 layui-anim layui-anim-scaleSpring" data-="" anim="layui-anim-upbit">
  <a href="https://tool.lanrenn.cn/liuti">
  <div class="thumbnail" style="height:150px;">
  <center style="margin-top:5%;">
  <img src="填写图片地址" width="40" height="40" style="border-radius:10px">
  <hr class="layui-bg-blue" style="width:80%">液体背景制作
  <br>
  <font color="red">点击进入</font>
  </center>
  </div>
  </a>
  </div>
  <div class="col-xs-6 col-sm-3 col-md-4 layui-anim layui-anim-scaleSpring" data-="" anim="layui-anim-upbit">
  <a href="https://www.lanrenn.cn/jianbao">
  <div class="thumbnail" style="height:150px;">
  <center style="margin-top:5%;">
  <img src="填写图片地址" width="40" height="40" style="border-radius: 10px">
  <hr class="layui-bg-blue" style="width:80%">每日早报
  <br>
  <font color="red">点击进入</font>
  </center>
  </div>
  </a>
  </div>
  <div class="col-xs-6 col-sm-3 col-md-4 layui-anim layui-anim-scaleSpring" data-="" anim="layui-anim-upbit">
  <a href="https://tool.lanrenn.cn/">
  <div class="thumbnail" style="height:150px;">
  <center style="margin-top:5%;">
  <img src="填写图片地址" width="40" height="40" style="border-radius: 10px">
  <hr class="layui-bg-blue" style="width:80%">短视频去水印<br>
  <font color="red">点击进入</font>
  </center>
  </div>
  </a>
  </div>
            <table class="table table-bordered table-striped">
                <tbody>
                <tr>
                </tr>
                </tbody>
            </table>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--弹窗代码结束（56.ink）-->

网站侧边栏悬浮图片广告带关闭按钮两种风格

代码如下：

极简代码风格一（查看演示-图右）

<!-- 浮动广告代码开始 56.ink-->

<div id="left_layer" style="position:fixed; top:150px; right:0px;">

<img src="https://www.lanrenn.cn/tool/static/image/hb.png"><br>

<a href="javascript:;" onclick="javascript:document.getElementById('left_layer').style.display='none';">关闭</a>

</div>

<!-- 浮动广告代码结束 56.ink-->

风格二（查看演示-图左）

<!-- 浮动广告代码开始 56.ink-->
<section class="ch1">
    <a title="支付宝每天领红包"><img src="https://www.lanrenziyuan.cn/tool/static/image/hb.png" alt="支付宝红包"></a>
    <marquee with="100%" direction="up" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="1" style="color: #f90000;line-height: 36px;margin-top: 10px;height: 20px;text-align: center;font-size: 14px;">
      **霆 领取了8.00元红包<br>
      **泽 领取了1.50元红包<br>
      *慧 领取了5.95元红包<br>
      *灿 领取了7.11元红包<br>
      **新 领取了6.50元红包<br>
      **文 领取了3.13元红包<br>
      **飞 领取了10.10元红包<br>
      *刚 领取了4.14元红包
</marquee>
</section>
<!-- 浮动广告代码结束 56.ink-->

子比主题美化教程-动态LOGO变色代码

如何让主题LOGO自动变色，不用做动态图，以下代码放到子比主题后代自定义代码中就可以实现，目前只测试过子比主题，其他主题自行测试。

<!--LOGO变色-56.ink-->
<style>.navbar-logo{animation: hue 4s infinite;}@keyframes hue {from {filter: hue-rotate(0deg);}to {filter: hue-rotate(-360deg);}}</style>

倒计时代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时—午夜小站</title>
</head>
<body>
<div id="countDown" style="font-size: 16px;color: red;text-align: center;"></div> <!--显示倒计时的区域-->
<script type="text/javascript">
function countDown(time) {
var nowTime = +new Date(); //使用“+”运算符转换为数值型
var inputTime = +new Date(time);
if (nowTime <= inputTime) {
var times = (inputTime - nowTime) / 1000; //毫秒数，换算成秒
var dd = parseInt(times / 60 / 60 / 24); //剩余天数
dd = dd < 10 ? '0' + dd : dd;
var hh = parseInt(times / 60 / 60 % 24); //剩余小时数
hh = hh < 10 ? '0' + hh : hh;
var mm = parseInt(times / 60 % 60); //剩余分钟数
mm = mm < 10 ? '0' + mm : mm;
var ss = parseInt(times % 60); //剩余秒数
ss = ss < 10 ? '0' + ss : ss;
document.getElementById("countDown").innerHTML=dd+'天'+hh+'时'+mm+'分'+ss+'秒';
} else {
clearInterval(countTime);
document.getElementById("countDown").innerHTML = "活动时间以结束";
}
}
var countTime=setInterval("countDown('2023-1-4 00:00:00')",1000);//修改为结束时间
</script>
</body>
</html>

判断F12审查元素查看源代码自动将当前窗口跳转置空白页

网站安全策略，判断F12审查元素查看源代码偷代码等，网站将当前窗口自动跳转空白页，也可自定义跳转到指定页面。

  <!--安全跳转空白页开始56.ink-->
<script type="text/javascript">
    //判断F12审查元素
function fuckyou() {
  window.close(); //关闭当前窗口(防抽)
  window.location = "about:blank"; //将当前窗口跳转置空白页
}

function ck() {
  console.profile();
  console.profileEnd();
  //我们判断一下profiles里面有没有东西，如果有，肯定有人按F12了，没错！！
  if(console.clear) {
    console.clear()
  };
  if(typeof console.profiles == "object") {
    return console.profiles.length > 0;
  }
}

function hehe() {
  if((window.console && (console.firebug || console.table && /firebug/i.test(console.table()))) || (typeof opera == 'object' && typeof opera.postError == 'function' && console.profile.length > 0)) {
    fuckyou();
  }
  if(typeof console.profiles == "object" && console.profiles.length > 0) {
    fuckyou();
  }
}
hehe();
window.onresize = function() {
  if((window.outerHeight - window.innerHeight) > 200)
    //判断当前窗口内页高度和窗口高度，如果差值大于200，那么呵呵
    fuckyou();
}
</script>

<!--安全 2 跳转空白页结束56.ink-->

wordpress教程-子比主题左侧悬浮自定义导航+打赏按钮美化CSS代码

CSS代码：把下面代码放到主题后台自定义代码中

/*左侧悬浮导航+打赏按钮* 56.ink/
.siderfloat{position:fixed;left:0;top:210px;width:35px;}
.siderfloat__click{display:block;height:115px;background:url(https://pic.imgdb.cn/item/64a017a31ddac507cc06d298.png);}
.siderfloat__quick{display:inline-block;width:35px;background:#eee;border-bottom:#c9c9c9 1px solid;text-align:center;}
.siderfloat__txt{display:block;width:20px;margin:0 auto;padding:10px 0;line-height:1.2;font-weight:bold;}

HTML代码：放到主题设置自定义底部HTML代码

/*左侧悬浮导航+打赏按钮* 56.ink/
<div class="siderfloat">
  <a href="/" target="_blank" class="siderfloat__click"> </a>
  <a href="/" class="siderfloat__quick" onclick="$('html,body').animate({scrollTop: $('#CN').offset().top - '170'}, 600);"><span class="siderfloat__txt">菜单1</span></a>
  <a href="/" class="siderfloat__quick" onclick="$('html,body').animate({scrollTop: $('#TW').offset().top - '170'}, 600);"><span class="siderfloat__txt">菜单2</span></a>
  <a href="/" class="siderfloat__quick" onclick="$('html,body').animate({scrollTop: $('#HK').offset().top - '170'}, 600);"><span class="siderfloat__txt">菜单3</span></a>
  <a href="/" class="siderfloat__quick" onclick="$('html,body').animate({scrollTop: $('#JP').offset().top - '170'}, 600);"><span class="siderfloat__txt">菜单4</span></a>
  <a href="/" class="siderfloat__quick" onclick="$('html,body').animate({scrollTop: $('#WG').offset().top - '170'}, 600);"><span class="siderfloat__txt">菜单5</span></a>
</div>

wordpress教程-子比主题网站右键菜单内容自定义美化

第一种

<!-- 自定义右键 -->
<style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9;border-radius: 5px;}
    div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
    div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
    div.usercm ul li a{color:#666;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#fff;background:rgba(9,145,113,0.88);border-radius: 5px}
    div.usercm ul li a i{margin-right:10px}
    a.disabled{color:#c8c8c8!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important}
    div.usercm{background:#fff !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="https://laolion.com/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-file fa-fw"></i><span>复制</span></a></li>
        <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>百度</span></a></li>
        <li><a href="javascript:void(0);" onclick="googleSearch();"><i class="fa fa-google fa-fw"></i><span>谷歌</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
        <li><a href="https://laolion.com/links.html"><i class="fa fa-user fa-fw"></i><span>和我当邻居</span></a></li>  
           <li><a href="https://laolion.com/gbook.html"><i class="fa fa-pencil fa-fw"></i><span>给我留言吧</span></a></li>
    </ul>
</div>
<script type="text/javascript">
    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                    c = 0,
                    h = 0,
                    k = 0,
                    e = 0,
                    f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);
    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要复制的内容！") : document.execCommand("Copy")
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("请选择需要百度的内容！") : window.open("https://www.baidu.com/s?wd=" + a)
    }
    function googleSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("请选择需要谷歌的内容！") : window.open("https://www.google.com/search?q=" + a)
    }     
    $(function() {
        for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });
    </script>

第二种

<!--右击列表 56.ink-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script><style type="text/css">a{text-decoration:none}div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba(0,0,0,.3);box-shadow:0px 0px 15px#333;position:absolute;display:none;z-index:10000;opacity:0.9;border-radius:8px}div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}div.usercm ul li{margin:0px;padding:0px;line-height:35px}div.usercm ul li a{color:#666;padding:0 15px;display:block}div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}div.usercm ul li a i{margin-right:10px}a.disabled{color:#c8c8c8!important;cursor:not-allowed}a.disabled:hover{background-color:rgba(255,11,11,0)!important}div.usercm{background:#fff!important}</style><div class="usercm"style="left: 199px; top: 5px; display: none;"><ul><li><a href="/><i class="fa fa-home fa-fw"></i><span>首页</span></a></li><li><a href="javascript:void(0);"onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li><li><a href="javascript:void(0);"onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li><li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li><li><a href="/yqlj"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li><li><a href="/fankui"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></li></ul></div><script type="text/javascript">(function(a){a.extend({mouseMoveShow:function(b){var d=0,c=0,h=0,k=0,e=0,f=0;a(window).mousemove(function(g){d=a(window).width();c=a(window).height();h=g.clientX;k=g.clientY;e=g.pageX;f=g.pageY;h+a(b).width()>=d&&(e=e-a(b).width()-5);k+a(b).height()>=c&&(f=f-a(b).height()-5);a("html").on({contextmenu:function(c){3==c.which&&a(b).css({left:e,top:f}).show()},click:function(){a(b).hide()}})})},disabledContextMenu:function(){window.oncontextmenu=function(){return!1}}})})(jQuery);function getSelect(){""==(window.getSelection?window.getSelection():document.selection.createRange().text)?layer.msg("啊噢...你没还没选择文字呢！"):document.execCommand("Copy")}function baiduSearch(){var a=window.getSelection?window.getSelection():document.selection.createRange().text;""==a?layer.msg("啊噢...你没还没选择文字呢！"):window.open("https://www.baidu.com/s?wd="+a)}$(function(){for(var a=navigator.userAgent,b="Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"),d=!0,c=0;c<b.length;c++)if(0<a.indexOf(b[c])){d=!1;break}d&&($.mouseMoveShow(".usercm"),$.disabledContextMenu())});</script>

子比主题直接可以放到主题后台自定义代码中

注意：

配合弹窗提醒食用更佳，引入 layer.js
官方CDN源：https://cdn.staticfile.org/layer/3.1.1/layer.js
代码中网站地址改成自己的博客地址
引用 fontawesome 图标
官方CDN源：https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

网站侧边栏添加新年倒计时小工具

在后台—》外观—》小工具—》自定义 HTML—》选择你需要放的位置

<div class="gn_box">
    <h2><center><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>2</font><font
            color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font
            color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font>
    </center></h2>
    <center>
        <div id="CountMsg" class="HotDate">
            <span id="t_d"></span>
            <span id="t_h"></span>
            <span id="t_m"></span>
            <span id="t_s"></span>
        </div>
    </center>
    <script type="text/javascript"> function getRTime() {
        var EndTime = new Date('2022/01/01 00:00:00');
        var NowTime = new Date();
        var t = EndTime.getTime() - NowTime.getTime();
        var d = Math.floor(t / 1000 / 60 / 60 / 24);
        var h = Math.floor(t / 1000 / 60 / 60 % 24);
        var m = Math.floor(t / 1000 / 60 % 60);
        var s = Math.floor(t / 1000 % 60);
        document.getElementById("t_d").innerHTML = d + " 天";
        document.getElementById("t_h").innerHTML = h + " 时";
        document.getElementById("t_m").innerHTML = m + " 分";
        document.getElementById("t_s").innerHTML = s + " 秒";
    }
    setInterval(getRTime, 1000);
    </script>
</div>
<!--侧边栏新年倒计时 by 56.ink-->

WordPress全站左侧边栏添加联系站长按钮[WP教程]

使用教程

也很简单，只需要在两个文件中添加一行代码就可以实现，具体演示效果可以查看本站觅知博客的效果

1、后台主题设置—>自定义代码—>自定义 CSS 样式代码把下面的代码添加到里面

自定义 CSS 代码：

/*左边联系站长 css 开始*/
.contact-help{position: fixed; z-index: 101; left: 0; top: calc(50% - 30px); margin-top: -36px; width: 28px; height: 72px; transition: all .3s; font-size: 12px;background: var(--main-bg-color);border-radius: 0 5px 5px 0; padding: 8px 7px; line-height: 14px;}@media screen and (max-width: 768px){.contact-help{display:none;}}
/*左边联系站长 css 开始*/

2、在主题目录下 themes/zibll/footer.php 下，添加下面的 PHP 代码：

PHP 代码：

<!--左侧联系站长-->
<a href="http://wpa.qq.com/msgrd?v=3&uin=你的QQ&site=qq&menu=yes" target="_blank" class="contact-help main-shadow"  style="font-weight:700;" />联系站长</a>

说明：PHP 代码的 HTML 代码内容、链接，可自行修改。

网站添加一个随机预览文章随便看看功能

1、这个功能是和随机预览文章的功能，点击一次更换一次文章
2、将下面的 PHP 代码加入到主题目录下：themes/zibll/functions.php 文件中。
3、添加完成之后访问：你的域名+/?random，然后可以自己添加在菜单里面

// 添加随便看看（BY 56.ink）
function random_postlite() {
global $wpdb;
$query = "SELECT ID FROM $wpdb->posts WHERE post_type = 'post' AND post_password = '' AND post_status = 'publish' ORDER BY RAND() LIMIT 1";
if ( isset( $_GET['random_cat_id'] ) ) {
$random_cat_id = (int) $_GET['random_cat_id'];
$query = "SELECT DISTINCT ID FROM $wpdb->posts AS p INNER JOIN $wpdb->term_relationships AS tr ON (p.ID = tr.object_id AND tr.term_taxonomy_id = $random_cat_id) INNER JOIN $wpdb->term_taxonomy AS tt ON(tr.term_taxonomy_id = tt.term_taxonomy_id AND taxonomy = 'category') WHERE post_type = 'post' AND post_password = '' AND post_status = 'publish' ORDER BY RAND() LIMIT 1";
}
if ( isset( $_GET['random_post_type'] ) ) {
$post_type = preg_replace( '|[^a-z]|i', '', $_GET['random_post_type'] );
$query = "SELECT ID FROM $wpdb->posts WHERE post_type = '$post_type' AND post_password = '' AND post_status = 'publish' ORDER BY RAND() LIMIT 1";
}
$random_id = $wpdb->get_var( $query );
wp_redirect( get_permalink( $random_id ) );
exit;
}
if ( isset( $_GET['random'] ) )
add_action( 'template_redirect', 'random_postlite' );
// 随便看看结束（BY 56.ink）

子比主题切换【早/晚】模式 layer 样式提示弹窗

使用教程

子比主题设置—>自定义代码—>自定义 javascript 代码：,添加以下 JS 代码：

// 早夜间模式切换提示弹窗
$(".toggle-theme").click(function() {
var toggleThemeText = "当前为早间亮白模式";
if (!$("body").hasClass('dark-theme')) {
toggleThemeText = "当前为晚间暗黑模式";
$("body").css("background-image","none");
}
layer.msg(toggleThemeText, {
time: 2000,
anim: 1
});
}); 
// 早夜间模式切换提示弹窗结束 56.ink

简单一行CSS样式代码实现网站全局变灰操作方式及教程方法

使用教程

也很简单，只需要在两个文件中添加一行代码就可以实现，具体演示效果可以查看上方截图的效果
1、后台主题设置—>自定义代码—>自定义 CSS 样式代码把下面的代码添加到里面
其他网页或者主题直接在 foot 或者 head 文件底部添加即可，记得添加引用即可如
<style type=”text/css”>此处中间添加 css 代码样式</style>

css样式代码

第一种样式代码：推荐使用

<style type="text/css">
/*网站整体灰白样式开始一*/
html{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}
/*网站整体灰白开始样式一结束*/
</style>

样式二代码：

<style type="text/css">
/*网站整体灰白样式开始二*/
          :root {
            --BG_COLOR: #121212;
            --FONT_COLOR: rgba(255, 255, 255, .87);
            --TAB_TITLES_COLOR: rgba(255, 255, 255, .6);
            --SUB_TITLE_COLOR: rgba(255, 255, 255, .38);
            --TAB_TITLES_HOVER_COLOR: #fff;
            --TITLE_HOVER_COLOR: #0D9BFF;
            --RIGHT_CONTENT_TEXT_COLOR: rgba(255, 255, 255, .5);
            --FOCUS_BG_COLOR: #222222;
            --TAB_SUBTITLES_BG_COLOR: rgba(50, 51, 53, .7);
            --IMG_DEFAULT_COLOR: #333333;
          }
          html {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
          }
          body{
            filter:gray;
          }
/*网站整体灰白样式开始二*/
</style>

第三种样式代码：

<style type="text/css">
/*网站整体灰白样式开始三*/
body {
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
}
/*网站整体灰白样式三结束*/
</style>

一言Hitokoto API 调用教程

hitokoto.cn的语库是很丰富的，api文档也写得很简明了，这里提供一个最简单的调用js：

fetch('https://v1.hitokoto.cn')
        .then(response => response.json())
        .then(data => {
          const text = document.getElementById('hitokoto_text')
          text.innerText = data.hitokoto
          const from = document.getElementById('hitokoto_from')
          var author = !!data.from ? data.from : "无名氏";
          from.innerText = "—— " + (data.from_who || '') + "「 " + author + " 」"
        })
        .catch(console.error)

接下来可以直接在网页上通过hitokoto和from两个class调用了，例如：

<div>   
    <p style="text-align:center">『 <span id="hitokoto_text">:D获取中...</span>  』</p> 
    <p style="text-align:center"><span id="hitokoto_from">:D获取中...</span></p> 
</div>

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

统计信息模块小工具主要采用前端HTML+CSS和后端函数，通过后端提供功能函数，然后前台获取到后台提供的数据来显示信息功能。有兴趣的大佬可以修改一下。

美化教程

1.在子比主题的主题目录下，header.php底部添加以下函数代码：

<!--统计信息函数-->
<script type="text/javascript" >
<?php
//用户总数
$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");echo "var tj_jstext="."'$users'";
?>
</script>
<script type="text/javascript" >
<?php
/*
 * WordPress获取今日发布文章数量
 *www.cunshao.com
 */
function nd_get_24h_post_count(){
  $today = getdate();
  $query = new WP_Query( 'year=' . $today["year"] . '&monthnum=' . $today["mon"] . '&day=' . $today["mday"]);
  $postsNumber = $query->found_posts;
  return $postsNumber;
}
$post_24h = nd_get_24h_post_count();
echo "var tj_24h="."'$post_24h'";
?>
</script>
<script type="text/javascript" >
<?php
/*
 * WordPress整站文章访问计数
 *www.cunshao.com
 */
function nd_get_all_view(){
  global $wpdb;
  $count=0;
  $views= $wpdb->get_results("SELECT * FROM $wpdb->postmeta WHERE meta_key='views'");
  foreach($views as $key=>$value){
    $meta_value=$value->meta_value;
    if($meta_value!=' '){
      $count+=(int)$meta_value;
    }
  }return $count;
}
$post_view = nd_get_all_view();
echo "var tj_view="."'$post_view'";
?>
</script>
<script type="text/javascript" >
<?php
//日志总数
$count_posts = wp_count_posts(); 
$published_posts =$count_posts->publish;
echo "var tj_rzzs="."'$published_posts'";
?>
</script>
<script type="text/javascript" >
<?php
//稳定运行
$wdyx_time = floor((time()-strtotime("2020-3-28"))/86400);
echo "var tj_wdyx="."'$wdyx_time'";
?>
</script>

修改版PHP代码：

<!--调用信息代码-->
<!--底部统计用的代码-->
<script type="text/javascript" >
<?php
//用户总数
$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");echo "var tj_jstext="."'$users'";
?>
</script>
<script type="text/javascript" >
<?php
/*
 * WordPress获取今日发布文章数量
 */
function nd_get_24h_post_count(){
  $today = getdate();
  $query = new WP_Query( 'year=' . $today["year"] . '&monthnum=' . $today["mon"] . '&day=' . $today["mday"]);
  $postsNumber = $query->found_posts;
  return $postsNumber;
}
$post_24h = nd_get_24h_post_count();
echo "var tj_24h="."'$post_24h'";
?>
</script>
<script type="text/javascript" >
<?php
/*
 * WordPress整站文章访问计数
 */
function nd_get_all_view(){
  global $wpdb;
  $count=0;
  $views= $wpdb->get_results("SELECT * FROM $wpdb->postmeta WHERE meta_key='views'");
  foreach($views as $key=>$value){
    $meta_value=$value->meta_value;
    if($meta_value!=' '){
      $count+=(int)$meta_value;
    }
  }return $count;
}
$post_view = nd_get_all_view();
echo "var tj_view="."'$post_view'";
?>
</script>
<script type="text/javascript" >
<?php
//日志总数
$count_posts = wp_count_posts(); 
$published_posts =$count_posts->publish;
echo "var tj_rzzs="."'$published_posts'";
?>
</script>
<script type="text/javascript" >
<?php
//稳定运行
$wdyx_time = floor((time()-strtotime("2020-03-28"))/86400);
echo "var tj_wdyx="."'$wdyx_time'";
?>
</script>
<!--调用信息代码结束-->

注：函数运行日期2020-03-28改为你自己网站运行的日期。

2.在后台–>外观–>小工具–>自定义HTML，把自定义HTML放到合适的版块里（子比主题放在首页-底部全宽度），然后把下面代码复制粘贴进去，即可在前台显示。

<!--信息统计开始-->
<div id="nuandao">
    <div class="siteCount">
      <div class="wrapper">
        <ul>
          <li>
            <span>
<script type="text/javascript" >
document.write(tj_jstext);
</script>
</span>
            <b>用户总数</b>
          </li>
          <li>
            <span><script type="text/javascript" >
document.write(tj_rzzs);
</script></span>
            <b>文章总数</b>
          </li>
          <li>
            <span><script type="text/javascript" >
document.write(tj_view);
</script></span>
            <b>浏览总数</b>
          </li>
          <li>
            <span></span>
            <span>
<script type="text/javascript" >
document.write(tj_24h);
</script>
</span>
            <b>今日发布</b>
          </li>
          <li>
            <span><script type="text/javascript" >
document.write(tj_wdyx);
</script></span>
            <b>稳定运行</b>
          </li>
        </ul>
        <div class="join-vip">
          <a  href="/" target="_blank" style="background-image: linear-gradient(to right, #D279EE, #F8C390); text-align:center;" >立即加入</a>
         <p>加入无聊笔记，快速获取优质IT资源！</p>
        </div>
      </div>
    </div>
  </div>
<style type="text/css">
 body{padding: 0px; margin: 0px;} *, *::before, *::after{box-sizing: border-box;} ol, ul{list-style: none;} a{color: inherit; text-decoration: none; vertical-align: top;}/*背景图*/#nuandao .siteCount{position: relative; padding: 60px 0; background: url(https://www.cunshao.com/666666/meihua/img/1.jpg) center center / cover no-repeat fixed;}#nuandao .siteCount .cover{height: 100%; width: 100%; background: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0;}/*内容*/#nuandao .siteCount .wrapper{position: relative; z-index: 10; width: 1400px; 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;}#nuandao .siteCount ul li b{display: block; font-weight: normal; font-size: 14px;}/*按钮*/#nuandao .siteCount .join-vip{text-align: center; color: #fff; margin-top: 30px;}#nuandao .siteCount .join-vip a{display: inline-block; border: 0; border-radius: 5px; transition: all 0.3s; padding: 10px 30px; font-size: 15px; letter-spacing: 0.5px; background-color: var(--primary-color); background-image: -webkit-gradient( linear, left top, right top, from(#006eff), to(#13adff) ); background-image: -webkit-linear-gradient(left, #006eff, #13adff); background-image: -o-linear-gradient(left, #006eff 0, #13adff 100%); background-image: linear-gradient(90deg, #006eff, #13adff); -webkit-box-shadow: 0 5px 10px 0 rgba(16, 110, 253, 0.3); box-shadow: 0 5px 10px 0 rgba(16, 110, 253, 0.3); color: #fff;}#nuandao .siteCount .join-vip p{margin-top: 15px; font-size: 14px; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.5px; font-family: Arial;}@media screen and (max-width: 768px){#nuandao .siteCount ul li span{font-size: 20px; font-family: Arial;}}
 </style>
<!--信息统计结束-->

本站使用的修改版本:(图标是阿里巴巴矢量图库,自己弄图标,然后修改<svg>标签里面

<!--信息统计开始-->
<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：www.cunshao.com</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://www.cunshao.com/666666/meihua/img/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>
<!--信息统计结束-->

注：背景图自己修改

引用阿里巴巴矢量图标库彩色图标

引入JS代码

<script src="//at.alicdn.com/t/font_2101442_j448m0ggtp.js"></script>

添加css样式

1、在当前主题设置 –> 自定义CSS代码或者目录下的 header.php 文件中适当位置添加以下代码:（不适用的，自行调整宽度）

<style type="text/css">
.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>

2、配合一行代码让你网站菜单图标旋转起来

.fa-spin {
    animation: 2s linear 0s normal none infinite running fa-spin;
}

彩色图标和旋转图标实例

<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#iconziyuan"></use></svg> 文章分类

首页主内容上方添加跑马灯公告小工具

网站后台—>外观—>小工具—>自定义HTML，然后添加到合适位置集合即可。

<!--跑马灯公告-->
<style>
  #nr{font-size:20px; margin: 0; background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: masked-animation 2s infinite linear;} @keyframes masked-animation{0%{background-position: 0 0;} 100%{background-position: -100%, 0;} }
</style>
    <div style="background-color:#333;border-radius:25px;box-shadow:0px 0px 5px #f200ff;padding:5px;margin-bottom:0px;">
        <marquee>
        <b id="nr">欢迎来到无聊笔记 - 网络IT科技魅力博客。</b> </marquee>
    </div>

底部添加蓝色波浪

在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>
<!--底部波浪结束-->

网页加入显示当前时间代码

把下面代码放到需要显示的地方即可 JS代码：

<span id=localtime></span><script type="text/javascript">function showLocale(objD)
{var str,colorhead,colorfoot;var yy = objD.getYear();
if(yy<1900) yy = yy+1900;
        var MM = objD.getMonth()+1;
    if(MM<10) MM = '0' + MM;
    var dd = objD.getDate();
    if(dd<10) dd = '0' + dd;
    var hh = objD.getHours();
    if(hh<10) hh = '0' + hh;
    var mm = objD.getMinutes();
    if(mm<10) mm = '0' + mm;
    var ss = objD.getSeconds();
    if(ss<10) ss = '0' + ss;
    var ww = objD.getDay();
    if  ( ww==0 )  colorhead="<font color=\"#FF3030\">";
    if  ( ww > 0 && ww < 6 )  colorhead="<font color=\"#FF3030\">";
    if  ( ww==6 )  colorhead="<font color=\"#FF3030\">";
    if  (ww==0)  ww="星期日";
    if  (ww==1)  ww="星期一";
    if  (ww==2)  ww="星期二";
    if  (ww==3)  ww="星期三";
    if  (ww==4)  ww="星期四";
    if  (ww==5)  ww="星期五";
    if  (ww==6)  ww="星期六";
    colorfoot="</font>"
    str = colorhead + yy + "-" + MM + "-" + dd + "丨" + hh + ":" + mm + ":" + ss + "丨" + ww + colorfoot;
    return(str);}function tick()
{var today;today = new Date();document.getElementById("localtime").innerHTML = showLocale(today);window.setTimeout("tick()", 1000);}
tick();</script>

文字渐变彩色代码

<style>
#nr{
    font-size:15px;
    margin: 0;
    background: -webkit-linear-gradient(left,
        #ffffff,
        #ff0000 6.25%,
        #ff7d00 12.5%,
        #ffff00 18.75%,
        #00ff00 25%,
        #00ffff 31.25%,
        #0000ff 37.5%,
        #ff00ff 43.75%,
        #ffff00 50%,
        #ff0000 56.25%,
        #ff7d00 62.5%,
        #ffff00 68.75%,
        #00ff00 75%,
        #00ffff 81.25%,
        #0000ff 87.5%,
        #ff00ff 93.75%,
        #ffff00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: masked-animation 3s infinite linear;
}
@keyframes masked-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100%, 0;
    }
}
</style>
<b id="nr">
欢迎访问无聊笔记  56.ink
<br/>

首页文章上方添加一个 NEW 最新发布样式

安装方法：

在后台—》外观—》小工具—》自定义 HTML—》选择你需要放的位置社长是放在首页-首页侧边栏添加下方代码

如果觉得代码太长，可以将下面的 css 样式中的首页最新发布标题里面 css 样式代码，复制下来，放到一个 css 文件当中再引用即可，

引用代码可参考我提供的，将/css/news.css 更改成你的文件路径就可以了

<link rel='stylesheet' id='ripro_chlid_style-css'  href='/css/news.css' type='text/css' media='all' />

<!--NEW 最新发布样式开始-->  
<style type="text/css">
/*首页最新发布标题*/
.zhankr-zx {
  position: relative;
  margin-bottom: 18px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  line-height: 1;
}

.zhankr-zx:before {
  margin-right: 10px;
}

.zhankr-zx:after {
  margin-left: 10px
}

.zhankr-zx:before, .zhankr-zx:after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
  border-radius: 50%;
}

.zhankr-zx span {
  font-family: Futura;
  background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 49px;
  letter-spacing: 5px;
  display: inline-block;
  font-weight: 700;
}

.zhankr-zx .zhankr-zx-n {
  font-size: 20px;
}

.zhankr-zx .zhankr-zx-n strong {
  display: block;
  font-size: 20px;
  background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
  -webkit-background-clip: text;
  color: transparent;
}

.HhcatboxDes {
  position: absolute;
  opacity: 0;
  z-index: 1;
  align-items: center;
  display: flex;
  font-size: 16px;
  height: 180px;
  justify-content: center;
  width: 100%;
  color: #fff;
  font-weight: 600;
  background: #f95491;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  -webkit-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.HhCooltitle {
  margin-top: 10px
  }

/*首页最新发布标题*/
</style>
<div class="zhankr-zx">
<span>NEWS</span>
<div class="zhankr-zx-n">
<strong>最新</strong>
<strong>发布</strong>
</div>
</div>
<script>document.querySelectorAll(".zhankr-zx")[0].parentNode.parentNode.style.cssText="background:#fff0;box-shadow:0 0 0";</script>
<!--56.ink NEW 最新发布样式结束-->

给网页添加一个百度搜索框

css代码：


<style>
        * {
            box-sizing: border-box;  /*宽度和高度会包括内边距和边框*/
        }
 
        div.search {
            padding: 10px 0;
        }
 
        form {
            position: relative;
            width: 300px;
            margin: 0 auto;  /*设置宽度后，居中*/
        }
 
        input,button {
            border: none;   /*无边框样式；元素的总宽度和高度包括边框的宽度 */
            outline: none;  /*无轮廓样式；轮廓是在元素周围绘制的一条线，在边框之外并且可能与其他内容重叠，以凸显元素，元素的总宽度和高度不受轮廓线宽度的影响。*/
        }
 
        .search input {
            width: 100%;
            height: 42px;
            padding-left: 13px;
            border: 2px solid #c5464a;
            border-radius: 19px;   /*border-radius 属性用于向元素添加圆角边框：*/
            background: transparent;  /*背景透明*/
        }
 
        .search button {
            height: 42px;
            width: 42px;
            cursor: pointer;  /*cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状*/
            position: absolute;
            background: #c5464a;
            border-radius: 0 19px 19px 0;
            width: 60px;
            right: 0;
        }
        .search button:hover {
            background-color: #c7585c;  /*点击搜索按钮时的背景颜色*/
        }
 
        /* 在<button>元素后面插入内容，并设置所插入内容的样式： */
        .search button:before {
            content: "搜索";  /*插入的内容*/
            font-size: 13px;  /*插入内容的字体大小*/
            color: #F9F0DA;  /*插入内容的字体颜色*/
        }
    </style>

引用html代码：

<!-- 搜索框 -->
    <div class="search">
        <form action="https://www.baidu.com/s" method="get" target="_blank" id="searchForm">
        <input  type="text" autocomplete="off" id="keyword" name="wd" placeholder="请输入..." />
        <button type="submit"></button>
        </form>
    </div>

搜索引擎可自行切换。不适合子比主题，影响自带搜索排版，有大佬可以修改的话帮忙整一下，谢了！

【子比主题美化】给导航菜单添加彩色渐变的文字

以下代码放到你的菜单

<span class="meihua">你的菜单名称</span>

以下代码放入css样式

.meihua {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@media (max-width:768px) {
span.ua-info {
display: none
}
.comment-author .user-title {
width: 40% !important
}
}
.comment-author .user-title {
font-size: 13px;
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@keyframes text {
0% {
background-position: 0 0
}
100% {
background-position: -150% 0
}
}
.b2-qr-code-fill {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}

演示

无聊笔记 56.ink

文章版权归作者所有，未经允许请勿转载。

THE END

子比主题美化(更新中)

主题美化说明：

使用方法

使用方法

自定义 javascript 代码：

使用方法

彩色滚动条代码 CSS：

代码如下：

使用教程

使用教程

使用教程

css样式代码

美化教程

引入JS代码

添加css样式

彩色图标和旋转图标实例

css代码：

引用html代码：

以下代码放到你的菜单

以下代码放入css样式

演示