wordpress主题制作中对边栏的处理一直是我们比较烦恼的，我们希望边栏的变化更多更复杂，今天我们就来具体讲解下wordpress边栏小工具的制作。

一、让你的主题显示小工具

有些相当简单的主题你会发现后台小工具功能竟然没有打开，边栏自然无法自己定义了。那么怎么让自己的主题支持小工具功能，前台又如何调用后台拖拽的小工具呢？如何让你的小工具多几个，可以自由安排小工具的位置呢？

1、让你的主题支持小工具功能

在新制作的主题文件functions.php中加入下面这段代码（注意，下文的代码均加入到该文件中，后文不提）：

if(function_exists('register_sidebar')){
register_sidebar(array(
'name'=>'首页边栏',
'id' => 'home-sidebar',
'description' => '',
'before_widget' => '<div id="%1$s">',
'after_widget' => '<div></div></div>',
'before_title' => '<div><h3>',
'after_title' => '</h3></div>',
));
}

这样，你进入后台小工具页面的时候就会看到一个名称叫“首页边栏”的小工具挂件区，在这个区域内你可以放置多个小工具，同时在前台可以调用这个小工具区。（说明：前台调用的只能是工具区，而不是某个特定的小工具。）

这些字段我想你应该很容易从其英文名称中得知其用途，name指小工具挂件区的名称，id是等下在前台调用时要用到的挂件区标志，description是该挂件区的描述，后台中可以看到。before_widget/after_widget是前台显示每个小工具时放置在每一个小工具前后的html代码，before_title/after_title则是小工具标题前后的html代码。

到这里，在后台拖拽几个小工具到这个挂件区吧。

2、前台把小工具显示出来

我们用下面的代码再前台调用后台设置好的挂件区：

<?php if(is_active_sidebar('home-sidebar'))dynamic_sidebar('home-sidebar'); ?>

前文已经说到，我们将前文定义的挂件区id作为参数给dynamic_sidebar()，如果在前面你定义了多个id不同的挂件区，那么可以在前台修改这些参数，从而调用不同的挂件区，例如在首页调用id=home-sidebar的挂件区，在内容页调用id=post-sidebar挂件区。当然，为了让主题更完整，你应该考虑当挂件区没有放小工具的时候的情况，只需要加入else的情况即可。

通过上文，你的主题已经可以很完美的实现挂件的调用、显示，在不同的位置，不同的页面显示不同的挂件了。

二、自己制作一个小工具实现特定用途

wordpress默认的小工具虽然已经够用，但我们还是希望能增加一些新的小工具，例如调用随机文章的小工具，让我可以在首页边栏中间位置显示出来。虽然我们很多主题将自己编制的函数放置到主题文件中，但这样会使该区域的内容固定，不能让这个随机文章区域实现自我安排，还是不爽的，因此我们进行下面的工作，让我的随机文章功能成为一个小工具，可以在后台拖拽放置到特定位置。下文以我制作一个带头像评论列表为例，但中间缺失了文章数等，这部分请参看这篇文章。

1、所有代码提前一览

我们将所有代码先列出来，放置到functions.php中，读者可以在读代码过程中自然领会怎么设计自己的小工具。

//添加最新评论小工具，需要插件wp-recentcomments支持，显示的内容在插件设置中设置，下面的函数只负责将评论插件转化为挂件，可以在小工具中自由放置
class RecentCommentsWidget extends WP_Widget
{
/*
** 构造函数
** 声明一个数组$widget_ops，用来保存类名和描述，以便在控制面板正确显示工具信息
** $control_ops 是可选参数，用来定义小工具在控制面板显示的宽度和高度
** 最后是关键的一步，调用WP_Widget来初始化我们的小工具
*/
function RecentCommentsWidget(){
$widget_ops = array('classname'=>'recent-comments','description'=>'显示带头像评论列表');
$control_ops = array('width'=>250,'height'=>300);
$this->WP_Widget(false,'最新评论',$widget_ops,$control_ops);
}

function form($instance){
$instance = wp_parse_args((array)$instance,array('title'=>'最新评论'));
$title = htmlspecialchars($instance['title']);
echo '<p style="text-align:left;"><label for="'.$this->get_field_name('title').'">标题:<input style="width:200px;" id="'.$this->get_field_id('title').'" name="'.$this->get_field_name('title').'" type="text" value="'.$title.'" /></label></p>';
echo '<p>最新评论小工具，需要插件wp-recentcomments支持，显示的内容在插件设置中设置，下面的函数只负责将评论插件转化为挂件，可以在小工具中自由放置</p>';
}

function update($new_instance,$old_instance){
$instance = $old_instance;
$instance['title'] = strip_tags(stripslashes($new_instance['title']));
return $instance;
}

function widget($args,$instance){
extract($args);
$title = apply_filters('widget_title',empty($instance['title']) ? '&nbsp;' : $instance['title']);
echo $before_widget;
echo $before_title . $title . $after_title;
?>
<div><?php wp_recentcomments(); ?></div>
<?php
echo $after_widget;
}
}//评论列表小工具类结束
function RecentCommentsInit(){
register_widget('RecentCommentsWidget');
}
add_action('widgets_init','RecentCommentsInit');
//评论列表小工具结束

从上面的代码中你大致能分析出小工具制作的所有要素，接下来详细讲解下。（上面的这个挂件需要你安装插件wp-recentcomments，你将<div><?php wp_recentcomments(); ?></div>修改为你自己的内容，则前台显示为你修改的内容。）

2、构造小工具

构造一个小工具用到上面的类构造class RecentCommentsWidget extends WP_Widget{}，类名可自定。

在该类中，总共有4个函数：RecentCommentsWidget()、form($instance)、update($new_instance,$old_instance)、widget($args,$instance)。

RecentCommentsWidget()

函数名可自定义，是用以对该小工具的名称、样式、描述进行定义的。如我的这个小工具名称“最新评论”描述“显示带头像评论列表”。你只需将这些抄过去即可，修改名称和描述。

form($instance)

在后台将该小工具拖拽到挂件区展开后你会看到该函数中规定的内容。我的这个小工具只是显示一个标题设置框和一段文字。

$instance = wp_parse_args((array)$instance,array('title'=>'随机文章','showPosts'=>10,'cat'=>0,'class'=>'randomPosts'));
$title = htmlspecialchars($instance['title']);
$showPosts = htmlspecialchars($instance['showPosts']);
$cat = htmlspecialchars($instance['cat']);
$class = htmlspecialchars($instance['class']);

如上，可以增加标题、显示数量、显示那些分类下的、显示的时候用什么样式名这些文本框，当然你可以增加自己的内容。总之你要理解这个函数是后台小工具展开时看到的内容即可。

update($new_instance,$old_instance)

更新form()设置的参数值，小工具展开后右下角有个保存按钮，就是用这个函数进行保存啦。照葫芦画瓢修改该函数吧。

widget($args,$instance)

前台显示，前台怎么显示form()中设置的这些值呢？就是用这个函数来控制啦。照葫芦画瓢，修改那几个echo 的内容就可以了，甚至你可以让一个小工具显示一句话，在这里自己编写就可以了。

3、注册小工具，最终完成小工具制作

虽然上面的过程让你已经了解小工具的前后台，但你会发现即使这样做了却得不到任何效果，因为你的小工具还没有注册呢。

function RecentCommentsInit(){
register_widget('RecentCommentsWidget');
}
add_action('widgets_init','RecentCommentsInit');

修改上面这几个参数为你自己的类和函数名，赶快到后台看看吧，是不是已经显示了该小工具，并可以拖拽了？自己慢慢消化，可以制作自己完美的边栏挂件啦。