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

温馨提示

本文于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' => '包括站长推荐、热门文章和热评文章。') );
	}
        function 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三分栏文章样式实现方法
所属分类: WordPress

评论 22

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

表情 关闭

图片
目前评论:22 条  其中:访客  16 条  站长  6 条
  1.  14楼
    huas
    huas 【农民】(  Google Chrome 84.0.4147.89   Windows 7 ) 来自: 山西省大同市 电信
    发表于4周前 (07-20)回复

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

    • huas
      huas 【农民】(  Google Chrome 84.0.4147.89   Windows 7 ) 来自: 山西省大同市 电信
      发表于4周前 (07-21)回复

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

      • 伊阳
        伊阳【站长】(  Google Chrome 71.0.3578.141   Android 10 ) 来自: 陕西省西安市 联通
        发表于4周前 (07-21)回复

        @huas https://pan.chyiyang.cn/s/pkMfTwYrHt7HepE密码chyiyang

        • huas
          huas 【农民】(  Google Chrome 84.0.4147.89   Windows 7 ) 来自: 山西省大同市 电信
          发表于4周前 (07-21)回复

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

          • 伊阳
            伊阳【站长】(  Firefox 78.0   Windows 10 ) 来自: 陕西省渭南市 电信
            发表于4周前 (07-21)

            @huas 不客气

  2.  13楼
    TEts
    TEts 【农民】(  QQBrowser 10.6.4163.400   Windows 7 ) 来自: 湖南省 移动
    发表于1个月前 (07-09)回复

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

    • 伊阳
      伊阳【站长】(  Google Chrome 71.0.3578.141   Android 10 ) 来自: 陕西省西安市 联通
      发表于1个月前 (07-09)回复

      @TEts 提示的什么错误呢?

  3.  12楼
    TEts
    TEts 【农民】(  QQBrowser 10.6.4163.400   Windows 7 ) 来自: 湖南省 移动
    发表于1个月前 (07-09)回复

    不错,学习了

  4.  11楼
    低下头↘吻你
    低下头↘吻你 【农民】(  Google Chrome 78.0.3904.108   Windows 7 ) 来自: 广东省惠州市 电信
    发表于3个月前 (05-31)回复

    学习了感谢分享

  5.  10楼
    等等
    等等 【农民】(  Google Chrome 80.0.3987.122   Windows 10 ) 来自: 四川省德阳市 电信
    发表于5个月前 (03-20)回复

    试试就试试

  6.  9楼
    wainirt
    wainirt 【农民】(  Google Chrome 61.0.3163.79   Windows 7 ) 来自: 江苏省苏州市 电信
    发表于5个月前 (03-04)回复

    还是不显示么。

    • 伊阳
      伊阳【站长】(  Google Chrome 71.0.3578.141   Android 9 ) 来自: 陕西省西安市 联通
      发表于5个月前 (03-04)回复

      @wainirt 有啥提示没?

  7.  8楼
    wainirt
    wainirt 【农民】(  Google Chrome 61.0.3163.79   Windows 7 ) 来自: 江苏省苏州市 电信
    发表于5个月前 (03-04)回复

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

  8.  7楼
    dsuyh
    dsuyh 【农民】(  Google Chrome 69.0.3497.100   Windows 10 ) 来自: 云南省昆明市 联通
    发表于12个月前 (08-22)回复

    非常不错啊

  9.  6楼
    红尘
    红尘 【农民】(  Google Chrome 63.0.3239.132   Windows 7 ) 来自: 广东省惠州市 电信
    发表于1年前 (2019-04-09)回复

    学习了

  10.  5楼
    微笑
    微笑 【农民】(  Google Chrome 69.0.3497.100   Windows 10 ) 来自: 重庆市 联通
    发表于1年前 (2019-04-05)回复

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

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

  11.  4楼
    微笑
    微笑 【农民】(  Google Chrome 69.0.3497.100   Windows 10 ) 来自: 重庆市 联通
    发表于1年前 (2019-04-05)回复

    值得收藏

  12.  地板
    1
    1 【农民】(  Firefox 66.0   Windows 10 ) 来自: 广东省东莞市 鹏博士长城宽带
    发表于1年前 (2019-04-01)回复

  13.  板凳
    佐语先森
    佐语先森 【农民】(  QQBrowser 10.3.3006.400   Windows 7 ) 来自: 福建省福州市 联通
    发表于1年前 (2019-03-13)回复

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

    • 伊阳
      伊阳【站长】(  Google Chrome 61.0.3163.128   Android 9 ) 来自: 陕西省西安市 联通
      发表于1年前 (2019-03-13)回复

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

  14.  沙发
    Fatansy
    Fatansy 【农民】(  Google Chrome 64.0.3282.204   Windows 10 ) 来自: 安徽省 移动
    发表于1年前 (2019-03-04)回复

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

    • 伊阳
      伊阳【站长】(  Google Chrome 61.0.3163.128   Android 9 ) 来自: 陕西省西安市 联通
      发表于1年前 (2019-03-04)回复

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