子比主题美化教程持续更新(24-10-7)

CSS代码：

/*列表依次进入*/
posts{display: none}.fadeIn{display: block; animation: fadeIn 3s;}@keyframes fadeIn{0%{opacity: 0; transform: translate3d(0, 50px, 0);} 100%{opacity: 1; transform: translate3d(0, 0, 0);}}

Javascript代码：

// 列表依次进入
let lis = $('posts');
Array.from(lis).forEach((item, index) => {
    setTimeout(() => {
        $(item).addClass('fadeIn');
    }, 150 * index);
});

Javascript代码：

//复制提示
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};

子比主题设置—>自定义代码—>自定义底部HTML代码,添加以下代码：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

CSS代码：

/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}

Javascript代码：

//进度条加载显示
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");

在主题目录header.php中，添加以下代码，放在body标签下（最后一行）

<div id="percentageCounter"></div>

在子比主题设置—>文章&列表—>文章页—>版权提示内容处添加以下代码：

<div>
  <!--网站声明代码start-->
  <div>
    <fieldset
      style="
        border: 1px dashed #008cff;
        padding: 10px;
        border-radius: 5px;
        line-height: 2em;
        color: #6d6d6d;
      "
    >
      <legend
        align="center"
        style="
          width: 30%;
          text-align: center;
          background-color: #008cff;
          border-radius: 5px;
         background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;" 
        "
      >
        文章版权声明
      </legend>
      1、本网站名称：<span style="color: #3333ff"
        ><span style="color: #FF6666; font-size: 18px"
          ><strong>星语的小木屋</strong></span
        ></span
      ><br />
      2、本站永久网址：<font color="#FF6666">https://www.wiiuii.cn</font
      ><br />
      3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ1431258805进行删除处理。<br />
      4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
      5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
      6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
  <!--网站声明代码end--><br />
</div>

截图：

注：自行修改代码中的文字内容

在主题目录—>footer.php的“”上方加入以下代码：

<!--底部可爱底线提示-->
<div class="app_normal window" style="padding-top:" data-reactroot=""><div class="common_container lastpagenotice_noticewrap"><img src="https://img.wiiuii.cn/img/lan.png" data-spm-anchor-id="a2ha1.14919748_WEBHOME_GRAY.0.i1"><div class="lastpagenotice_text"  style="color:#6699FF;font-weight:bold;">我也是有底线哒~</div><div class="lastpagenotice_line"></div></div></div>

CSS代码：

/*底部可爱底线提示*/
.lastpagenotice_noticewrap{color:hsla(0, 2.1%, 18.8%, 0.6);}.lastpagenotice_noticewrap img{height:73px; width:88px; margin:0 auto}.lastpagenotice_noticewrap .lastpagenotice_text{display:block; position:absolute; font-size:15px; line-height:20px; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); left:-webkit-calc(50% + 60px); left:calc(50% + 60px)}.lastpagenotice_noticewrap .lastpagenotice_line{width:100%; height:1px; background-color:hsla(0,0%,100%,.05); position:absolute; bottom:0}.app_normal{text-align:center; position:relative}

截图：

食用教程
在网站后台—>外观—>小工具—>自定义html,放到合适的位置（比如本站放在所有页面-侧边栏-顶部位置，主题不同放的位置也不同，根据自己的爱好放到合适的位置）后只需添加下面的代码即可实现。_{疫情地图是果核剥壳网站大佬制作并允许各大网站调用的一个组件。}

<iframe src="https://www.lovestu.com/api/project/cnmapyinqing/obj.php" height="500" frameborder="no" border="0" width="100%"> </iframe>

注：“height”是高度（自己根据网站设置合适的高度，本站是450），“width”是宽度（一般默认100%）。

截图：

1、在主题目录下functions.php文件把下面的代码添加进去：

//  文章字数和阅读时间
function count_words_read_time () {
  global $post;
  $text_num = mb_strlen(preg_replace('/s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8');
  $read_time = ceil($text_num/300); // 修改数字300调整时间
  $output .= '共计' . $text_num . '字，阅读大约' . $read_time  . '分钟。';
  return $output;
}

2、在主题目录zibll/inc/functions/zib-single.php,把下面代码添加到132行处（如下图）

<!--文章字数和阅读时间--><i class="fa fa-hourglass-start"></i> <?php echo count_words_read_time(); ?>

截图：

说明：（必看）文章字数和阅读时间都不是很准，同时用处也不是很大…喜欢的话自己拿去试试吧！

CSS代码：

/*导航栏图片背景*/
.header-layout-1{position:relative;background-image:url(https://img.wiiuii.cn/img/huacao.png);background-position:center right;background-size:auto 100%;}

说明：图片背景是透明的，图片大小是180080、200080（后这者感觉可能优于前者，O(∩_∩)O哈哈~）

网友图片提供素材：

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

截图：

使用教程
回到顶部悬挂猫咪只能电脑端显示，需要手机端显示，自己修改CSS代码。
本教程以本站使用的子比主题为例，大部分主题大同小异。
回到顶部悬挂猫咪采用js+css+Jquery,但大多数的WordPress主题都已经使用Jquery，所以无需担心Jquery问题（当然啦，如果主题没有Jquery，那么去百度找Jquery好用的CDN进行调用。）
1、首先，下载回到顶部悬挂猫咪的JS+CSS（在本文章末）。

2、两种方式：

在网站后台—>主题设置—>自定义代码—>自定义头部HTML代码，把下面的代码添加进去：

如果没有自定义头部HTML代码的主题，请在主题目录下header.php末尾添加下面的代码。

代码：

<!--回到顶部-->
<link rel="stylesheet" type="text/css" href="/cdn/css/szgotop.css" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -900px;"></div>
<script type="text/javascript" src="/cdn/js/szgotop.js"></script>

注（非常重要）：自己把得到CSS、JS文件放在喜欢的目录里面，或者在自己网站根目录下创建新的目录把文件放进去（嘿嘿嘿，实在实在是不会的自己花钱弄），然后在href=”文件路径”和src=”文件路径”填写自己的文件路径。悬挂猫咪是一张图片，还需要在CSS里面修改图片的路径（图片路径在CSS最后面，见下图）。

3、前两步如果都完成了，那么在网站首页拉到底部就可以看到了悬挂猫咪，那么这时候就会出现“主题自带的回到顶部”和悬挂猫咪，那么需要我们到网站后台—>主题设置里面关闭主题自带的回到顶部，其他主题的主题设置不知道有没有关闭这一项。

子比主题只需在网站后台—>主题设置—>全局&功能—>常用功能—>返回顶部按钮—>关闭电脑端的回到顶部。