有时候我们不希望WordPress侧边栏过长，但是又想能展示多一些东西，那么将2个或者3个进行组合显示成了最佳选择，做个tab选项卡，把最新文章、热评文章、随机文章放在一个tab选项卡里，这样就能轻松实现我们想要的！
我简单讲下使用过程，高手就路过吧。特别提示：编辑代码请用编辑器，如DreamWeaver，请勿使用记事本。
请确保你网页已经包含了Jquery框架。
第一：将下面的代码的复制到主题的function.php文件中。这个是获取热评日志的函数，这里有专门文章介绍：WordPress热评日志的调用
// 获得热评文章
function simple_get_most_viewed($posts_num=10, $days=60){
global $wpdb;
$sql = "SELECT ID , post_title , comment_count
FROM $wpdb->posts
WHERE post_type = 'post' AND TO_DAYS(now()) - TO_DAYS(post_date) < $days
ORDER BY comment_count DESC LIMIT 0 , $posts_num ";
$posts = $wpdb->get_results($sql);
$output = "";
foreach ($posts as $post){
$output .= "\n<li><a href= \"".get_permalink($post->ID)."\" rel=\"bookmark\" title=\"".$post->post_title." (".$post->comment_count."条评论)\" >". mb_strimwidth($post->post_title,0,30)."</a></li>";
}
echo $output;
}
第二：将下面的代码保存为r_tab.php，放到主题的文件夹下面。
<h3><span class="selected">最新日志</span><span>热评日志</span><span>随机日志</span></h3>
<div id="tab-content">
<ul><?php $myposts = get_posts('numberposts=10&offset=0');foreach($myposts as $post): ?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark" title="详细阅读 <?php the_title_attribute(); ?>"><?php echo cut_str($post->post_title,30); ?></a></li>
<?php endforeach; ?></ul>
<ul class="hide"><?php simple_get_most_viewed(); ?></ul>
<ul class="hide"><?php $myposts = get_posts('numberposts=10&orderby=rand');foreach($myposts as $post): ?>
<li><a href="<?php the_permalink(); ?>" rel="bookmark" title="详细阅读 <?php the_title_attribute(); ?>"><?php echo cut_str($post->post_title,30); ?></a></li>
<?php endwhile;endif; ?></ul>
</div>
第三：打开sidebar.php，将下面的代码插入合适位置
<div id="tab-title"><?php include('r_tab.php'); ?></div>第四：JQuery控制切换的代码
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#tab-title span').click(function(){
jQuery(this).addClass("selected").siblings().removeClass();
jQuery("#tab-content > ul").slideUp('1500').eq(jQuery('#tab-title span').index(this)).slideDown('1500');
});
});
</script>
第五：CSS
#tab-title .selected{color:#000;font-weight:bold}
#tab-title span{padding:5px 18px 8px 1px;border-right:0px;margin-left:-1px;cursor:pointer;}
#tab-content .hide{display:none;}
#tab-content ul{padding:5px 10px;overflow:hidden;border-right:1px solid #ccc;border-left:1px solid #ccc;background:#fff;}
#tab-content ul li{line-height:25px;list-style:none}
好了，这样应该就能达到想要的效果了，当然实际效果还要自己根据自己的主题进行微调。
Parse error: syntax error, unexpected T_ENDWHILE in /www/web/test_heminjie_com/public_html/wp-content/themes/sahifa/r_tab.php on line 1
不知道怎么，加了这句后老是报错，一步一步照着做的，奇怪····博主帮忙看看哈~~~谢谢~~
呵呵，我还把标签弄到一块了，总共4个，可是我还想把评论搞到一块总是出错，能解惑吗？站点是503.hk我弄的新站
我按此方法修改了一下，这个“三合一”的效果显示在正文里面。想请教一下，怎么使用wordpress“小工具”，把他调用到侧边栏里？
谢谢啊，这个方法整理的很完善了，借用下这个思路！
这个功能不错，如果加在自定义widget应该怎么弄
@皇家元林这个世界将代码加载sidebar.php里面就行了
原来这个叫 jQuery tab，我喜欢。
JQUERY需要提前加载的，好像，没有尝试过，正准备尝试这样弄弄呢
@晓伍恩，Jquery肯定需要先加载，然后才能使用
我使用了你的风格，什么都没改，为什么TAB点击没反应呢，是因为WP3.2的原因么 帮忙看看好么 谢谢
@hongjun应该不会吧，我也升级WP3.2了，一切正常啊，应该跟你装的插件有冲突了
@William我看了 确实是和jQuery Colorbox 冲突，我试着用改也没什么作用 好像和lightbox也冲突，我看你现在也有类似插件，是什么啊
@hongjun用的是Auto Highslide
说的太对了，就我现在的博客就出现这种问题，一但网速慢，tab效果就会拉的很长缩不回去。
@qiuyili所以tab切换还是还是横向的好点
知更鸟2.4正式版的貌似不能使用这个
@冰菁翎羽额，是么，换一下上面的调用函数就行了。其实上面的只是给个方式而已，重要的还是自己拓展
@William呵呵，对于这个研究不多，不知道咋修改，帮忙下
额，我还是没看明白…
本地测试发现只有最近文章显示，热门文章和随机的点不到
为什么会这样呢
@空空裤兜看了下你的站，其实你把我上面代码中 热门文章 ul 中的代码换成你博客上的热门文章的代码，然后应该就可以了。随机的也是