为wordpress打造带选项卡的边侧栏小工具挂件

在《wordpress小工具制作前台后台全解析》一文中，否子戈介绍了有关如何撰写wordpress博客自己的边栏小工具程序代码了详细过程。本文则应用文章中的方法，创建一个带选项卡的小工具挂件。效果如乌徒帮右侧的文章集合挂件。

我们知道，小工具可以在wordpress后台轻松的实现拖拽，以改变前台的布局。不过遗憾的是，一个挂件只能完成一块固定内容的展示，当我们有很多需要挂载的小工具时，会把边栏拖的很长很长，页面很长很长。通过选项卡的方式，将一些可以聚合在一起的内容块放在一起，通过鼠标动作来实现隐现，可以聚合内容，节约空间。缺点是：在默认情况下被隐藏的内容访客无法在第一时间被看到。因此，在考虑是否采用选项卡的小工具挂件的时候，一定要根据自己的情况来选择，把最想展示给用户的那块内容放在默认显示的位置。

1、构造小工具

首先是构造出我们的小工具挂件，而不管选项卡的样式。具体意义可根据文章开始的参考文章中的解释对照理解。代码如下：

/**
* 名称：选项卡小工具挂件
* 描述：制作的一个将站内的最新文章最热文章集中到一块儿的挂件
* 作者：否子戈
* 网站：http://www.utubon.com
*/

class PostsFocusWidget extends WP_Widget
{
?? ?function PostsFocusWidget(){
?? ??? ?$widget_ops = array('classname'=>'posts-focus',
?? ??? ??? ?'description'=>'用一个挂件将站内的一些热点文章集中到一起，用一个tab的形式表现出来');
?? ??? ?$control_ops = array('width'=>250,'height'=>300);
?? ??? ?$this->WP_Widget(false,'文章焦点',$widget_ops,$control_ops);
?? ?}
?? ?function widget($args,$instance){
?>
<div 解释="这是用来把选项卡和要显示的内容放在一起的标签，在JS脚本中会用到">
<div>
?? ?<a href="#">本月热门</a>
?? ?<a href="#">最近更新</a>
?? ?<a href="#">最受欢迎</a>
?? ?<a href="#">置顶推荐</a>
?? ?<div></div>
</div>
<?php
// 本月热门，如果本月还没有文章，就添加随机文章
$query_post = array(
?? ?'posts_per_page' => 10,
?? ?'ignore_sticky_posts' => 1,
?? ?'year' => date('Y'),
?? ?'monthnum' => date('m'),
?? ?'orderby' => 'comment_count',
?? ?'order' => 'DESC'
);
query_posts($query_post);
if(!have_posts())query_posts("posts_per_page=10&ignore_sticky_posts=1&orderby=rand");
?>
<ul>
<?php while(have_posts()):the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="共有<?php global $post;echo $post->comment_count; ?>条评论"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php
wp_reset_query();
// 最近更新
query_posts(array(
?? ?'category__not_in' => array(94,117),
?? ?'posts_per_page' => 10,
?? ?'ignore_sticky_posts' => 1,
?? ?'tag__not_in' => array(148),
?? ?'orderby' => 'modified'
));
?>
<ul style="display:none;">
<?php while(have_posts()):the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="更新于<?php global $post;echo $post->post_modified; ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php
wp_reset_query();
// 最热门文章
$query_post = array(
?? ?'posts_per_page' => 10,
?? ?'ignore_sticky_posts' => 1,
?? ?'orderby' => 'comment_count'
);
query_posts($query_post);
?>
<ul style="display:none;">
<?php while(have_posts()):the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="共有<?php global $post;echo $post->comment_count; ?>条评论"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php
wp_reset_query();
// 置顶文章
$query_post = array(
?? ?'posts_per_page' => 10,
?? ?'post__in' => get_option('sticky_posts'),
?? ?'caller_get_posts' => 1
);
query_posts($query_post);
?>
<ul style="display:none;">
<?php while(have_posts()):the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php
wp_reset_query();
?>
</div>
<?php
?? ?}
}//小工具类结束
function PostsFocusInit(){
?? ?register_widget('PostsFocusWidget');
}
add_action('widgets_init','PostsFocusInit');

2、CSS样式的控制

样式没有什么难的，主要是对选项卡的位置控制。在CSS中，我一般采用float,clear,background等属性来实现。

/* 增加的文章焦点小工具挂件的样式 */
.widget-tab{padding-left:10px;padding-left:0 9;}
.widget-tab a{float:left;margin-right:5px;display:block;width:68px;height:30px;line-height:30px;overflow:hidden;text-align:center;color:#fff;text-decoration:none;}
.tab_1{background:url(images/tab.gif) no-repeat -204px 0;}
.tab_2{background:url(images/tab.gif) no-repeat -136px 0;}
.tab_3{background:url(images/tab.gif) no-repeat -204px 0;}
.tab_4{background:url(images/tab.gif) no-repeat 0 0;}
.widget-tab a.tab_1:hover,.widget-tab a.tab_2:hover,.widget-tab a.tab_3:hover,.widget-tab a.tab_4:hover,.widget-tab a.current{background:url(images/tab.gif) no-repeat -68px 0;}
ul.tab-content{margin-top:-1px;_margin-top:-11px;*+margin-top:-11px;}

3、JS脚本控制鼠标点击的隐现效果

我们要实现的效果是，点击选项卡，切换到我们想要的内容块。这需要一段简单的JS脚本。不过由于本博客的脚本都基于jquery，因此，本文也给出一段jquery的脚本。

$(document).ready(function(){
	// 边侧栏小挂件tab效果
	$('div.widget-tab a').click(function(e){
		e.preventDefault();
		var $this = $(this),$parent = $(this).parent(),$tab_btn = $parent.find('a'),
			$index = $parent.find('a').index($(this)[0]),
			$tab_content = $parent.parent().find('ul');
		$tab_btn.removeClass('current');
		$this.addClass('current');
		$tab_content.hide();
		$tab_content.eq($index).show();
	});
});

这里需要解释的是，在使用这段脚本时，我特意对HTML代码进行了调整，以让这段脚本适合于所有widget-tab的挂件元素，也就是说，如果你想要有多个选项卡挂件，只需要按照一定的HTML代码结构进行挂件构造即可，不用再撰写JS和CSS代码。HTML结构如下：

<div>
<div>
?? ?<a href="#">...</a>
?? ?...
?? ?<a href="#">...</a>
?? ?<div></div>
</div>
<ul>
?? ?<li>...</li>
?? ?...
?? ?<li>...</li>
</ul>
...
<ul>
?? ?<li>...</li>
?? ?...
?? ?<li>...</li>
</ul>
</div>

.widget-tab内放置选项卡，有多少个a标签就有多少个ul标签，一一对应。

通过这样的方法，我们就能将我们的博客边栏打造的更加富有层次性。

4、wordpress入门朋友，需要补充下面的知识

1、上文中的构造小工具代码放置在主题目录下的functions.php的最后；

2、如果对jquery或JS不熟悉，请不要使用该方法，以免产生误会。