美化文章按日期归档 有伸缩效果

本站的文章归档参考了网上中的一篇文章修改而来。以下是实施的步骤：

一、把以下代码保存为一个Php文件，如：Archives.php，放在主题根目录下

<?php
function zww_archives_list() {
	if ( !$output = get_option( 'zww_db_cache_archives_list' ) ) {
		$output = '<div id="archives"><h3><a id="al_expand_collapse" href="#">全部展开/收缩</a> <small class="text-muted">(注: 点击月份可以展开)</small></h3>';
		$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> <small class="text-muted">(' . get_comments_number( '0', '1', '%' ) . ')</small></li>';
		endwhile;
		wp_reset_postdata();
		foreach ( $posts_rebuild as $key_y => $y ) {
			$output .= '<h4 class="m-title">' . $key_y . ' 年</h4><ul >'; //输出年份
			foreach ( $y as $key_m => $m ) {
				$posts = '';
				$i = 0;
				foreach ( $m as $p ) {
					++$i;
					$posts .= $p;
				}
				$output .= '<li id="limon"><span class="al_mon">' . $key_m . ' 月 <small class="text-muted"> ( ' . $i . ' 篇文章 )</small></span><ul class="al_post_list">'; //输出月份
				$output .= $posts; //输出 posts
				$output .= '</ul></li>';
			}
			$output .= '</ul>';
		}
		$output .= '</div>';
		update_option( 'zww_db_cache_archives_list', $output );
	}
	echo $output;
}
 
function clear_db_cache_archives_list() {
	update_option( 'zww_db_cache_archives_list', '' ); // 清空 zww_archives_list
}
add_action( 'save_post', 'clear_db_cache_archives_list' ); // 新发表文章/修改文章时
?>

二、在主题根目录下找到 functions.php，引用刚才建立的文件

/**
 * 自定义引用归档函数
 */
include('archives.php');

三、然后创建一个模板文件：archives_gd.php页面模板

<?php
/**
 * Template Name: 归档
 */
get_header(); ?>
<style>
/* ---------------文章归档页面样式--------------------*/
 #main-archivest{margin:20px 0;}
.m-title{text-align:center;border-bottom:solid 1px #ccc;font-size: 18px;font-weight: normal}
.al_mon{font-weight:bold;font-size: 16px;}
#archives h3 a{color:#1E8BC3;font-size: 20px;}
#archives .text-muted{color: #666}
#archives ul li {list-style-type:none;}
#archives ul li a{color: #1E8BC3;font-size: 16px;}
#archives ul >li{padding:0 0 8px 5px;border-left:solid 1px #ccc;background-image:url(https://icss.me/wp-content/uploads/2016/12/li.png); padding-left:20px; background-repeat:no-repeat;}
#archives ul>li>ul{margin:0;padding:0;}
#archives ul>li>ul>li{list-style-type:none;background-image:url(https://icss.me/wp-content/uploads/2016/12/li.jpg);background-position:left 0 top 3px; padding-left:20px;background-repeat:no-repeat; border-left:dashed 1px #ccc;}
</style>
<main class="container">
	<div class="row">
		<div class="md-10 md-offset-1">	
			<div><?php zww_archives_list(); ?></div>
		</div>
	</div>
</main>			
<?php get_footer(); ?>
<script type="text/javascript">
( function ( $, window ) {
	$( function () {
		var $a = $( '#archives' ),
			$m = $( '.al_mon', $a ),
			$l = $( '.al_post_list', $a ),
			$l_f = $( '.al_post_list:first', $a );
		$l . hide();
		$l_f . show();
		$m . css( 'cursor', 's-resize' ) . on( 'click', function () {
			$( this ) . next() . slideToggle( 400 );
		} );
		var animate = function ( index, status, s ) {
			if ( index > $l . length ) {
				return;
			}
			if ( status == 'up' ) {
				$l . eq( index ) . slideUp( s, function () {
					animate( index + 1, status, ( s - 10 < 1 ) ? 0 : s - 10 );
				} );
			} else {
				$l . eq( index ) . slideDown( s, function () {
					animate( index + 1, status, ( s - 10 < 1 ) ? 0 : s - 10 );
				} );
			}
		};
		$( '#al_expand_collapse' ) . on( 'click', function ( e ) {
			e . preventDefault();
			if ( $( this ) . data( 's' ) ) {
				$( this ) . data( 's', '' );
				animate( 0, 'up', 100 );
			} else {
				$( this ) . data( 's', 1 );
				animate( 0, 'down', 100 );
			}
		} );
	} );
} )( jQuery, window );
</script>

四、最后在新建一个页面，模板选归档，这里你自定义是叫归档就引用归档之个模板，是其它名字就引用其它名字就行。效果可参阅本站的归档。

注：第三步中已经含有CSS、Jquery，可以根据自己的风格来修改。