wordpress小工具添加恋爱天数

之前发表过一篇为博客添加恋爱天数小工具（如下），但是实际使用过程中存在bug，比如夜间模式不会变黑等，昨天看到博友发表的WordPress如何添加“博客统计”信息，受到启发，把这个改成恋爱天数不就行了嘛，所以出现了此文章。

Previous Next

1、复制下面代码并创建 lovetime.php 文件。

<?php


// 定义小工具的类 lovetime
class lovetime extends WP_Widget{

	function lovetime(){
		// 定义小工具的构造函数
		$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' => '2018-05-13', 
				'boyimage' => 'https://api.gksir.top/zhutitupian/boytx.png',
				'girlimage' => 'https://api.gksir.top/zhutitupian/girltx.png'
			)
		);
		$title = htmlspecialchars($instance['title']);
		$establish_time = htmlspecialchars($instance['establish_time']);
		// establish_time => 恋爱天数
		$boyimage = htmlspecialchars($instance['boyimage']);
		$girlimage = htmlspecialchars($instance['girlimage']);
		
		// 表格布局输出表单
		$output = '<table>';
		$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><tr><td>男生头像：</td><td>';   
		$output .= '<input id="'.$this->get_field_id('boyimage') .'" name="'.$this->get_field_name('boyimage').'" type="text" value="'.$instance['boyimage'].'" />'; 
		$output .= '</td></tr><tr><td>女生头像：</td><td>';   
		$output .= '<input id="'.$this->get_field_id('girlimage') .'" name="'.$this->get_field_name('girlimage').'" type="text" value="'.$instance['girlimage'].'" />';
		$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']));
		$instance['boyimage'] = strip_tags(stripslashes($new_instance['boyimage']));
		$instance['girlimage'] = strip_tags(stripslashes($new_instance['girlimage']));
		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'];
		$boyimage = empty($instance['boyimage']) ? 'https://api.gksir.top/zhutitupian/boytx.png' : $instance['boyimage'];
		$girlimage = empty($instance['girlimage']) ? 'https://api.gksir.top/zhutitupian/girltx.png' : $instance['girlimage'];
		echo $before_widget;
		echo $before_title . $title . $after_title;
		echo '<div style="margin-top: 15px;"><section class="widget widget_categories wrapper-md clear"><ul class="list-group">';
		$this->efan_get_blogstat($boyimage,$girlimage,$establish_time);
		echo '</ul></section></div>';
		echo $after_widget;
	}
	
	function efan_get_blogstat($boyimage,$girlimage,$establish_time /*, $instance */){
		// 相关数据的获取
		$time = floor((time()-strtotime($establish_time))/86400); 

		$this->statItem($boyimage,$girlimage, '一起走过', $time . ' 天');
	}

	function statItem($boy, $girl, $desc, $data) {
		
		echo '<div id="lovexhj"><div id="lovexhjImage">';
        //<!-- 左边的头像 -->
        echo '<img src="' . $boy . '" alt="love">';
        //<!-- 中间的图片 -->
        echo '<img src="https://cdn.nutssss.cn/wp-content/uploads/2020/02/1582858549-lovexhjlogo.gif" alt="love">';
        //<!-- 右边的头像 -->
        echo '<img src="' . $girl . '" alt="love"></div>';
        echo '<br/><div id="lovetime"><p>' . $desc . $data. '</p></div></div>';
	}
}

function lovetime(){
	// 注册小工具
	register_widget('lovetime');
}
add_action('widgets_init','lovetime');
?>

2、放到主题的根目录下。

3、在主题里的 function.php 函数里 ?>前 添加 include(“lovetime.php”);

4、到“后台——外观——小工具”中添加“恋爱天数”小工具。

5、 这个css代码放在主题自定义css里就行 。

/*相恋时间夜间模式*/
body.night #htmer_time {
      color:#738192;
}
/*相恋时间夜间模式结束*/

/*相恋时间*/
#lovetime {
    text-align: center;
    font-size: 16px;
    color:#738192;
}
#lovexhj {
    width: 100%;
    height: 100px;
    text-align: center;
    font-size: 1rem;
}
#lovexhjImage {
    width: 220px;
    margin: 0 auto;
}
#lovexhj img {
    width: 60px;
    border-radius: 50%;
}
/*相恋时间结束*/