• A+

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

   2019-03-03    阅读: 221 次    评论 8 条       百度已收录
知其雄,守其雌;知其白,守其黑;知其荣,守其辱。——老子
本文共779个字,预计阅读时间需要2分钟。

温馨提示

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

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

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

显示效果

1、将下列代码粘贴到当前主题的inc/functions文件夹的widgets.php下即可。
  1. class zonghe_post extends WP_Widget {
  2.  function __construct(){
  3.  parent::__construct('zonghe_post', '主题  Tab三分栏, array('description' => '包括站长推荐、热门文章和热评文章。') );
  4.  }
  5.  function widget($args, $instance) {
  6.  extract($args);
  7.  echo $before_widget;
  8.  $number = strip_tags($instance['number']) ? absint( $instance['number'] ) : 6;
  9.  $days = strip_tags($instance['days']) ? absint( $instance['days'] ) : 90;
  10. ?>
  11.  <ul id="top_post_filter">
  12.  <li id="zhan_post" class="top_post_filter_active">站长推荐</li>
  13.  <li id="men_post" class="">热门文章</li>
  14.  <li id="ping_post" class="">热评文章</li>
  15.  </ul>
  16.  <div id="tab-content" class="investment_con">
  17.  <div class="investment_con_list" style="display:block;">
  18.  <ul class="tab_post_links">
  19.  <?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(); ?>
  20.  <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> 
  21.  <?php endwhile;wp_reset_query();?>
  22.  </ul>
  23.  </div> 
  24.  <div class="investment_con_list" style="display:none;">
  25.  <ul class="tab_post_links">
  26.  <?php get_timespan_most_viewed('post',$number,$days, true, true);wp_reset_query(); ?>
  27.  </ul>
  28.  </div>
  29.  <div class="investment_con_list" style="display:none;">
  30.  <ul class="tab_post_links">
  31.  <?php hot_comment_viewed($number, $days);wp_reset_query(); ?> 
  32.  </ul>
  33.  </div>
  34.  </div>
  35. <?php
  36.  echo $after_widget;
  37.  }
  38.  function update( $new_instance, $old_instance ) {
  39.  if (!isset($new_instance['submit'])) {
  40.  return false;
  41.  }
  42.  $instance = $old_instance;
  43.  $instance = array();
  44.  $instance['number'] = strip_tags($new_instance['number']);
  45.  $instance['days'] = strip_tags($new_instance['days']);
  46.  return $instance;
  47.  }
  48.  function form($instance) {
  49.  global $wpdb;
  50.  $instance = wp_parse_args((array) $instance, array('number' => '6'));
  51.  $instance = wp_parse_args((array) $instance, array('days' => '90'));
  52.  $number = strip_tags($instance['number']);
  53.  $days = strip_tags($instance['days']);
  54. ?>
  55.  <p><label for="<?php echo $this->get_field_id('number'); ?>">显示数量:</label>
  56.  <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>
  57.  <p><label for="<?php echo $this->get_field_id('days'); ?>">时间限定(天):</label>
  58.  <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>
  59.  <input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" />
  60. <?php }
  61. }
  62. add_action( 'widgets_init', create_function( '', 'register_widget( "zonghe_post" );' ) );
2、将下列两个hot_comment_viewed.php和hot-post-viewed.php放到当前主题的inc/functions文件夹下。
此处为隐藏的内容!
发表评论并刷新,才能查看
3、将下列代码加到当前主题的functions.php的?>前。
  1. // 热门文章
  2. require get_template_directory() . '/inc/functions/hot-post-viewed.php';
  3. // 热评文章
  4. require get_template_directory() . '/inc/functions/hot_comment_viewed.php';
4、将下面的js代码粘贴到主题的任一js文件内。
  1. $(document).ready(function(){
  2.  $('.investment_con').each(function(){
  3.  $(this).children().eq(0).show();
  4.  });
  5.  $('#top_post_filter').each(function(){
  6.  $(this).children().eq(0).addClass('top_post_filter_active');
  7.  });
  8.  $('#top_post_filter').children().mouseover(function(){
  9.  $(this).addClass('top_post_filter_active').siblings().removeClass('top_post_filter_active');
  10.  var index = $('#top_post_filter').children().index(this);
  11.  $('.investment_con').children().eq(index).show().siblings().hide();
  12.  });
  13. });
注意:如使用的是NANA主题需删除当前主题js文件夹下script.php里的31-39行代码
5、下列是部分css样式,可放到主题的style样式里。
  1. #top_post_filter {padding: 0 15px;}
  2. #top_post_filter .top_post_filter_active, #top_post_filter li:hover {border-bottom: 3px solid #c01e22;cursor: pointer;color: #333;font-weight: 700;}
  3. #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;}
  4. .tab_post_links li:first-child {padding-top: 10px;}
  5. .li-icon-1 {background: #c01e22;}
  6. .li-icon-2 {background: #23b7e5;}
  7. .li-icon-3 {background: #6E8B3D;}
  8. .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有关,自己可自行调整。

本文地址:https://www.chyiyang.cn/76.html
本文标题:WordPress Tab三分栏文章样式实现方法
版权声明:本站所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果,转载请写明出处!
所属分类:WordPress

发表评论


表情

目前评论:8 条  其中:访客  6 条  站长  2 条
  1. 红尘
    红尘 【农民】 回复

    学习了

  2. 微笑
    微笑 【农民】 回复

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

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

  3. 微笑
    微笑 【农民】 回复

    值得收藏

  4. 1
    1 【农民】 回复

  5. 佐语先森
    佐语先森 【农民】 回复

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

  6. Fatansy
    Fatansy 【农民】 回复

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

    • 伊阳
      伊阳【站长】2019-03-04 at 15:40  回复

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