WordPress Widget开发简易教程

WordPress中的Widget是很有用的一个东西，可以显示任意的内容，摆放在页面的任意位置，方便的控制显示与隐藏等。现在就来看看如何自己定义一个widget。这里以实现博客统计为目标（统计文章、页面、评论等的数量）。

首先，在主题下边新建自己的PHP文件，比如“blog_count_widget.php”，这样子一眼就看出来是一个widget，并且知道是干什么的。在这个文件中，定义我们需要的类，姑且就叫”Blog_Count_Widget”，这个类需要继承自WP_Widget。我们需要重写或实现的方法至少得有：__construct()+widget()+form()。

__construct($id_base, $name, $args)是构造函数，需要执行父类的构造函数并且传递三个参数：

• $id_base，widget的ID，一般建议留空程序自已处理
• $name，名称，会在后台的小工具页面显示，这里就叫“博客统计”
• $args，其他的一些参数，比如有描述description，会在后台小工具页面够下边显示，一般是一些介绍性文字。这里就写“简单统计博客的文章、分类、评论等”。其他还有一些宽、高之类的，一般不用设置。

form($instance)是展示将小工具依附到边栏(sidebar)后的编辑表单，$instance是表单项信息，注意刚依附过去时是没有信息的，添加保存后就有信息了，因此需要为表单项给默认值。

widget($args, $instance)方法是前台输出内容：

• $args，是小工具依附到的某个边栏(sidebar)的信息，如把小工具依附到了侧边栏，这$args便是这侧边栏的信息。
• $instance，则是表单项信息。根据这个信息取相应的数据并输出到页面。

以下是这个简易博客统计的实现代码，大部分的东西WordPress都帮我们实现了，这也正是它受欢迎的地方。

class Blog_Count_Widget extends WP_Widget
{
	private static $_option_title = array(
			'show_posts' => '显示文章统计',
			'show_pages' => '显示页面统计',
			'show_tags' => '显示标签统计',
			'show_terms' => '显示分类法统计',
			'show_comments' => '显示评论统计',
	);

	public function __construct()
	{
		parent::__construct(
				false,
				'博客统计',
				array('description' => '简单统计博客的文章、页面、标签、分类法、评论')
		);
	}

	public function widget($args, $instance)
	{
		$HTML = sprintf('<div id="%s" class="widget widget-blog-count">', $args['widget_id']);
		$HTML .= sprintf('<div class="widget-top"><h4>%s</h4><div class="stripe-line"></div></div>', $instance['title']);
		$HTML .= '<div class="widget-container">';
		if (!empty($instance['show_posts']) && $instance['show_posts'] === '1')
		{
			$postsCount = wp_count_posts('post');
			$HTML .= '<div><h3>文章统计</h3>';
			$HTML .= '<div class="count-row"><div><strong>全部：</strong>'.(($postsCount->draft) + ($postsCount->publish) + ($postsCount->private)).'</div><div><strong>已发布：</strong>'.$postsCount->publish.'</div></div>';
			$HTML .= '<div class="count-row"><div><strong>草稿：</strong>'.$postsCount->draft.'</div><div><strong>私有：</strong>'.$postsCount->private.'</div></div>';
		}
		if (!empty($instance['show_pages']) && $instance['show_pages'] === '1')
		{
			$postsCount = wp_count_posts('page');
			$HTML .= '<h3>页面统计</h3>';
			$HTML .= '<div class="count-row"><div><strong>全部：</strong>'.(($postsCount->draft) + ($postsCount->publish) + ($postsCount->private)).'</div><div><strong>已发布：</strong>'.$postsCount->publish.'</div></div>';
			$HTML .= '<div class="count-row"><div><strong>草稿：</strong>'.$postsCount->draft.'</div><div><strong>私有：</strong>'.$postsCount->private.'</div></div>';
		}
		if (!empty($instance['show_terms']) && $instance['show_terms'] === '1')
		{
			$HTML .= '<p><strong>分类总数：</strong>'.wp_count_terms('category').'</p>';
		}
		if (!empty($instance['show_tags']) && $instance['show_tags'] === '1')
		{
			$HTML .= '<p><strong>标签总数：</strong>'.wp_count_terms('post_tag').'</p>';
		}
		if (!empty($instance['show_comments']) && $instance['show_comments'] === '1')
		{
			$HTML .= '<p><strong>评论总数：</strong>'.wp_count_comments()->total_comments.'</p>';
		}

		echo $HTML.'</div></div>';
	}

	public function form($instance)
	{
		$defaults = array_merge(array('title' => ''), array_fill_keys(array_keys(self::$_option_title), 0));

		$instance = wp_parse_args((array)$instance, $defaults);

		$HTML = sprintf(
				'<p><label for="%s">标题：<input class="widefat" type="text" name="%s" id="%s" value="%s"></label></p>',
				$this->get_field_id('title'),
				$this->get_field_name('title'),
				$this->get_field_id('title'),
				$instance['title']
		);
		$HTML .= $this->_get_option_checkbox($instance, self::$_option_title);
		echo $HTML;
	}

	private function _get_option_checkbox($instance, array $field_title)
	{
		$HTML = '';
		foreach ($field_title as $field => $title )
		{
			$HTML .= sprintf(
					'<p><input type="checkbox" name="%s" id="%s" class="checkbox" value="1" %s/><label for="%s">%s</label></p>',
					$this->get_field_name($field),
					$this->get_field_id($field),
					$instance[$field] == 1 ? 'checked="checked"' : '',
					$this->get_field_id($field),
					$title
			);
		}
		return $HTML;
	}
}

function blog_count_widget()
{
	register_widget('Blog_Count_Widget');
}
function blog_count_css()
{
?>
<style>
	.widget-blog-count h3 {margin-top: 10px;margin-bottom: 5px}
	.widget-blog-count h3:first-of-type {margin-top: 0}
	.widget-blog-count p {padding-top: 1em;padding-bottom: 0}
	.widget-blog-count .count-row {display: inline-block;width: 50%}
</style>
<?php
}
add_action('widgets_init', 'blog_count_widget');
add_action('wp_head', 'blog_count_css', 100);

参考文档：
http://codex.wordpress.org/zh-cn:%E5%B0%8F%E5%B7%A5%E5%85%B7%E6%8E%A5%E5%8F%A3
http://www.makeuseof.com/tag/how-to-create-wordpress-widgets/