WP 如何添加网站边栏统计小工具

WP 如何添加网站边栏统计小工具

1 预览

先来看下效果,如下所示:

图片[1]-WP 如何添加网站边栏统计小工具-零度非安全
博客统计边栏小工具美化版

这是一个 WP 的边栏统计小工具,包括文章个数、评论个数、最后更新时间、建站天数、服务器连续运行时间等。

2 如何实现

首先需要在主题的根目录下新建一个 WordPressRunningInfoStat.php 文件,将以下代码拷贝到此文件中:

<?php
// 定义小工具的类 WordPressRunningInfoStat
class WordPressRunningInfoStat extends WP_Widget{
 
	function WordPressRunningInfoStat(){
		// 定义小工具的构造函数
		$widget_ops = array('classname' => 'widget_blogstat', 'description' => '显示博客的统计信息');
		$this->WP_Widget(false, '博客统计', $widget_ops);
	}
	
	function form($instance){
		// 表单函数,控制后台显示
		// $instance 为之前保存过的数据
		// 如果之前没有数据的话,设置默认量
		$instance = wp_parse_args(
			(array)$instance,
			array(
				'title' => '博客统计',
				'establish_time' => '2016-09-28' 
			)
		);
		$title = htmlspecialchars($instance['title']);
		$establish_time = htmlspecialchars($instance['establish_time']);
		// establish_time => 建站日期
		
		// 表格布局输出表单
		$output = '<tr><td>标题</td><td>';
		$output .= '<input id="'.$this->get_field_id('title') .'" name="'.$this->get_field_name('title').'" type="text" value="'.$instance['title'].'" />';
		$output .= '</td></tr><tr><td>建站日期:</td><td>';   
		$output .= '<input id="'.$this->get_field_id('establish_time') .'" name="'.$this->get_field_name('establish_time').'" type="text" value="'.$instance['establish_time'].'" />';   
		$output .= '</td></tr></table>';  
		echo $output;   
	}
	
	function update($new_instance, $old_instance){
		// 更新数据的函数
		$instance = $old_instance;
		// 数据处理
		$instance['title'] = strip_tags(stripslashes($new_instance['title']));
		$instance['establish_time'] = strip_tags(stripslashes($new_instance['establish_time']));
		return $instance;
	}
	
	function widget($args, $instance){
		extract($args); //展开数组
		$title = apply_filters('widget_title',empty($instance['title']) ? ' ' : $instance['title']);
		$establish_time = empty($instance['establish_time']) ? '2013-01-27' : $instance['establish_time'];
		echo $before_widget;
		echo $before_title . $title . $after_title;
		echo '<div style="margin-top: 15px;"><section class="widget widget_categories wrapper-md clear"><div class="text" style="text-align: center; font-weight: bold;"><img class="wp-smiley ls-is-cached lazyloaded" style="border-top-left-radius: 8px; border-top-right-radius: 8px;" title="太阳" src="https://zeronohacker.com/pic/网站右侧统计.gif" alt="网站倒计时" data-src="https://zeronohacker.com/pic/网站右侧统计.gif"><center><br>
<span style="color: #e80017;">2</span><span style="color: #d1002e;">0</span><span style="color: #ba0045;">2</span><span style="color: #a3005c;">3</span><span style="color: #8c0073;">年</span><span style="color: #75008a;"> – </span><span style="color: #5e00a1;">新</span><span style="color: #4700b8;">年</span><span style="color: #3000cf;">倒</span><span style="color: #1900e6;">计</span><span style="color: #0200fd;">时</span></center></div><div>
<div class="text" style="text-align: center; padding-bottom: 10px;"><span id="t_d1" style="font-weight: bold;"></span> <span id="t_h1" style="font-weight: bold;"></span> <span id="t_m1" style="font-weight: bold;"></span> <span id="t_s1" style="font-weight: bold;"></span></div>
</div><script type="text/javascript">
setInterval(getRTime,1000);</script><ul class="list-group">';
		$this->efan_get_blogstat($establish_time);
		echo '</ul></section></div>';
		echo $after_widget;
	}
	
	function efan_get_blogstat($establish_time /*, $instance */){
		// 相关数据的获取
		global $wpdb;
		$count_posts = wp_count_posts();
		$published_posts = $count_posts->publish;
		$draft_posts = $count_posts->draft;
		$comments_count = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments");
		$time = floor((time()-strtotime($establish_time))/86400);
		$count_tags = wp_count_terms('post_tag');
		$count_pages = wp_count_posts('page');
		$page_posts = $count_pages->publish;
		$count_categories = wp_count_terms('category'); 
		$link = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->links WHERE link_visible = 'Y'"); 
		$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");
		$last = $wpdb->get_results("SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'post' OR post_type = 'page') AND (post_status = 'publish' OR post_status = 'private')");
		$last = date('Y-m-d', strtotime($last[0]->MAX_m));
		$total_views = $wpdb->get_var("SELECT SUM(meta_value+0) FROM $wpdb->postmeta WHERE meta_key = 'views'");  
 
		$uptime = trim(file_get_contents('/proc/uptime'));
		$uptime = explode(' ', $uptime);
		$uptime = $uptime[0];
		$uptime = round($uptime / 86400, 2);
 
		$this->statItem('#icona-jiangbeiyingjiashenglizhechengjiu', '文章数量', $published_posts);
		$this->statItem('#iconpinglun', '评论数量', $comments_count);
		$this->statItem('#iconbiaoqian', '标签数量', $count_tags);
		$this->statItem('#iconriqi', '建站日期', $establish_time);
		$this->statItem('#icona-yangguangliangdu', '累计安全运行', $time . ' 天');
		$this->statItem('#iconzhongqi', '自上次重启后持续运行', $uptime . ' 天');
		$this->statItem('#iconzuixing-82', '最后更新', $last);
	}
 
	function statItem($fa, $desc, $data) {
		echo '<li class="list-group-item">';
		echo '<svg class="icon" aria-hidden="true"><use xlink:href="' . $fa . '"></use></svg>';
		echo '<span class="badge pull-right">' . $data . '</span>';
		echo ' ' . $desc. ' ';
		echo '</li>';
	}
}
 
function WordPressRunningInfoStat(){
	// 注册小工具
	register_widget('WordpressRunningInfoStat');
}
 
add_action('widgets_init','WordpressRunningInfoStat');
 
?>

完成后打开主题根目录下的 functions.php,可能有的收费主题此文件已加密,一般主题作者会留出位置给用户自定义,比如本站用的子比主题,是直接可以在 functions.php 里加,但主题作者建议用户自己去新建 func.php 文件,在里面添加自己的 php 代码,好了,废话不多说,在 functions.php 的 ?> 前添加 include("WordPressRunningInfoStat.php"); (注意文件名写自己命名的),完成以上操作之后,在 WP 后台中的外观 -> 小工具中会多出一个博客统计,如下所示:

图片[2]-WP 如何添加网站边栏统计小工具-零度非安全
博客统计小工具

只需要将小工具添加到需要放置页面的边栏中即可,如下所示:

图片[3]-WP 如何添加网站边栏统计小工具-零度非安全
博客统计设置

小工具可设置建站日期,注意 php 代码中的阿里 iconfont 图标不显示的话需要自己在源码处修改,这里不过多提示。需要用到的素材:

图片[4]-WP 如何添加网站边栏统计小工具-零度非安全
素材

小工具倒计时 js 代码,这段 js 代码可以在两个地方添加,二选一,一是添加到上面 php 代码 <?php 前面 (不推荐),二是添加到主题后台的自定义头部代码处,为什么不把它添加到自定义 js 处,是因为自定义 js 处是在底部,是等网站内容加载完才加载,如果添加到底部处倒计时不会生效,所以需要添加到头部,优于博客统计边栏小组件先加载,代码如下:

<script>
function getRTime(){
    var EndTime= new Date('2023/01/22 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_d1").innerHTML = d + " 天";
    document.getElementById("t_h1").innerHTML = h + " 时";
    document.getElementById("t_m1").innerHTML = m + " 分";
    document.getElementById("t_s1").innerHTML = s + " 秒";
}
</script>

再来点样式稍微再美化一下:

/*给博客统计加阴影、四角变圆滑、背景变透明*/
#wordpressrunninginfostat-2 section {
    box-shadow:0 10px 10px 5px #bbbdc1;
    border-radius:22px;
}
.list-group-item:first-child{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.list-group-item:last-child{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.list-group-item{
    background-color:transparent;
}
/*数量底色调成蓝色*/
.badge {
    background-color: #814cff;
    font-weight: 100;
}

3 修改边栏小工具 h3 标题

将以下代码添加到自定义 CSS 中 (只适合子比主题):

/*边栏小工具h3标题美化*/
.zib-widget>h3 {
    color: var(--main);
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 15px;
    position: relative;
    padding: 0 15px 0 28px;
}
.zib-widget>h3:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 20px!important;
    height: 20px!important;
    background: url(https://zeronohacker.com/pic/h3.png) no-repeat center;
    box-shadow: none;
    background-size: 100% !important;
}
© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 共3条

请登录后发表评论