WordPress文章归档页代码修改篇

前文我们说了《WordPress 归档页面模板》的实现,Gavin目前也是使用的Zww的输出代码,但不知道什么原因,有时候即使更新了文章,输出时依然没有更新输出列表,所以后来,Gavin修改了Zww大神的代码,去除了缓存,同时也没有使用他的JS代码,他给的代码有点烦琐,不便于维护,我修改了网上找的另一段JS代码。不多说了上代码:

一、修改输出列表,去除缓存。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//Archives list
function zww_archives_list() {
 
    $output = '<div id="archives" class="car-container car-collapse"><a class="car-toggler" href="#">全部展开</a>';
    $args = array(
      'post_type' => 'post', //如果你有多个 post type,可以这样 array('post', 'product', 'news')  
      'posts_per_page' => -1, //全部 posts
      'ignore_sticky_posts' => 1 //忽略 sticky posts
    );
    $the_query = new WP_Query( $args );
    $posts_rebuild = array();
    $year = $mon = 0;
    while ( $the_query->have_posts() ) : $the_query->the_post();
      $post_year = get_the_time('Y');
      $post_mon = get_the_time('m');
      $post_day = get_the_time('d');
      if ($year != $post_year) $year = $post_year;
      if ($mon != $post_mon) $mon = $post_mon;
      $posts_rebuild[$year][$mon][] = '<li>'. get_the_time('d日: ') .'<a href="'. get_permalink() .'">'. get_the_title() .'</a>
      <em>('
. get_comments_number('0', '1', '%') .')</em></li>';
    endwhile;
    wp_reset_postdata();
    foreach ($posts_rebuild as $key_y => $y) {
      $output .= '<h3 class="al_year">'. $key_y .' 年</h3><ul class="al_mon_list">'; //输出年份
      foreach ($y as $key_m => $m) {
        $posts = ''; $i = 0;
        foreach ($m as $p) {
          ++$i;
          $posts .= $p;
        }
        $output .= '<li><span class="al_mon">'. $key_m .' 月 <em> ( '. $i .' 篇文章 )</em></span><ul class="al_post_list">'; //输出月份
        $output .= $posts; //输出 posts
        $output .= '</ul></li>';
      }
      $output .= '</ul>';
    }
    $output .= '</div>';
   
    echo $output;
}

二、自用JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 //日志归档
jQuery(document).ready(function() {
jQuery('.car-collapse').find('.al_post_list').hide();
jQuery('.car-collapse').find('.al_post_list:first').show();
jQuery('.car-collapse').find('.al_mon').click(function() {
jQuery(this).next('ul').slideToggle('fast');});
jQuery('.car-collapse').find('.car-toggler').click(function() {
if ( '全部展开' == jQuery(this).text() ) {
jQuery(this).parent('.car-container').find('.al_post_list').show();
jQuery(this).text('全部收起');            }
else {
jQuery(this).parent('.car-container').find('.al_post_list').hide();
jQuery(this).text('全部展开');            }
return false;
});
});

三、自用CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.car-toggler{border:0px solid #39f;padding:2px 6px;float:right;border-radius:3px;}
a.car-toggler{background:#39f;color:#fff;text-decoration:none;}
a:hover.car-toggler{color:#fff;background:#313131;}
#archives h3.al_year{border-bottom:1px double #39f;border-left:none;text-align:center;background:none;color:#39f;margin:10px 0;}
#archives ul li {list-style: disc inside url(img/caret_right.gif);}
#archives li a{color:#515151;text-decoration:none;}
#archives li a:hover{color:#39f;}
#archives em{font-style:normal;}
ul.al_mon_list{border:0px solid red;padding:10px;}
ul.al_post_list{padding-left:30px;}
.al_post_list li{line-height:200%;}
.al_post_list li em{color:#39f;}
.al_mon{font-weight:600;font-size:14px;cursor:s-resize;}
#al_expand_collapse{border:1px solid #39f;padding:2px 6px;border-radius:3px;}
a#al_expand_collapse{color:#39f;}

给我留言