WordPress 代码实现文章归档单独页面
文章归档页面，将所有文章按照年月日归档，方法来自 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;} |
放上效果图
也可以参考本站归档页面
