WordPress侧栏实现Tab选项卡
有时候我们希望在侧栏放更多内容，但是容易让侧栏显得过长。网上比较常见的做法是，用 Tab 选项卡的形式将多个小工具合并到一起，例如热门文章、最新文章、随机文章等等，这样同样的空间包含的内容更多，用户体验也增强不少。
下面讲讲具体的实现步骤，主要分成三块内容：PHP部分、JQuery切换实现以及 CSS样式。
PHP部分
在 Tab 选项卡中有一栏是热评文章，它根据文章的评论数来排列热门文章，WordPress 默认并没有提供该功能。所以需要自己来实现，将以下代码放到主题目录下的 function.php 文件中：
// 获得热评文章
function wpex_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 post_status = 'publish'
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 .= "<li><a href= \"".get_permalink($post->ID)."\" rel=\"bookmark\" title=\"".$post->post_title." (".$post->comment_count."条评论)\" >". wp_trim_words($post->post_title, 30)."</a></li>";
}
echo $output;
}
wpex_get_most_viewed函数用来获取最近N天的评论数最多的M篇文章。
接下来，将下面的代码放到主题目录下的 sidebar.php 文件中，这段代码主要描述了侧栏小工具的结构：
<div class="sidebar-box tabber-widget">
<div class="tabber-title">
<ul class="tabnav clr">
<li class="selected">最新文章</li>
<li class="">热评文章</li>
<li class="">随机文章</li>
</ul>
</div>
<div class="tabber-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 wp_trim_words($post->post_title,30); ?></a></li>
<?php endforeach; ?></ul>
<ul class="hide"><?php wpex_get_most_viewed(10, 180); ?></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 wp_trim_words($post->post_title,30); ?></a></li>
<?php endforeach; ?></ul>
</div>
</div>
JQuery 切换实现
Tab 选项卡的最重要的一个功能点是，点击标签可以切换到对应的内容。我们可以选择用JQuery来实现切换的效果，这样代码会显得很干净和简单。
将以下的代码放到你自己的某个 js 文件中：
jQuery(function($) {
$('.tabber-title li').click(function() {
var $cur_tab = $(this);
var $tabber = $cur_tab.parents('.tabber-widget');
$cur_tab.addClass("selected")
.siblings().removeClass("selected");
$tabber.find('.tabber-content ul').slideUp('fast')
.eq($tabber.find('.tabber-title li').index(this)).slideDown('fast');
});});
CSS 样式
现在我们要给 Tab 选项卡披上一件漂亮的衣服，这件衣服可能并不适合每个人，所以需要根据自己的情况调整改进。
将以下代码放到主题目录下的 style.css 文件中：
/* Tabber widget */
.tabber-title {margin:0 0 15px}
.tabnav { color: #000; font-weight: bold; font-size: 14px; border-bottom: 1px solid #ddd; }
.tabnav li {
float:left;
width:86px;
height:30px;
line-height:30px;
border:1px solid #ddd;
border-bottom:none;
text-align:center;
cursor:pointer;
margin-left:10px;
color: #666;
}
.tabnav .selected { cursor:default; background: #efefef; color: #000; }
.tabber-content .hide {display:none;}
.tabber-content ul {overflow:hidden;list-style:none}
.tabber-content li {overflow:hidden;padding-bottom: 2px;}
.tabber-content {padding: 0 10px;}
到此就大功告成了，你也可以举一反三，将其它内容放到 Tab 选项卡中。
