一、把以下代码保存为一个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="'%20.%20get_permalink()%20.%20'">' . 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://www.ciyol.cn/wp-content/uploads/2020/05/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://www.ciyol.cn/wp-content/uploads/2020/05/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，可以根据自己的风格来修改。

如果想像西柚的文章归档

1、新建timeLine.php文件，或者下载附件

<?php
/*
Template Name: 时间轴模板
*/get_header();?>
<?php
$frontpage_carousels_type = _opt('frontpage_carousels_type');$type = strstr($frontpage_carousels_type, 'full') ? 'single-imageflow-full':'single-imageflow';get_topSlider(array($post->ID),$type);?><div class="container postListsModel"><div class="row"><?php
if (_opt('is_single_post_hide_sidebar')) {$leftClass = 'col-xs-12 no-sidebar';$rightClass = 'hidden';} else {$leftClass = 'col-md-9 col-lg-9_5';$rightClass = 'col-md-3 col-lg-2_5 hidden-xs hidden-sm';}?><div class="<?php echo $leftClass; ?>"><div class="col-xs-12">
<div class="row postLists"><div class="toggle_sidebar" @click="this.single_toggle_sidebar()" data-toggle="tooltip" data-placement="auto top" title="切换边栏"><i class="fas fa-angle-right"></i></div>
<div class="article_wrapper post clearfix page">
<article class="clearfix">
<style>
.archives-title{border-bottom:1px #eee solid;position:relative;padding-bottom:4px;margin-bottom:10px}    
.archives li a{padding:8px 0;display:block}
.archives li a:hover .atitle:after{background:#ff5c43}
.archives li a span{display: inline-block;width:100px;font-size:12px;text-indent:20px;}
.archives li a .atitle{display: inline-block;padding:0 15px;position:relative}
.archives li a .atitle:after{position:absolute;left:-6px;background:#ccc;height:8px;width:8px;border-radius:6px;top:8px;content:""}
.archives li a .atitle:before{position:absolute;left:-8px;background:#fff;height:12px;width:12px;border-radius:6px;top:6px;content:""}
.archives{position:relative;padding:10px 0}
.archives:before{height:100%;width:4px;background:#eee;position:absolute;left:100px;content:"";top:0}
.m-title{position:relative;margin:10px 0;cursor:pointer}    
.m-title:hover:after{background:#ff5c43}
.m-title:before{position:absolute;left:93px;background:#fff;height:0px;width:18px;border-radius:6px;top:3px;content:""}
.m-title:after{position:absolute;left:96px;background:#ccc;height:12px;width:12px;border-radius:6px;top:6px;content:""}
</style>
<div class="archives">
<?php
$previous_year = $year = 0;
$previous_month = $month = 0;
$ul_open = false;
$myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');


    


foreach($myposts as $post) :
setup_postdata($post);
$year = mysql2date('Y', $post->post_date);
$month = mysql2date('n', $post->post_date);
$day = mysql2date('j', $post->post_date);
if($year != $previous_year || $month != $previous_month) :
if($ul_open == true) : 
echo '</ul>';
endif;
echo '<h3 class="m-title">'; echo the_time('Y-m'); echo '</h3>';

echo '<ul class="archives-monthlisting">';
$ul_open = true;
endif;
$previous_year = $year; $previous_month = $month;
?>

<?php //初始参数
$posttype = get_post_type();switch ($posttype) {case 'post':
$thumbnail = get_the_post_thumbnail_url();$tags = get_the_tags();break;case 'gallery':
$gallery_images = get_post_meta(get_the_id(), "gallery_images",true);$gallery_images = $gallery_images ? $gallery_images : array();switch (get_option('gallery_thumbnail')) {case 'first':
$thumbnail = $gallery_images[0];break;case 'last':
$thumbnail = $gallery_images[count($gallery_images) - 1];break;default:
$thumbnail = count($gallery_images) > 0 ? $gallery_images[array_rand($gallery_images,1)] : '';break;}$tags = get_the_terms(get_the_ID(),'gallery-tag');break;default:
$thumbnail = '';break;}
?>

<div class="wp-block-pandastudio-single" posttype="post">
<div class="single-wrapper">
<a class="cover" style="background-image:url(<?php echo $thumbnail; ?>);" href="<?php%20the_permalink();%20?>"></a><!-- 获取文章图片 地址  -->
<div class="single-meta">
<a class="post-title" href="<?php%20the_permalink();%20?>"><!-- 获取文章地址  -->
<h4><?php the_title(); ?></h4><!-- 获取文章标题  -->
</a>
<div class="summary">
<span class="date"><i class="far fa-clock"></i> <?php the_time('Y-m-j'); ?></span><!-- 获取时间 -->
<span class="likes"><i class="fas fa-heart"></i> <?php $like = get_post_meta($post->ID,'bigfa_ding',true) ? get_post_meta($post->ID,'bigfa_ding',true) : "0" ; echo $like;?></span><!-- 获取点赞数量 -->
<span class="comments"><i class="fas fa-comments"></i> <?php echo $post->comment_count ?></span><!-- 获取评论数量 -->
</div>
</div>
</div>
</div>

<?php endforeach; ?>
</ul>
</div>
<script>
$('.archives ul.archives-monthlisting').hide();
$('.archives ul.archives-monthlisting:first').show();
$('.archives .m-title').click(function() {
$(this).next().slideToggle('fast');
return false;
});
</script>
</article>
</div>
<?php comments_template(); ?>
</div></div></div>
<div class="<?php echo $rightClass; ?>">
<div class="row">
<div class="sidebar sidebar-affix">
<div manual-template="sidebarMenu"></div>
<div manual-template="sidebar"></div>
</div>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>

2、后台页面-新建页面-标题输入”文章归档“-输入别名“archives“

3、模板选择”时间轴模板“-然后点发布即可