这个是自动切换版的,经过一番整理,代码容易看一些 —— 聚合标签、聚合面板、聚合tab 小工具。
随机、热评、最新文章小工具集合。

自定义小工具

加入functions.php自定义聚合面板小工具,可以单独写一个widget-tab-2.php文件

<?php
// 聚合Tab-2
add_action('widgets_init', 'Inlo_Widget_Tabs2_init');
function Inlo_Widget_Tabs2_init() {
    register_widget('Inlo_Widget_Tabs2');
}
class Inlo_Widget_Tabs2 extends WP_Widget {
function Inlo_Widget_Tabs2() {
    $widget_ops = array('description' => '聚合多种小工具');
    $this->WP_Widget('Inlo_Widget_Tabs2', 'INLO-聚合Tab-2', $widget_ops);
}
function widget($args, $instance) {
    extract($args);
    global $wpdb;
    $randtitle = strip_tags($instance['randtitle']);
    $hottitle = strip_tags($instance['hottitle']);
    $newtitle = strip_tags($instance['newtitle']);
    $num = strip_tags($instance['num']);
    $days = strip_tags($instance['days']);
    $sticky = get_option( 'sticky_posts' );
    echo '<div class="widget jv_tabb">';
?>
<h3 class="widget-title tab-title"><span class="selected"><?php echo $randtitle; ?></span><span><?php echo $hottitle; ?></span><span><?php echo $newtitle; ?></span></h3>
<div class="tab-content">
        <ul><?php $posts = query_posts(array('orderby' =>'rand','showposts'=>$num,'post__not_in' =>$sticky)); while(have_posts()) : the_post(); ?> 
            <li><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo wp_trim_words(get_the_title()); ?></a></li><?php endwhile; wp_reset_query(); ?>
        </ul>
        <ul class="hide">
            <?php
                $hotsql = "SELECT ID , post_title , comment_count FROM $wpdb->posts WHERE post_type = 'post' AND TO_DAYS(now()) - TO_DAYS(post_date) < $days AND ($wpdb->posts.`post_status` = 'publish' OR $wpdb->posts.`post_status` = 'inherit') ORDER BY comment_count DESC LIMIT 0 , $num ";
                $hotposts = $wpdb->get_results($hotsql);
                $hotoutput = "";
                foreach ($hotposts as $post){
                $hotoutput .= "\n<li><a href= \"".get_permalink($post->ID)."\" rel=\"bookmark\" title=\"".$post->post_title." (".$post->comment_count."条评论)\" >". wp_trim_words($post->post_title)."</a></li>";
                }
                echo $hotoutput;
            ?>
        </ul>
        <ul class="hide"><?php $posts = query_posts(array('orderby' =>'date','showposts'=>$num,'post__not_in' =>$sticky)); while(have_posts()) : the_post(); ?> 
            <li><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo wp_trim_words(get_the_title()); ?></a></li><?php endwhile; wp_reset_query(); ?>
        </ul>
    </div>
<?php    
        echo "</div>\n";
    }
     function update($new_instance, $old_instance) {
         if (!isset($new_instance['submit'])) {
             return false;
         }
         $instance = $old_instance;
         $instance['randtitle'] = strip_tags($new_instance['randtitle']);    
         $instance['hottitle'] = strip_tags($new_instance['hottitle']);
         $instance['newtitle'] = strip_tags($new_instance['newtitle']);         
         $instance['num'] = strip_tags($new_instance['num']);
         $instance['days'] = strip_tags($new_instance['days']);
         return $instance;
     }
    function form($instance) {
        global $wpdb;
        $instance = wp_parse_args((array) $instance, array('randtitle' => '随机文章','hottitle' => '热评文章','newtitle' => '最新文章','num' => '6','days' => '30'));
        $randtitle = strip_tags($instance['randtitle']);        
        $hottitle = strip_tags($instance['hottitle']);
        $newtitle = strip_tags($instance['newtitle']);
        $num = strip_tags($instance['num']);
        $days = strip_tags($instance['days']);
?>
<p><label for="<?php echo $this->get_field_id('randtitle'); ?>">随机文章标题:<input class="widefat" id="<?php echo $this->get_field_id('randtitle'); ?>" name="<?php echo $this->get_field_name('randtitle'); ?>" type="text" value="<?php echo $randtitle; ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('hottitle'); ?>">热门文章标题:<input class="widefat" id="<?php echo $this->get_field_id('hottitle'); ?>" name="<?php echo $this->get_field_name('hottitle'); ?>" type="text" value="<?php echo $hottitle; ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('newtitle'); ?>">最新文章标题:<input class="widefat" id="<?php echo $this->get_field_id('newtitle'); ?>" name="<?php echo $this->get_field_name('newtitle'); ?>" type="text" value="<?php echo $newtitle; ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('num'); ?>">各类文章显示数量:<input class="widefat" id="<?php echo $this->get_field_id('num'); ?>" name="<?php echo $this->get_field_name('num'); ?>" type="text" value="<?php echo $num; ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('days'); ?>">热评文章控制天数:<input class="widefat" id="<?php echo $this->get_field_id('days'); ?>" name="<?php echo $this->get_field_name('days'); ?>" type="text" value="<?php echo $days; ?>" /></label></p>
<input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" />
<?php
    }
}
?>
css代码
/*小工具-聚合Tab2*/
#sidebar .tab-title span{background:#F9F9F9;width:25%;color:#666;border:1px solid #eee;border-bottom:0;display:inline-block;margin-right:1px; cursor:pointer;font-weight:normal;text-align:center}
#sidebar .tab-title .selected{background:#737F99;cursor:default;color:#fff}
#sidebar .tab-content{padding:10px 15px;border:1px solid #ddd}
#sidebar .tab-content ul li{font-size:13px;padding:5px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sidebar .tab-content .hide{display:none}
js代码

分成两部分,一部分控制自动切换、一部分控制手动切换,看注释:

//聚合Tab-2效果
$(function() { // 自动切换
        var o = 0;
        var timeInterval = 2000;
        var $cont = $(".tab-content ul");
        var $title = $(".tab-title span");
        $cont.hide();
        $($cont[0]).show();
        function auto() {
            o < $cont.length - 1 ? o++:o = 0;
            $cont.eq(o).fadeIn(800).siblings().hide();
            $title.eq(o).addClass("selected").siblings().removeClass("selected");
        }
        set = window.setInterval(auto, timeInterval);
});
$('body').on('click','.tab-title span',function(){ //手动切换
    jQuery(this).addClass("selected").siblings().removeClass();
    jQuery(".tab-content > ul").eq(jQuery('.tab-title span').index(this)).fadeIn(500).siblings().hide();
});

以上。