之前我们分享过一篇《WordPress个性时间轴文章归档页面》的教程，反响还是挺不错的，但是少数朋友在添加JS以后，导致和原主题JS有所冲突，所以今天在这里，珞凡再为各位介绍一种纯CSS打造的时间轴归档页面的实现方法，具体效果如上图所示。

第一步：自定义模板并复制以下PHP代码到需要的位置

<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 ‘<h4 class=”m-title”>’; echo the_time(‘Y-m’); echo ‘</h4>’;
echo ‘<ul class=”archives-monthlisting”>’;
$ul_open = true;
endif;
$previous_year = $year; $previous_month = $month;
?>
<li>
<a href=”<?php the_permalink(); ?>”><span><?php the_time(‘Y-m-j’); ?></span>
<div class=”atitle”><?php the_title(); ?></div></a>
</li>
<?php endforeach; ?>
</ul>
</div>

第二步：添加如下参考CSS样式

.archive-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: -2px;
background: #ccc;
height: 8px;
width: 8px;
border-radius: 6px;
top: 8px;
content: “”
}
.archives li a .atitle:before {
position: absolute;
left: -4px;
background: #fff;
height: 12px;
width: 12px;
border-radius: 6px;
top: 6px;
content: “”
}
.archives {
position: relative;
padding: 10px 0
}
.archives:before {
height: 95%;
width: 4px;
background: #e6e6e6;
position: absolute;
left: 100px;
content: “”;
top: 30px;
}
.m-title {
position: relative;
margin: 10px 0;
cursor: pointer
}
.m-title:hover:after {
background: #ff5c43
}
.m-title:before {
position: absolute;
left: 94px;
background: #fff;
height: 16px;
width: 16px;
border-radius: 8px;
top: 8px;
content: “”
}
.m-title:after {
position: absolute;
left: 96px;
background: #ccc;
height: 12px;
width: 12px;
border-radius: 6px;
top: 10px;
content: “”
}