给 WordPress 博客添加 Tabs 标签切换功能

分享本文:
请为本文打分

博客中的tabs切换信息展示效果已经不新鲜了,现在很多的Wordpress主题默认就提供Tabs选项卡功能,网上也有很多教程可以自己手动实现。使用Tabs切换功能,好处很多,最为明显的就是可以充分利用有限的空间提供更多的信息。

今天我也把博客的sidebar加上了Tabs切换功能,将最新文章、最新评论、文章分类、热门tags利用一个jQuery的tabs插件整合到一起。实现的方法很简单(代码是偷老外的,修改的时候还是挺麻烦滴),跟大家分享。具体的实现效果可以查看博客的右侧边栏。

一、准备两个js文件:

jquery-1.3.1.min.js、tabbar.js,你可以直接点击下载。 然后添加到你的博客header部分。

<script type="text/javascript" src="http://blog.gexiaofei.com/wp-content/themes/thesis/custom/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://blog.gexiaofei.com/wp-content/themes/thesis/custom/js/tabbar.js"></script>

二、准备tabs切换代码

下面是我博客上使用的代码,可以根据自己需要修改。

<div class="box">
  <div id="menu">
    <ul id="tabMenu">
      <li class="posts selected">最新文章</li>
      <li class="comments">最新评论</li>
      <li class="category">文章分类</li>
      <li class="tags">热门话题</li>
    </ul>
  </div>
  <div class="boxTop"><p></p></div>
  <div class="boxBody"> 
    <div id="posts" class="show">
      <ul>
        <?php wp_get_archives('title_li=&type=postbypost&limit=10'); ?>
      </ul> 
    </div>
    <div id="comments">
      <?php get_recent_comments_only (); ?>
    </div> 
    <div id="category">
      <ul>
        <?php wp_list_categories('title_li='); ?>
      </ul>
    </div>
    <div id="tags">
      <?php wp_tag_cloud('smallest=8&largest=22'); ?>
     </div>
  </div>
  <div class="boxBottom"></div>
</div>

把这段代码放到自己想要提供Tabs切换功能的地方,譬如我是放在sidebar.php里的。

三、设置CSS文件

/******Tabbed Sidebar****/
.box {margin-bottom:1.2em;}
#tabMenu {margin:0;list-style:none;}
#tabMenu li {float:left;cursor:pointer;cursor:hand;font-size:14px;margin-right:5px;padding:2px;}
li.posts,li.comments,li.tags,li.category {padding-left:5px;}
li.selected {font-weight:bold;}
.boxTop {clear:both;height:0.2em;;margin-bottom:2px;margin-top:0;background:#F5F5E5 none repeat scroll 0 0;}
*html .boxTop {height:1px;padding:0px;}
.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody div ul {list-style-image:none;list-style-position:outside;list-style-type:square;padding-left:15px;}
*html .boxBody div ul {margin-left:10px;padding-left:10px;}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;font-size:1.3em;line-height:1.2em;}
.boxBody div li a:hover{text-decoration:underline;}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}

可以按照自己的需求调整,跟自己的主题风格匹配。

需要说明的是这个tabs切换功能是基于jQuery 1.3.1的,所以低版本jQuery可能不适用。另外,在sidebar中添加的代码功能,最新评论部分我是使用自己修改出来的函数获得最新评论信息的,所以你需要使用别的插件或者改成其他信息。

原文:博客增加基于jQuery的Tabs切换功能

请为本文打分
分享本文:


评论: 给 WordPress 博客添加 Tabs 标签切换功能

  • 这个正需要

    谷百优 2009/05/11 2:53 下午 回复
  • Pingback: WORDPRESS资源收集 | 网上资源汇总

  • 学习了,用的上!

    学海无涯 2010/04/04 10:23 下午 回复
  • 学习了,来我这边看看吧www.cunyy.com

    小存 2010/09/23 11:16 下午 回复
  • 好吧不错的说www.dodoin.com

    dodoin.com 2012/10/18 11:58 上午 回复

发表一下评论

电子邮件地址不会被公开。 必填项已用*标注

Menu Title