WordPress⼦⽐主题添加底部统计信息模块⼩⼯具WordPress ⼦⽐主题添加底部统计信息模块⼩⼯具
⾷⽤教程
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获取今⽇发布⽂章数量
*Aymao
*/
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-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-04-29"))/86400);
echo"var tj_wdyx="."'$wdyx_time'";
>
</script>
<!--调⽤信息代码结束-->
注:函数运⾏⽇期2020-3-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" >⽴即加⼊</a>
<p>加⼊暗影猫,快速获取优质IT资源!</p>
</div>
</div>
</div>
</div>
borderbox<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: to p;}/*背景图*/#nuandao .siteCount{position: relative;padding: 60px 0;background:url(img.aymao/2021/04/20210430075814881.jpg) center cen ter / 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;}#nuan dao .siteCount ul li{width: 20%;color: #fff;text-align: center;}/*模块*/#nuandao .siteCount ul li span{font-size: 48px;font-family: Arial;}#nuandao .siteCount u l li b{display: block;font-weight: normal;font-size: 14px;}/*按钮*/#nuandao .siteCount .join-vip{text-align: center;color: #fff;margin-top: 30px;}#nuandao .sit eCount .join-vip a{display: inline-block;border: 0;border-radius: 5px;transition: all 0.3s;padding: 10
px 30px;font-size: 15px;letter-spacing: 0.5px;backgro und-color:var(--primary-color);background-image:-webkit-gradient( linear, left top, right top, from(#006eff), to(#13adff));background-image:-webkit-line ar-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" >
<div class="siteCount">
<div class="wrapper">
<div class="p-wh">
<ul>
<li>
<p><svg class="icon fa-2x" aria-hidden="true"><use 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 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 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 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 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 >欢迎光临暗影猫博客,快速获取优质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(img.aymao.c om/2021/04/20210430075814881.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: 1 00%;width: 100%;background:rgba(0, 0, 0, 0.3);position: absolute;top: 0;left: 0;}}
</style>
<script>
//ElementById("nuandao").parentNode.parentNode.style.backgroundColor="transparent"
</script>
<!--信息统计结束-->

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。