添加文章统计信息美化框小工具-黔客侠

把下面的代码放入zibll/header.php 这个文件里（必须）


	<!--调用信息代码-->
<!--底部统计用的代码-->
<script type="text/javascript" >
<?php
//用户总数
/* https://www.qkexia.com/*/
$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");echo "var xbnb_jstext="."'$users'";
?>
</script>
<script type="text/javascript" >
<?php
/*
 * WordPress获取今日发布文章数量
 /* https://www.qkexia.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 xbnb_24h="."'$post_24h'";
?>
</script>
<script type="text/javascript" >
<?php
/*
 * WordPress整站文章访问计数
 /* https://www.qkexia.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 xbnb_view="."'$post_view'";
?>
</script>
<script type="text/javascript" >
<?php
//日志总数
/* https://www.qkexia.com/*/
$count_posts = wp_count_posts();
$published_posts =$count_posts->publish;
echo "var xbnb_rzzs="."'$published_posts'";
?>
</script>
<script type="text/javascript" >
<?php
//稳定运行
/* https://www.qkexia.com/*/
$wdyx_time = floor((time()-strtotime("2020-04-29"))/86400);
echo "var xbnb_wdyx="."'$wdyx_time'";
?>
</script>
<!--调用信息代码结束-->

然后再把下面的图片放入这个目录zibll/img

（这里的目录可以自定义，是演示效果的图片，不喜欢可以替换成自己的），

图片已经打包好了，zip解压到这个目录下即可

图片.zip

下载

zip文件

15.4K

最后到外观/小工具/区块 添加下面的代码即可

<!--信息统计开始 www.qkexia.com-->
<div class="tongji">
<section class="cards pcbdmapss">
    <div class="cardhu card--oil">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
               <img src="/logo/%E4%BC%9A%E5%91%98.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><strong><script type="text/javascript">
document.write(xbnb_jstext);
</script></strong></span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-icon">
                <img src="/logo/img/%E4%BC%9A%E5%91%98.png">
            </div>
            <div class="card__stuff-text">网站用户数</div>
        </div>
    </div>
    <div class="cardhu card--tree">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="/logo/%E6%95%99%E7%A8%8B.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><script type="text/javascript">
document.write(xbnb_rzzs);
</script></span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-icon">
                <img src="/logo/%E6%95%99%E7%A8%8B.png">
            </div>
            <div class="card__stuff-text"> 所有文章</div>
        </div>
    </div>
    <div class="cardhu card--water">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="/logo/时间.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><script type="text/javascript">
document.write(xbnb_wdyx);
</script></span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-icon">
                <img src="/logo/时间.png">
            </div>
            <div class="card__stuff-text"> 建站天数</div>
        </div>
    </div>
    <div class="cardhu card--oil1">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="/logo/写文章.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><script type="text/javascript">
document.write(xbnb_24h);
</script></span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-icon">
                <img src="/logo/写文章.png">
            </div>
            <div class="card__stuff-text"> 今日更新</div>
        </div>
    </div>
    <div class="cardhu card--tree2">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="/logo/renwu.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big">+<script type="text/javascript">
          document.write(xbnb_view);
        </script></span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-icon">
                <img src="/logo/renwu.png">
            </div>
            <div class="card__stuff-text"> 文章浏览</div>
        </div>
    </div>
    <div class="cardhu card--water3">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img style="animation: 10s linear 0s normal none infinite running fa-spin;" src="/logo/晴.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><p id="ptime"></p></span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-icon">
                <img style="animation: 10s linear 0s normal none infinite running fa-spin;" src="/logo/晴.png">
            </div>
            <div class="card__stuff-text">   实时时间</div>
        </div>
    </div>
</section>
<style>
@media (max-width: 800px){.tongji{display: none;}}
section1 {
  width: 97vw;
  max-width: 100%;
  min-width: 58.9rem;
  margin: 0 0px;
}
.tongji{
        margin-bottom: 20px;
}
.cards {
  padding-top: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.cardhu {
  width: 14%;
    height: 10rem;
    background-color: var(--main-bg-color);
    border-radius: 15px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: var(--main-color);
    font-size: 0.3rem;
    font-weight: 800;
    letter-spacing: 0.05rem;
    box-shadow: 0 0rem 2rem #aac1c7;
}

.card__svg-container {
  height: 25%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.card__svg-wrapper {
  width: 5rem;
}
.card__count-container {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.card__count-text {
 /* -webkit-transform: translate(0, -0.5rem);
          transform: translate(0, -0.5rem);*/
}
.card__count-text--big {
  text-transform: uppercase;
  font-size: 2rem;
  /*font-weight: 300;*/
}
.card__stuff-container {
  margin: 0 auto;
  width: 90%;
  height: 35%;
  border-top: 2px solid #eabbbc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.card__stuff-icon, .card__stuff-text {
  display: inline-block;
}
.card__stuff-icon {
  width: 1.5rem;
  height: 1.3rem;
  -webkit-transform: translate(0, -0.3rem);
          transform: translate(0, -0.3rem);
}
.card__stuff-text {
  text-transform: uppercase;
  margin-left: .4rem;
  -webkit-transform: translate(0, -0.2rem);
          transform: translate(0, -0.2rem);
font-size: 1.2rem;
}
.cardhu:after {
  content: "";
    display: block;
    position: absolute;
    top: -125px;
    left: 4%;
    width: 75%;
    height: 0.625rem;
    -webkit-transform: translate(1.5rem, 22.5rem);
    transform: translate(1.5rem, 22.5rem);
}
.card--oil:after {
  background-image: -webkit-radial-gradient(top, rgb(250 194 7), rgba(179, 62, 62, 0) 70%);

}
.card--tree:after {
  background-image: -webkit-radial-gradient(top, rgb(255 187 187), rgba(0, 0, 0, 0) 70%);

}
.card--water:after {
  background-image: -webkit-radial-gradient(top, rgb(255 85 88), rgba(0, 0, 0, 0) 70%);

}
.card--oil1:after {
  background-image: -webkit-radial-gradient(top, rgb(131 238 156), rgba(0, 0, 0, 0) 70%);

}
.card--tree2:after {
  background-image: -webkit-radial-gradient(top, rgb(238 131 150), rgba(0, 0, 0, 0) 70%);

}
.card--water3:after {
  background-image: -webkit-radial-gradient(top, rgb(254 255 0), rgba(0, 0, 0, 0) 70%);

}</style>
<script>
 var mytime = setInterval(function () {
 getTime();
 },1000);
 function getTime() {
 var d = new Date();
 var t = d.toLocaleTimeString();
 document.getElementById("ptime").innerHTML = t;
 }
 </script>
</div><!--信息统计结束 www.qkexia.cn-->

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

本站代码模板仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！

版权声明 1 本网站名称：黔客侠
2 本站永久网址：www.qkexia.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系邮箱：admin@zunecs.com进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

WordPress教程主题美化建站教程技术交流

添加文章统计信息美化框小工具

请登录后发表评论