WordPress 子比主题美化模板操作教程(更新中)-织音博客

31.添加复制提示框

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>

演示:

32.本站同款复制提示栏

自定义js代码中添加以下代码：

//透明复制提示开始
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【织音博客(WWW.ITZHIYIN.CN)】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};
//透明复制提示结束

效果见本站

33.顶部添加彩色进度条

CSS代码：

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

js代码：

//进度条加载显示
$(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>

34.子比主题【夜/日】间模式切换小提示

WordPress子比主题【夜/日】间模式切换小提示[WP教程]

2年前

4962212

35.简约精美【日期+一言】小工具

HTML小工具没啥好说的，自己打开【网站后台】-【外观】-【小工具】-【自定义HTML】，放在侧边栏就OK了。把下面的代码放进去就大功告成啦！

<style>
  .zhiyin-rqyy-demo {
    width: 100%;
    height: 180px;
    position: relative;
  }
  .zhiyin-rqyy-item {
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
    color: white;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    background-image: url(https://www.itzhiyin.cn/rqyy-bg-5.png);
  }
  .zhiyin-rqyy-date {
    font-family: Arial, Helvetica, sans-serif;
  }
  .zhiyin-rqyy-day {
    font-size: 2.5rem;
    font-weight: 700;
  }
  .zhiyin-rqyy-month {
    font-weight: 700;
    font-size: 2rem;
  }
  .zhiyin-rqyy-month::before {
    content: "/";
    padding-right: 2px;
  }
  .zhiyin-rqyy-text {
    position: absolute;
    width: 90%;
    height: auto;
    line-height: 30px;
    font-family: "宋体";
    font-size: 1.5rem;
    font-weight: 700;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .itzhiyin-rqyy-yy::after {
    display: inline-block;
    content: "_";
    animation: fadeInHX 1s;
    animation-iteration-count: infinite;
  }
  @keyframes fadeInHX {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .zhiyin-rqyy-btn {
    display: inline-block;
    font-family: "新宋体";
    font-weight: 700;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 10px;
  }
  #zhiyin-yybtn {
    width: 100%;
    position: relative;
  }
  #zhiyin-yybtn:hover {
    color: #e99896;
  }
  #zhiyin-yybtn:hover > .zhiyin-rqyy-msg {
    visibility: unset;
  }
  .zhiyin-rqyy-icon {
    font-size: 18px;
  }
  .zhiyin-rqyy-msg {
    visibility: hidden;
    font-size: 10px;
    color: #9784a0;
    position: absolute;
    padding: 5px;
    top: -5px;
    left: -60px;
    border-radius: 2px;
    background: white;
    transition: all 0.2s;
  }
  .zhiyin-rqyy-msg::after {
    content: " ";
    display: inline-block;
    width: 9px;
    height: 9px;
    background: white;
    position: absolute;
    top: 10px;
    transform: rotate(45deg);
    border-radius: 2px;
  }
</style>
<div class="zhiyin-rqyy-demo">
  <div class="zhiyin-rqyy-item">
    <div class="zhiyin-rqyy-date">
      <span class="zhiyin-rqyy-day">-</span>
      <span class="zhiyin-rqyy-month">-</span>
    </div>
    <div class="zhiyin-rqyy-text">
      <span class="itzhiyin-rqyy-yy">加载中...</span>
    </div>
    <div class="zhiyin-rqyy-btn">
      <div id="zhiyin-yybtn">
        <span class="zhiyin-rqyy-msg">换一句</span>
        <i class="fa fa-dot-circle-o zhiyin-rqyy-icon" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    var myDate = new Date();
    var mon = myDate.getMonth() + 1;
    var day = myDate.getDate();
    var newMon = mon < 10 ? "0" + mon : mon;
    var newDay = day < 10 ? "0" + day : day;
    var rqyyLock = true;
    var randRYY = parseInt(Math.random() * 10);
    $(".zhiyin-rqyy-item").css(
      "background-image",
      "url(https://www.itzhiyin.cn/rqyy-imgs/rqyy-bg-" + randRYY + ".png)"
    );
    $(".zhiyin-rqyy-day").html(newDay);
    $(".zhiyin-rqyy-month").html(newMon);
    $.extend({
      yyAjax: function () {
        $.ajax({
          // 链接
          url: "https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json",
          // 请求方法
          type: "GET",
          // 成功返回
          dataType: "json",
          success: function (e) {
            rqyyLock = false;
            var yiyanList = e.text.split("");
            var newYY = "";
            var yyIndex = 0;
            var timer = setInterval(function () {
              newYY += yiyanList[yyIndex];
              yyIndex++;
              if (yyIndex >= yiyanList.length) {
                clearInterval(timer);
                rqyyLock = true;
              }
              $(".itzhiyin-rqyy-yy").html(newYY);
            }, 150);
          }
        });
      }
    });
    $.yyAjax();
    $("#zhiyin-yybtn").click(function () {
      if (!rqyyLock) return;
      $.yyAjax();
    });
  });
  $(".zhiyin-rqyy-demo").parent().parent().css({
    padding: "0",
    overflow: "hidden"
  });
</script>

效果图

36.本站同款等级图标

将图片设置至子比主题的这里

1级：https://www.itzhiyin.cn/wp-content/uploads/2022/07/d42ca36784105145.gif

2级：https://www.itzhiyin.cn/wp-content/uploads/2022/05/564e1706b3f9.gif

3级：https://www.itzhiyin.cn/wp-content/uploads/2022/05/f92c12e0b274.gif

4级：https://www.itzhiyin.cn/wp-content/uploads/2022/05/5b984b3a7517.gif

5级：https://www.itzhiyin.cn/wp-content/uploads/2022/05/415b127485c3.gif

6级：https://www.itzhiyin.cn/wp-content/uploads/2022/05/61bdc7ae460e.gif

演示

37.本站同款网站底部添加横向网站信息统计模块

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.itzhiyin.cn
 */
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.itzhiyin.cn
 */
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("2021-10-20"))/86400);
echo "var tj_wdyx="."'$wdyx_time'";
?>
</script>
<!--统计信息函数横向优化版-->

2、在后台–外观–小工具–首页底部全宽度添加以下代码
此处记得查看代码中我注释的位置，修改相应的文件路径，或者直接搜索：【需修改文件】1-4，查看修改

<script src="//at.alicdn.com/t/font_2820512_foowmlcjyf.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.itzhiyin.cn/tj2.css"><!--需修改文件位置 1-->
<div class="textwidget custom-html-widget"><div id="itzhiyin-info-wg-mian">
  <div class="itzhiyin-info-item">
  
    <div class="itzhiyin-yxsj-item">
      <svg class="icon fa-2x" aria-hidden="true">
        <use xlink:href="#icon-009-shijianguanli"></use>
      </svg>
      <span class="itzhiyin-i-num"
        ><script type="text/javascript">
          document.write(tj_wdyx);
        </script></span>
      <p>运行时间</p>
    </div>
    
    <div class="itzhiyin-yhzs-item">
      <svg class="icon fa-2x" aria-hidden="true">
        <use xlink:href="#icon-yonghu"></use>
      </svg>
      <span class="itzhiyin-i-num"
        ><script type="text/javascript">
          document.write(tj_jstext);
        </script></span>
      <p>用户总数</p>
    </div>
    
    <div class="itzhiyin-llzs-item">
      <svg class="icon fa-2x" aria-hidden="true">
        <use xlink:href="#icon-liulan-5"></use>
      </svg>
      <span class="itzhiyin-i-num"
        ><script type="text/javascript">
          document.write(tj_view);
        </script></span
      >
      <p>浏览总数</p>
    </div>
    
    <div class="itzhiyin-wz-item">
      <div class="itzhiyin-wz-sty itzhiyin-wzzs-item">
        <svg class="icon fa-2x" aria-hidden="true">
          <use xlink:href="#icon-wenzhang"></use>
        </svg>
        <span class="itzhiyin-i-num"
          ><script type="text/javascript">
            document.write(tj_rzzs);
          </script></span
        >
        <p>文章总数</p>
      </div>
      
      <div class="itzhiyin-wz-sty itzhiyin-jrfb-item">
        <svg class="icon fa-2x" aria-hidden="true">
          <use xlink:href="#icon-dizhi"></use>
        </svg>
        <span class="itzhiyin-i-num"
          ><script src="https://pv.sohu.com/cityjson?ie=utf-8"></script><script type="text/javascript">
    document.write(returnCitySN["cip"])
    </script></span
        >
        <p>您的 IP 地址是</p>
      </div>
    </div>
    
    <div class="itzhiyin-sjcs-item">
      <div class="itzhiyin-sjcj-m">
        <span style="font-size: 30px">今天是</span>
        <div id="itzhiyin-date-text"></div>
        <div id="itzhiyin-week-text"></div>
        <div class="itzhiyin-meo-item">
          <img id="itzhiyin-meos" src="https://www.itzhiyin.cn/week/login.png" alt="emo" /><!--需修改文件位置 2-->
        </div>
        <div class="itzhiyin-sjcj-content">
          <span id="itzhiyin-fatalism"></span>
        </div>
      </div>
    </div>    
  <div class="itzhiyin-sjcs-item2"><iframe src="https://www.itzhiyin.cn/tkr/" width="290" height="290" frameborder="no"></iframe></div><!--需修改文件位置 3-->
  </div>
</div>
<script>
$(function () {
  var myDate = new Date();
  var year = myDate.getFullYear(); //获取当前年
  var mon = myDate.getMonth() + 1; //获取当前月
  var date = myDate.getDate(); //获取当前日
  var week = myDate.getDay();
  var weeks = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六"
  ];
  $("#itzhiyin-date-text").html(year + "年" + mon + "月" + date + "日"+ weeks[week]);
  if (week > 0 && week < 5) {
    $("#itzhiyin-fatalism").html("再坚持一下还有" + (5 - week) + "天就到周末啦！");
  } else if (week === 5) {
    $("#itzhiyin-fatalism").html("啊啊啊，明天就是周末啦！");
  } else {
    $("#itzhiyin-fatalism").html("今天是周末，好好休息一下吧！");
  }
  $("#itzhiyin-meos").attr(
    "src","https://www.itzhiyin.cn/week/week-" + week + ".webp"/*需修改文件位置 4*/
  );
});
$("#itzhiyin-info-wg-mian").parents(".zib-widget").css({
  padding: "0",
  background: "none"
});
</script></div>

3、下载下面我提供的源码文件直接上传到服务器，具体位置可自行决定，最后记得修改第二步骤中代码引用的位置即可

此处内容已隐藏，请评论后刷新页面查看.

效果预览

38.织音博客同款侧边栏评论样式

在自定义css代码里添加

/*首页评论*/
/*by：织音博客-www.itzhiyin.cn*/
.comment-mini-lists>div.posts-mini{border: 1px dashed #999999;border-radius: 10px;margin-top: 10px;}

演示

39.添加四框便捷模块

1.引入所需要的js CSS文件：

在我们的Wordpress网站的主题设置里的自定义头部HTML代码加以下三段引入代码，并保存。

<link rel="stylesheet" href="https://www.itzhiyin.cn/silan/shouyesige1.css">
<link rel="stylesheet" href="https://www.itzhiyin.cn/silan/shouyesige2.css">
<script type='text/javascript' src='https://www.itzhiyin.cn/silan/shouyesige.js'></script>

保存出现function(){return u(n),r.apply(this,arguments)}解决办法：https://www.itzhiyin.cn/219.html

2.创建HTML自定义代码：

进入Wordpress后台点击外观→小工具→自定义HTML代码，放到自己想要放的地方建议放在主内容顶部，然后粘贴下面的代码即可。

<!--
将下方代码复制粘贴到你需要的地方
链接换成自己的
复制开始
 -->
 <div class="ads-box">
  <div class="home-first">
    <div class="container hide_sm">
      <div class="row ron">
        <div class="col-1-4">
          <div class="hf-widget hf-widget-1 hf-widget-software">
            <h3 class="hf-widget-title">
              <svg class="ydicon" aria-hidden="true">
                <use xlink:href="#icon-huiyuan"></use>
              </svg>
              <a href="https://www.itzhiyin.cn/"
                target="_blank">会员服务</a><span>会员专属贴心服务</span>
            </h3>
            <div class="hf-widget-content">
              <div class="scroll-h">
                <ul>
                  <li><a href="https://www.itzhiyin.cn/" target="_blank">
                      <svg class="kuai" aria-hidden="true">
                        <use xlink:href="#icon-dingyue"></use>
                      </svg><span>升级会员</span></a></li>
                  <li><a href="https://www.itzhiyin.cn/" target="_blank">
                      <svg class="kuai" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi"></use>
                      </svg><span>消息订单</span></a></li>
                  <li><a href="https://www.itzhiyin.cn/" target="_blank">
                      <svg class="kuai" aria-hidden="true">
                        <use xlink:href="#icon-zhinan"></use>
                      </svg><span>热门标签</span></a></li>
                  <li><a href="https://www.itzhiyin.cn/" target="_blank">
                      <svg class="kuai" aria-hidden="true">
                        <use xlink:href="#icon-tougaofabu"></use>
                      </svg><span>投稿发文</span></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-1-4">
          <div class="hf-widget hf-widget-2">
            <h3 class="hf-widget-title">
              <svg class="ydicon" aria-hidden="true">
                <use xlink:href="#icon-tishi"></use>
              </svg>
              <a href="https://www.itzhiyin.cn/" target="_blank">广告服务</a><span>精品免费广告位</span>
            </h3>
            <div class="hf-widget-content">
              <div class="no-scroll hf-tags">
                <a class="style_orange" href="https://www.itzhiyin.cn/" target="_blank"><span>域名出售</span></a>
                <a class=""
                  href="https://www.itzhiyin.cn/"
                  target="_blank"><span>特价服务器</span></a>
                <a class="" href="https://www.itzhiyin.cn/" target="_blank"><span>来这看看</span></a>
                <a class="" href="https://www.itzhiyin.cn/" target="_blank"><span>来这看看</span></a>
                <a class="" href="https://www.itzhiyin.cn/" target="_blank"><span>来这看看</span></a>
                <a class="" href="https://www.itzhiyin.cn/" target="_blank"><span>来这看看</span></a>
                <a class="" href="https://www.itzhiyin.cn/" target="_blank"><span>来这看看</span></a>
                <a class="" href="https://www.itzhiyin.cn/" target="_blank"><span>来这看看</span></a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-1-4">
          <div class="hf-widget hf-widget-1 hf-widget-hot-cats">
            <h3 class="hf-widget-title">
              <svg class="ydicon" aria-hidden="true">
                <use xlink:href="#icon-kuaijiedaohang-ceping"></use>
              </svg>
              <a href="https://www.itzhiyin.cn/" target="_blank">快捷导航</a><span>精品站长资源教程</span>
            </h3>
            <div class="hf-widget-content">
              <div class="scroll-h">
                <ul>
                  <li><a href="https://www.itzhiyin.cn/" target="_blank">
                      <i class="hhicon iconfont icon-moban"></i><span>网页模板</span></a></li>
                  <li><a href="https://www.itzhiyin.cn/" target="_blank">
                      <i class="hhicon iconfont icon-yuanma"></i><span>精品源码</span></a></li>
                  <li><a href="https://www.itzhiyin.cn/" target="_blank">
                      <i class="hhicon iconfont icon-jiaocheng"></i><span>站长教程</span></a></li>
                  <li><a href="https://www.itzhiyin.cn/" target="_blank">
                      <i class="hhicon iconfont icon-moban"></i><span>免费主题</span></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-1-4">
          <div class="hf-widget hf-widget-4">
            <h3 class="hf-widget-title">
              <svg class="ydicon" aria-hidden="true">
                <use xlink:href="#icon-dongtai"></use>
              </svg> <a href="https://www.itzhiyin.cn/" target="_blank">最新活动</a><span>注册会员享福利</span>
            </h3>
            <div class="hf-widget-content">
              <div class="scroll-h">
                <ul>
                  <li>
                    <h3><a href="https://www.itzhiyin.cn" target="_blank"> <i
                          class="icon-time"></i> <span>本站现阶段免费升级永久会员</span><em>立即升级</em></a>
                    </h3>
                  </li>
                  <li>
                    <h3><a href="https://www.itzhiyin.cn/" target="_blank"> <i
                          class="icon-time"></i> <span>注册升级会员得免费广告位</span><em>免费注册</em></a>
                    </h3>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--
复制结束
 -->

使用效果/效果截图

40.子比主题设置网站的背景为图片背景

/***日间主题模式***/
body {
    background-image: url("/**这里改为你自己的图片地址**/");
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/***夜间主题模式***/
.dark-theme {
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("/**这里改为你自己的图片地址**/");
    background-size: cover;
}

效果展示

提示：建议夜间模式下不使用背景图片

推荐照片（织音资源网使用）：

日间：https://www.wjnzy.com/wp-content/uploads/2023/01/37add92f88110625-scaled.jpg

夜间：https://www.wjnzy.com/wp-content/uploads/2023/01/360849eb9d110857-scaled.jpg

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

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

1 本网站名称：织音博客
2 本站永久网址：https://www.itzhiyin.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ3402674724进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
7本站所有原创内容采用知识共享署名4.0国际许可协议进行许可,勿将我们的作品擅自更改、去除署名。《著作权法》亦规定署名权是不可转让的

THE END