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;
?>
	    	
  • 站长推荐
  • 热门文章
  • 热评文章
    'hot', 'meta_value' => 'true','showposts' => $number, 'orderby' => 'rand', 'ignore_sticky_posts' => 1 ) );$i=1; while ( have_posts() ) : the_post(); ?>
'6')); $instance = wp_parse_args((array) $instance, array('days' => '90')); $number = strip_tags($instance['number']); $days = strip_tags($instance['days']); ?>

2、将下列两个hot_comment_viewed.php和hot-post-viewed.php放到当前主题的inc/functions文件夹下。

[reply]

[/reply]

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

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

表情 关闭

图片
目前评论:22 条  其中:访客  16 条  站长  6 条
  1.  14楼
    huas
    huas 【农民】(  Google Chrome 84.0.4147.89   Windows 7 ) 来自: IP data file not exists or access denied
    发表于3个月前 (07-20)回复

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

    • huas
      huas 【农民】(  Google Chrome 84.0.4147.89   Windows 7 ) 来自: IP data file not exists or access denied
      发表于3个月前 (07-21)回复

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

      • 伊阳
        伊阳【站长】(  Google Chrome 71.0.3578.141   Android 10 ) 来自: IP data file not exists or access denied
        发表于3个月前 (07-21)回复

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

        • huas
          huas 【农民】(  Google Chrome 84.0.4147.89   Windows 7 ) 来自: IP data file not exists or access denied
          发表于3个月前 (07-21)回复

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

          • 伊阳
            伊阳【站长】(  Firefox 78.0   Windows 10 ) 来自: IP data file not exists or access denied
            发表于3个月前 (07-21)

            @huas 不客气

  2.  13楼
    TEts
    TEts 【农民】(  QQBrowser 10.6.4163.400   Windows 7 ) 来自: IP data file not exists or access denied
    发表于4个月前 (07-09)回复

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

    • 伊阳
      伊阳【站长】(  Google Chrome 71.0.3578.141   Android 10 ) 来自: IP data file not exists or access denied
      发表于4个月前 (07-09)回复

      @TEts 提示的什么错误呢?

  3.  12楼
    TEts
    TEts 【农民】(  QQBrowser 10.6.4163.400   Windows 7 ) 来自: IP data file not exists or access denied
    发表于4个月前 (07-09)回复

    不错,学习了

  4.  11楼
    低下头↘吻你
    低下头↘吻你 【农民】(  Google Chrome 78.0.3904.108   Windows 7 ) 来自: IP data file not exists or access denied
    发表于5个月前 (05-31)回复

    学习了感谢分享

  5.  10楼
    等等
    等等 【农民】(  Google Chrome 80.0.3987.122   Windows 10 ) 来自: IP data file not exists or access denied
    发表于7个月前 (03-20)回复

    试试就试试

  6.  9楼
    wainirt
    wainirt 【农民】(  Google Chrome 61.0.3163.79   Windows 7 ) 来自: IP data file not exists or access denied
    发表于8个月前 (03-04)回复

    还是不显示么。

    • 伊阳
      伊阳【站长】(  Google Chrome 71.0.3578.141   Android 9 ) 来自: IP data file not exists or access denied
      发表于8个月前 (03-04)回复

      @wainirt 有啥提示没?

  7.  8楼
    wainirt
    wainirt 【农民】(  Google Chrome 61.0.3163.79   Windows 7 ) 来自: IP data file not exists or access denied
    发表于8个月前 (03-04)回复

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

  8.  7楼
    dsuyh
    dsuyh 【农民】(  Google Chrome 69.0.3497.100   Windows 10 ) 来自: IP data file not exists or access denied
    发表于1年前 (2019-08-22)回复

    非常不错啊

  9.  6楼
    红尘
    红尘 【农民】(  Google Chrome 63.0.3239.132   Windows 7 ) 来自: IP data file not exists or access denied
    发表于2年前 (2019-04-09)回复

    学习了

  10.  5楼
    微笑
    微笑 【农民】(  Google Chrome 69.0.3497.100   Windows 10 ) 来自: IP data file not exists or access denied
    发表于2年前 (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 ) 来自: IP data file not exists or access denied
    发表于2年前 (2019-04-05)回复

    值得收藏

  12.  地板
    1
    1 【农民】(  Firefox 66.0   Windows 10 ) 来自: IP data file not exists or access denied
    发表于2年前 (2019-04-01)回复

  13.  板凳
    佐语先森
    佐语先森 【农民】(  QQBrowser 10.3.3006.400   Windows 7 ) 来自: IP data file not exists or access denied
    发表于2年前 (2019-03-13)回复

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

    • 伊阳
      伊阳【站长】(  Google Chrome 61.0.3163.128   Android 9 ) 来自: IP data file not exists or access denied
      发表于2年前 (2019-03-13)回复

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

  14.  沙发
    Fatansy
    Fatansy 【农民】(  Google Chrome 64.0.3282.204   Windows 10 ) 来自: IP data file not exists or access denied
    发表于2年前 (2019-03-04)回复

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

    • 伊阳
      伊阳【站长】(  Google Chrome 61.0.3163.128   Android 9 ) 来自: IP data file not exists or access denied
      发表于2年前 (2019-03-04)回复

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