Hi,
有钱终成眷属
没钱亲眼目睹

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

本文最后更新于2021年4月1日,已超过 3 年没有更新,如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!
温馨提示

本文于2019年3月3日进行修正。

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

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

显示效果

1、将下列代码粘贴到当前主题的inc/functions文件夹的widgets.php下即可。
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" );' ) );
 
2、将下列两个hot_comment_viewed.php和hot-post-viewed.php放到当前主题的inc/functions文件夹下。


3、将下列代码加到当前主题的functions.php的?>前。
// 热门文章
require get_template_directory() . '/inc/functions/hot-post-viewed.php';
// 热评文章
require get_template_directory() . '/inc/functions/hot_comment_viewed.php';
4、将下面的js代码粘贴到主题的任一js文件内。
$(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();
   });
});
注意:如使用的是NANA主题需删除当前主题js文件夹下script.php里的31-39行代码
5、下列是部分css样式,可放到主题的style样式里。
#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有关,自己可自行调整。

赞(1)
未经允许不得转载:伊阳博客 » WordPress Tab三分栏文章样式实现方法

留言 22

  1.  14楼
    huas4年前 (2020-07-20)(  Google Chrome    Windows 7 ) 来自:山西省大同市 电信回复

    喜欢这个样式,博主有劳了!

    • huas4年前 (2020-07-21)(  Google Chrome    Windows 7 ) 来自:山西省大同市 电信回复

      @huas:咦,回复了还是看不到隐藏的那两个文件。我再试试。我想按照站长的方法试一试

      • 伊阳4年前 (2020-07-21)(  Google Chrome    Android 10 ) 来自:陕西省西安市 联通回复

        @huashttps://pan.chyiyang.cn/s/pkMfTwYrHt7HepE密码chyiyang

        • huas4年前 (2020-07-21)(  Google Chrome    Windows 7 ) 来自:山西省大同市 电信回复

          @伊阳:太谢谢博主了!!!

          • 伊阳4年前 (2020-07-21)(  Firefox    Windows 10 ) 来自:陕西省渭南市 电信
            Deprecated: strstr(): Passing null to parameter #1 ($haystack) of type string is deprecated in /www/wwwroot/www.chyiyang.cn/wp-content/themes/dux_8.2/modules/mo_comments_list.php on line 107

            Deprecated: preg_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /www/wwwroot/www.chyiyang.cn/wp-content/themes/dux_8.2/modules/mo_comments_list.php on line 110

            @huas:不客气

  2.  13楼
    TEts4年前 (2020-07-09)(  QQBrowser    Windows 7 ) 来自:湖南省 移动回复

    你好,麻烦问一下,我按教程一步一步弄得 怎么还是出错呢,

    • 伊阳4年前 (2020-07-09)(  Google Chrome    Android 10 ) 来自:陕西省西安市 联通回复

      @TEts:提示的什么错误呢?

  3.  12楼
    TEts4年前 (2020-07-09)(  QQBrowser    Windows 7 ) 来自:湖南省 移动回复

    不错,学习了

  4.  11楼
    低下头↘吻你4年前 (2020-05-31)(  Google Chrome    Windows 7 ) 来自:广东省惠州市 电信回复

    学习了感谢分享

  5.  10楼
    等等4年前 (2020-03-20)(  Google Chrome    Windows 10 ) 来自:四川省德阳市 电信回复

    试试就试试

  6.  9楼
    wainirt4年前 (2020-03-04)(  Google Chrome    Windows 7 ) 来自:江苏省苏州市 电信回复

    还是不显示么。

    • 伊阳4年前 (2020-03-04)(  Google Chrome    Android 9 ) 来自:陕西省西安市 联通回复

      @wainirt:有啥提示没?

  7.  8楼
    wainirt4年前 (2020-03-04)(  Google Chrome    Windows 7 ) 来自:江苏省苏州市 电信回复

    这个可是好东西,我来看看。 :tongue:

  8.  7楼
    dsuyh5年前 (2019-08-22)(  Google Chrome    Windows 10 ) 来自:云南省昆明市 联通回复

    非常不错啊

  9.  6楼
    红尘5年前 (2019-04-09)(  Google Chrome    Windows 7 ) 来自:广东省惠州市 电信回复

    学习了

  10.  5楼
    微笑5年前 (2019-04-05)(  Google Chrome    Windows 10 ) 来自:重庆市 联通回复

    你好,麻烦问一下,我按教程一步一步弄得 怎么还是出错呢,
    Parse error: syntax error, unexpected T_STRING in D:\phpStudy\WWW\wp-content\themes\Nana\inc\functions\widgets.php on line 336

    直接复制进去的,,本地测试的

  11.  4楼
    微笑5年前 (2019-04-05)(  Google Chrome    Windows 10 ) 来自:重庆市 联通回复

    值得收藏

  12.  地板
    15年前 (2019-04-01)(  Firefox    Windows 10 ) 来自:广东省东莞市 鹏博士BGP回复

  13.  板凳
    佐语先森5年前 (2019-03-13)(  QQBrowser    Windows 7 ) 来自:福建省福州市 联通回复

    学习学习。。。我就是搞不了才找别的方法实现四栏的。你牛哇。。。

    • 伊阳5年前 (2019-03-13)(  Google Chrome    Android 9 ) 来自:陕西省西安市 联通回复

      @佐语先森:只要三栏能实现,四栏也很简单

  14.  沙发
    Fatansy5年前 (2019-03-04)(  Google Chrome    Windows 10 ) 来自:安徽省 移动回复

    我也看见过懿古今博客的三栏设置,回头发现主题设置中并没有,没想到你给实现了,厉害 [鼓掌]

    • 伊阳5年前 (2019-03-04)(  Google Chrome    Android 9 ) 来自:陕西省西安市 联通回复

      @Fatansy:自带的不喜欢,这个三栏显示折腾了老久才试成功,归根结底还是自己不懂代码。