在《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不熟悉,请不要使用该方法,以免产生误会。
下面我简单说几句