本文要讲的文章归档，其实就是将所有文章按照年月日归档，说白了就是一个简单的网站文章地图。方法来自 zwwooooo 大师的《代码实现WordPress归档页面模板[WP原生函数篇] 》。WordPress大学目前已经用上，效果如下：
想看实际演示的，请访问 文章存档
折腾功能：代码实现WordPress归档页面模板[WP原生函数篇]
原创作者：zwwooooo
特点：
1. 按照年份、月份显示文章列表
2. 显示每月的文章数量（需要配合及jQuery）
3. 显示每篇文章的评论数
4. 使用 WordPress 原生函数实现数据调用
5. 这个存档函数会在数据库生成一个表 zww_archives_list 来做缓存，只在发表/修改文章时才更新，减少数据库查询。
6. 即使不使用第5点的数据库缓存功能也比以前的直接 SQL 语句省资源。
制作步骤：
1. 把下面的函数扔到所用主题的 functions.php 文件最后一个 ?> 的前面：（注意：因为有中文，所以要把 functions.php 文件转换为 UTF8 无 BOM 格式，不然中文会乱码）
/* 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>'. $year .' 年</h3><ul>'; //输出年份}if ($mon != $mon_tmp) { $mon = $mon_tmp; $output .= '<li><span>'. $mon .' 月</span><ul>'; //输出月份} $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'); // 新发表文章/修改文章时2. 复制一份主题的 page.php 更名为 archives.php，然后在最顶端加入：
<?php/*Template Name: archives*/?>
然后找到类似 <?php content(); ?>，在其下面加入如下代码
<?php zww_archives_list(); ?>
进wp后台添加一新页面，在右侧栏【页面属性】模板选择 archives
3. 给主题加载 jQuery 库，没有加载的，把下面这句扔到 functions.php 里面就行了。
wp_enqueue_script('jquery');或者在header.php中添加下面的代码：
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js"></script>
4. jQuery 效果代码
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();});})();});PS：不知道怎么写js文件调用的就直接打开 header.php 并找到 <?php wp_head(); ?>，在其下面加上
<script type="text/javascript">上面那段jQuery代码</script>
4. css根据需要写，不写也可以的。HTML结构：
<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>
Tag：
页面
