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/