WordPress Tab三分栏文章样式实现方法

今天打算写一个我折腾了好一阵子的侧边栏Tab三分栏文章样式的实现方法，其实NANA主题也自带了一个三分栏的显示样式，但我自己不是很喜欢。当我浏览懿古今大佬的站点时，他的站点的三分栏样式，很对我的胃口，然后就扒了懿古今大佬的部分代码，在此表示感谢！！！在折腾的过程中，由于我自己对代码不是太懂，绕了不少的弯路，好在上天还是不会辜负勇于努力钻研的人，最终让我给弄成功了。

下面我就介绍下实现的方法，（NANA主题的话，那直接用即可，其他主题需自己适配）。

显示效果

class zonghe_post extends WP_Widget {
  function __construct(){
    parent::__construct('zonghe_post', '主题  Tab三分栏, array('description' => '包括站长推荐、热门文章和热评文章。') );
  }
  unction widget($args, $instance) {
    extract($args);
    echo $before_widget;
    $number = strip_tags($instance['number']) ? absint( $instance['number'] ) : 6;
    $days = strip_tags($instance['days']) ? absint( $instance['days'] ) : 90;
?>
    <ul id="top_post_filter">
      <li id="zhan_post" class="top_post_filter_active">站长推荐</li>
      <li id="men_post" class="">热门文章</li>
      <li id="ping_post" class="">热评文章</li>
    </ul>
    <div id="tab-content" class="investment_con">
       <div class="investment_con_list" style="display:block;">
          <ul class="tab_post_links">
	    <?php query_posts( array ( 'meta_key' => 'hot', 'meta_value' => 'true','showposts' => $number, 'orderby' => 'rand', 'ignore_sticky_posts' => 1 ) );$i=1; while ( have_posts() ) : the_post(); ?>
	    <li class="hot-title"><span class="li-icon li-icon-<?php echo $i;?>"><?php echo $i;$i++;?></span><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank"><?php the_title(); ?></a>							
	     <?php endwhile;wp_reset_query();?>
          </ul>
       </div>					
       <div class="investment_con_list" style="display:none;">
          <ul class="tab_post_links">
             <?php get_timespan_most_viewed('post',$number,$days, true, true);wp_reset_query();  ?>
           </ul>
        </div>
        <div class="investment_con_list" style="display:none;">
           <ul class="tab_post_links">
            <?php hot_comment_viewed($number, $days);wp_reset_query(); ?>	
           </ul>
        </div>
	</div>
<?php
   echo $after_widget;
}
   function update( $new_instance, $old_instance ) {
     if (!isset($new_instance['submit'])) {
       return false;
     }
     $instance = $old_instance;
     $instance = array();
     $instance['number'] = strip_tags($new_instance['number']);
     $instance['days'] = strip_tags($new_instance['days']);
     return $instance;
   }
   function form($instance) {
     global $wpdb;
     $instance = wp_parse_args((array) $instance, array('number' => '6'));
     $instance = wp_parse_args((array) $instance, array('days' => '90'));
     $number = strip_tags($instance['number']);
     $days = strip_tags($instance['days']);
?>
    <p><label for="<?php echo $this->get_field_id('number'); ?>">显示数量：</label>
       <input id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>
       <p><label for="<?php echo $this->get_field_id('days'); ?>">时间限定（天）：</label>
       <input id="<?php echo $this->get_field_id( 'days' ); ?>" name="<?php echo $this->get_field_name( 'days' ); ?>" type="text" value="<?php echo $days; ?>" size="3" /></p>
       <input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" />
<?php }
}
add_action( 'widgets_init', create_function( '', 'register_widget( "zonghe_post" );' ) );
 

// 热门文章
require get_template_directory() . '/inc/functions/hot-post-viewed.php';
// 热评文章
require get_template_directory() . '/inc/functions/hot_comment_viewed.php';

$(document).ready(function(){
   $('.investment_con').each(function(){
      $(this).children().eq(0).show();
   });
   $('#top_post_filter').each(function(){
      $(this).children().eq(0).addClass('top_post_filter_active');
   });
   $('#top_post_filter').children().mouseover(function(){
      $(this).addClass('top_post_filter_active').siblings().removeClass('top_post_filter_active');
      var index = $('#top_post_filter').children().index(this);
      $('.investment_con').children().eq(index).show().siblings().hide();
   });
});

#top_post_filter {padding: 0 15px;}
#top_post_filter .top_post_filter_active, #top_post_filter li:hover {border-bottom: 3px solid #c01e22;cursor: pointer;color: #333;font-weight: 700;}
#top_post_filter li {float: left;width: 33.3%;height: 43px;line-height: 43px;color: #999;font-size: 1pc; text-align: center;border-bottom: 1px solid #e5e5e5;}
.tab_post_links li:first-child {padding-top: 10px;}
.li-icon-1 {background: #c01e22;}
.li-icon-2 {background: #23b7e5;}
.li-icon-3 {background: #6E8B3D;}
.li-icon {background: #ccc;font-size: 12px;color: #fff;line-height: 180%;margin: 0 5px 0 0;padding: 0 5px;border-radius: 2px;}
 

好了，通过上面5步，基本上可实现Tab三分栏显示效果，实际的样式效果可能跟主题的css有关，自己可自行调整。