Wordpress的文章归档还是很有必要的，特别是文章多了之后，用归档可以很方便的找到想要找的文章，网上有很多的插件可以实现这个功能，不过我们喜欢折腾，那么就不用插件，而是使用代码来实现。

WordPress的文章归档还是很有必要的，特别是文章多了之后，用归档可以很方便的找到想要找的文章，网上有很多的插件可以实现这个功能，不过我们喜欢折腾，那么就不用插件，而是使用代码来实现。

如果在配合Jquery的话，可以实现非常棒的伸缩效果，同时还增加了按年来选择的功能。

效果预览

下面我就说下简单的操作方法。

1、把下面的代码添加到主题的 functions.php 里面；

//日志归档 class article_archive function get_posts() global $wpdb,$rawposts; if ( $posts = wp_cache_get( 'posts', 'iarticle-clean-archive' ) ) return $posts; $query="SELECT DISTINCT ID,post_date,post_date_gmt,comment_count,post_password FROM $wpdb->posts WHERE AND"; $rawposts =$wpdb->get_results( $query, OBJECT ); foreach( $rawposts as $key => $post ) { if (!is_array($posts)) { $posts = []; $posts[ mysql2date( 'Y.m', $post->post_date ) ][] = $post; $rawposts[$key] = null; $rawposts = null; wp_cache_set( 'posts', $posts, 'iarticle-clean-archive' ); return $posts; function post_list( $atts = array() ) global $wp_locale; global $article_clean_archive_config; $atts = shortcode_atts(array( 'usejs' => $article_clean_archive_config['usejs'], 'monthorder' => $article_clean_archive_config['monthorder'], 'postorder' => $article_clean_archive_config['postorder'], 'postcount' => '1', 'commentcount' => '1', ), $atts); $atts=array_merge(array('usejs' => 1, 'monthorder' => 'new', 'postorder' => 'new'),$atts); $posts = $this->get_posts(); ( 'new' == $atts['monthorder'] ) ? krsort( $posts ) : ksort( $posts ); foreach( $posts as $key => $month ) { $sorter = array(); foreach ( $month as $post ) $sorter[] = $post->post_date_gmt; $sortorder = ( 'new' == $atts['postorder'] ) ? SORT_DESC : SORT_ASC; array_multisort( $sorter, $sortorder, $month ); $posts[$key] = $month; unset($month); $html = ''. "\n"; if (= $atts['usejs'] ) $html .= '展开所有月份'."\n"; $html .= '' . "\n"; $first_month = TRUE; foreach( $posts as $yearmonth => $posts ) { list( $year, $month ) = explode( '.', $yearmonth ); $first_post = TRUE; foreach( $posts as $post ) { if (= $first_post ) { $spchar = $first_month ? '-' : '+'; $html .= ''.$spchar.' ' . sprintf( __('%1$s %2$d'), $wp_locale->get_month($month), $year ); if ( '0' != $atts['postcount'] ) $html .= '(共' . count($posts) . '篇文章)'; if ($first_month == FALSE) { $html .= "\n\n"; } else { $html .= "\n\n"; $first_post = FALSE; $first_month = FALSE; $html .= '' . mysql2date( 'd', $post->post_date ) . '日: ID ) . '">' . get_the_title( $post->ID ) . ''; if ( !empty($post->post_password) ) $html .= ""; elseif ( '0' == $post->comment_count ){ $html .= '（暂无评论）'; elseif ( '0' != $post->comment_count ) $html .= '（' . $post->comment_count . ' 条评论）'; $html .= "\n"; $html .= "\n\n"; $html .= "\n\n"; return $html; function post_count() $num_posts = wp_count_posts( 'post' ); return number_format_i18n( $num_posts->publish );if(!empty($post->post_content)) $all_config = explode(';',$post->post_content); foreach($all_config as $item) $temp = explode('=',$item); $article_clean_archive_config[trim($temp[0])] = htmlspecialchars(strip_tags(trim($temp[1]))); $article_clean_archive_config = array('usejs' => 1, 'monthorder' => 'new', 'postorder' => 'new');$article_archive = new article_archive();

2、复制一份主题的 page.php 更名为 archives.php，然后在最顶端加入：

?phpTemplate Name: archives

3、再然后找到类似 ，在其下面加入如下代码

p strong ?php bloginfo('name'); ? /strong 目前共有 ?php echo intval(wp_count_posts()- publish); ? 篇文章， ?php $comment_count = $wpdb- get_var("SELECT COUNT(*) FROM $wpdb- comments WHERE"); echo $comment_count; ? 条评论。 /p ?php global $article_archive; echo $article_archive->post_list(); ?

进wp后台添加一新页面，在右侧栏模板选择 archives。

4、如果你的主题本身加载了 jQuery 库，那么继续把下面的 jQ 代码加上去，就会有滑动伸缩效果了。

scripttext/javascript jQuery(document).ready(function() { function setsplicon(c, d) { if (c.html()=='+' ||='+') { c.html('-'); c.removeClass('car-plus'); c.addClass('car-minus'); } else if( !d ||='-'){ c.html('+'); c.removeClass('car-minus'); c.addClass('car-plus');jQuery('div.car-collapse').find('span.car-yearmonth').click(function(e /* 1. 增加事件参数e */) { jQuery(this).next('ul').slideToggle('fast'); setsplicon(jQuery(this).find('.car-toggle-icon')); e.stopImmediatePropagation(); // 2. 停止向上冒泡并且阻止元素绑定的同类型事件jQuery('div.car-collapse').find('.car-toggler').click(function(e /* 1. 增加事件参数e */) { if ( '展开所有月份' == jQuery(this).text() ) { jQuery(this).parent('.car-container').find('.car-monthlisting').show(); jQuery(this).text('折叠所有月份'); setsplicon(jQuery('.car-collapse').find('.car-toggle-icon'), '+'); else { jQuery(this).parent('.car-container').find('.car-monthlisting').hide(); jQuery(this).text('展开所有月份'); setsplicon(jQuery('.car-collapse').find('.car-toggle-icon'), '-'); e.stopImmediatePropagation(); // 2. 停止向上冒泡并且阻止元素绑定的同类型事件 return false;jQuery("#archive-selector").change(function(){varparseInt(jQuery("#archive-selector").find("option:selected").val(), 10); if (selval == 0) { jQuery(".car-list li[class^='car-pubyear-']").show(); } else { jQuery.each(jQuery(".car-list li[class^='car-pubyear-']"), function(i, obj){ varparseInt(obj.className.replace("car-pubyear-", ""), 10); if (selval == orgval) obj.style.display=''; else obj.style.display='none';jQuery("#archive-selector").append(" 全部 ");jQuery.each(jQuery(".car-list li[class^='car-pubyear-']"), function(i, obj){ varobj.className.replace("car-pubyear-", ""); if (jQuery("#archive-selector option[value=" + year1 + "]").length " + year1 + "年 "); /script

css 样式如下，当然你也可以自定义，ok，搞定。

.articles_all{line-height:30px;padding-left:15px;}.car-container{padding:0 15px 10px 15px;}.car-collapse .car-yearmonth{cursor:s-resize;}a.car-toggler{line-height:30px;font-size:14px;color:#c30}.car-list li{list-style:none;line-height:24px}.car-list li ul{padding-left:30px}.car-plus, .car-minus{width:15px;display:block;float:left;font-family:Courier New, Lucida Console, MS Gothic, MS Mincho;}select#archive-selector{border:1px #ccc solid;width:80px;height:24px;line-height:24px;margin-right:30px;}.archive-count{padding-left:6px;font-size:12px;color:#777;}