WordPress 代码实现文章归档单独页面

GavinWu 2021年01月09日 Wordpress 843 次阅读

文章归档页面,将所有文章按照年月日归档,方法来自 zwwooooo 大师的《代码实现WordPress归档页面模板[WP原生函数篇] 》。

一、把下面的代码扔到所用主题的 functions.php 文件

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
/* Archives list by zwwooooo | http://zww.me */
 function zww_archives_list() {
     if( !$output = get_option('zww_archives_list') ){
         $output = '<div id="archives"><p>[<a id="al_expand_collapse" href="#">全部展开/收缩</a>] <em>(注: 点击月份可以展开)</em></p>';
         $the_query = new WP_Query( 'posts_per_page=-1&ignore_sticky_posts=1' ); //update: 加上忽略置顶文章
         $year=0; $mon=0; $i=0; $j=0;
         while ( $the_query->have_posts() ) : $the_query->the_post();
             $year_tmp = get_the_time('Y');
             $mon_tmp = get_the_time('m');
             $y=$year; $m=$mon;
             if ($mon != $mon_tmp && $mon > 0) $output .= '</ul></li>';
             if ($year != $year_tmp && $year > 0) $output .= '</ul>';
             if ($year != $year_tmp) {
                 $year = $year_tmp;
                 $output .= '<h3 class="al_year">'. $year .' 年</h3><ul class="al_mon_list">'; //输出年份
             }
             if ($mon != $mon_tmp) {
                 $mon = $mon_tmp;
                 $output .= '<li><span class="al_mon">'. $mon .' 月</span><ul class="al_post_list">'; //输出月份
             }
             $output .= '<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();
         $output .= '</ul></li></ul></div>';
         update_option('zww_archives_list', $output);
     }
     echo $output;
 }
 function clear_zal_cache() {
     update_option('zww_archives_list', ''); // 清空 zww_archives_list
 }
 add_action('save_post', 'clear_zal_cache'); // 新发表文章/修改文章时

二、建立归档页面

根据主题不同DIV不做细说,一般可以通过把主题的 page.php 更名为 archives.php,然后在最前面加入

1
2
3
4
5
6
7
<?php
/*
Template Name: archives
*/

?>

<?php zww_archives_list(); ?>

然后把

1
<?php content(); ?>

替换成

1
<?php zww_archives_list(); ?>

最后,后台添加一新页面模板选择 archives。即可!

三、加载JS,文件,可以单独加载,也可以放在主题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
jQuery(document).ready(function($){
 //===================================存档页面 jQ伸缩
     (function(){
         $('#al_expand_collapse,#archives span.al_mon').css({cursor:"s-resize"});
         $('#archives span.al_mon').each(function(){
             var num=$(this).next().children('li').size();
             var text=$(this).text();
             $(this).html(text+'<em> ( '+num+' 篇文章 )</em>');
         });
         var $al_post_list=$('#archives ul.al_post_list'),
             $al_post_list_f=$('#archives ul.al_post_list:first');
         $al_post_list.hide(1,function(){
             $al_post_list_f.show();
         });
         $('#archives span.al_mon').click(function(){
             $(this).next().slideToggle(400);
             return false;
         });
         $('#al_expand_collapse').toggle(function(){
             $al_post_list.show();
         },function(){
             $al_post_list.hide();
         });
     })();
 });

四、CSS样式

这个没什么好说的,参考下面的HTML结构自己写一下

1
2
3
4
5
6
7
8
9
10
11
<div id="archives">
     <p>[<a id="al_expand_collapse" href="#">全部展开/收缩</a>] <em>(注: 点击月份可以展开)</em></p>
     <h3 class="al_year">'年份</h3>
     <ul class="al_mon_list">
         <li><span class="al_mon">月份<em> (本月文章数量)</em></span>
             <ul class="al_post_list">
                 <li>号数: <a href="文章链接">文章标题</a> <em>(评论数量)</em></li>
             </ul>
         </li>
     </ul>
 </div>

这里有自己写的简单样式,可以参考一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/** 归档页 **/
.car-toggler{padding:2px 6px;float:right;border-radius:3px;}
a.car-toggler{background:#313131;color:#fff;text-decoration:none;font-weight:600;}
a:hover.car-toggler{color:#fff;background:#39f;}
h3.al_year{border-color:#1f77d7;float:left;color:#1f77d7;width:100%;}
ul.al_mon_list{padding:10px;}
ul.al_mon_list li{list-style:square;line-height:2.4;}
.al_mon{font-weight:600;font-size:16px;cursor:s-resize;color:#313131;}
ul.al_post_list{padding-left:10px;}
ul.al_post_list li{list-style: circle;line-height:2.4;}
#archives ul li {color:#313131;}
#archives li a{color:#313131;}
#archives li a:hover{color:#39f;}
#archives em{font-style:normal;font-weight:400;color:#888;}
.al_day{color:#888;}

放上效果图


也可以参考本站归档页面

  • 分享到:
  • 暂无相关文章

发表评论