乌徒帮技术范WordPressWordPress开发 › 为wordpress打造带选项卡的边侧栏小工具挂件

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

分类: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不熟悉,请不要使用该方法,以免产生误会。

已有5条评论 快速评论
  1. […] 1、《wordpress小工具制作前台后台全解析》 2、《为wordpress打造带选项卡的边侧栏小工具挂件》 […]

  2. 子非我 #2394楼 2012/11/15 20:03:31 回复

    有空测试,先加人气 2012年11月15日20:04:26

  3. 否子戈 #2102楼 回复给@2096楼 2012/09/22 10:19:33 回复

    可能很多人都是看了代码拷贝走就好了吧

  4. 倡萌 #2096楼 2012/09/22 06:36:41 回复

    感觉你这里的人气不够哦 想办法提高一下吧

  5. 倡萌 #2095楼 2012/09/22 06:35:50 回复

    说真的 折腾过的两个主题 到目前为止还是没有支持小工具 该好好学习这个了

填写个人信息,赶快回复吧!