WordPress 侧栏实现 Tab 选项卡

有时候我们希望在侧栏放更多内容，但是容易让侧栏显得过长。网上比较常见的做法是，用 Tab 选项卡的形式将多个小工具合并到一起，例如热门文章、最新文章、随机文章等等，这样同样的空间包含的内容更多，用户体验也增强不少。

网上可以下到不少类似的插件，也有很多非插件的实现方式。我使用了William同学WordPress侧边栏JQuery版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

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 选项卡中。