之前我們分享過一篇 《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: “”
}
以上，保存，新建頁面，啓用該模板即可。 CSS 樣式請根據各位的主題進行簡單修改即可！