今天给大家推荐的是一款时间轴样式的Wordpress文章归档页面，个人觉得比普通的归档页更加高大上一些，这里分享给大家，喜欢的可以拿去使用下。

使用方法：自定一个模板，复制php、css、js 部分到自定的模板中，然后新建页面，启用该模板即可。

第一步：复制以下PHP代码，添加到需要调用的位置

<div id=”archives”>
<div id=”archives-content”>
<?php
$the_query = new WP_Query( ‘posts_per_page=-1&ignore_sticky_posts=1’ );
$year=0; $mon=0; $i=0; $j=0;
$all = array();
$output = ”;
while ( $the_query->have_posts() ) : $the_query->the_post();
$year_tmp = get_the_time(‘Y’);
$mon_tmp = get_the_time(‘n’);
$y=$year; $m=$mon;
if ($mon != $mon_tmp && $mon > 0) $output .= ‘</div></div>’;
if ($year != $year_tmp) { // 输出年份
$year = $year_tmp;
$all[$year] = array();
}
if ($mon != $mon_tmp) { // 输出月份
$mon = $mon_tmp;
array_push($all[$year], $mon);
$output .= “<div class=’archive-title’ id=’arti-$year-$mon’><h3>$year-$mon</h3><div class=’archives archives-$mon’ data-date=’$year-$mon’>”;
}
$output .= ‘<div class=”brick”><a href=”‘.get_permalink() .'”><span class=”time”>’.get_the_time(‘n-d’).'</span>’.get_the_title() .'<em>(‘. get_comments_number(‘0’, ‘1’, ‘%’) .’)</em></a></div>’;
endwhile;
wp_reset_postdata();
$output .= ‘</div></div>’;
echo $output;

$html = “”;
$year_now = date(“Y”);
foreach($all as $key => $value){// 输出左侧年份表
$html .= “<li class=’year’ id=’year-$key’><a href=’#’ class=’year-toogle’ id=’yeto-$key’>$key</a><ul class=’monthall’>”;
for($i=12; $i>0; $i–){
if($key == $year_now && $i > $value[0]) continue;
$html .= in_array($i, $value) ? (“<li class=’month monthed’ id=’mont-$key-$i’>$i</li>”) : (“<li class=’month’>$i</li>”);
}
$html .= “</ul></li>”;
}
?>
</div>
<div id=”archive-nav”>
<ul class=”archive-nav”><?php echo $html;?></ul>
</div>
</div><!– #archives –>

第二步：复制以下参考CSS样式到你的主题style.css文件内

#archives:after {
clear: both;
display: block;
visibility: hidden;
height: 0!important;
content: ” “;
font-size: 0!important;
line-height: 0!important
}

#archives {
zoom: 1
}

#archives-content {
float: right;
width: 550px
}

#archive-nav {
float: left;
width: 50px
}

.archive-nav {
display: block;
position: fixed;
background: #f9f9f9;
width: 40px;
padding: 5px;
border: 1px solid #eee;
text-align: center
}

.year {
border-top: 1px solid #ddd
}

.month {
color: #ccc;
padding: 5px;
cursor: pointer;
background: #f9f9f9
}

.month.monthed {
color: #777
}

.month.selected,.month:hover {
background: #f2f2f2
}

.monthall {
display: none
}

.year.selected .monthall {
display: block
}

.year-toogle {
display: block;
padding: 5px;
text-decoration: none;
background: #eee;
color: #333;
font-weight: bold
}

.archive-title {
padding-bottom: 40px
}

.brick {
margin-bottom: 10px
}

.archives a {
position: relative;
display: block;
padding: 10px;
background-color: #f9f9f9;
color: #333;
font-style: normal;
line-height: 18px
}

.time {
color: #888;
padding-right: 10px
}

.archives a:hover {
background: #eee
}

#archives h3 {
padding-bottom: 10px
}

.brick em {
color: #aaa;
padding-left: 10px
}

第三步：添加以下JS代码到你的主题JS内

jQuery(document).ready(function($) {
var old_top = $(“#archives”).offset().top,
_year = parseInt($(“.year:first”).attr(“id”).replace(“year-“, “”));
$(“.year:first, .year .month:first”).addClass(“selected”);
$(“.month.monthed”).click(function() {
var _this = $(this),
_id = “#” + _this.attr(“id”).replace(“mont”, “arti”);
if (!_this.hasClass(“selected”)) {
var _stop = $(_id).offset().top – 10,
_selected = $(“.month.monthed.selected”);
_selected.removeClass(“selected”);
_this.addClass(“selected”);
$(“body, html”).scrollTop(_stop)
}
});
$(“.year-toogle”).click(function(e) {
e.preventDefault();
var _this = $(this),
_thisp = _this.parent();
if (!_thisp.hasClass(“selected”)) {
var _selected = $(“.year.selected”),
_month = _thisp.children(“ul”).children(“li”).eq(0);
_selected.removeClass(“selected”);
_thisp.addClass(“selected”);
_month.click()
}
});
$(window).scroll(function() {
var _this = $(this),
_top = _this.scrollTop();
if (_top >= old_top + 10) {
$(“.archive-nav”).css({
top: 10
})
} else {
$(“.archive-nav”).css({
top: old_top + 10 – _top
})
}
$(“.archive-title”).each(function() {
var _this = $(this),
_ooid = _this.attr(“id”),
_newyear = parseInt(_ooid.replace(/arti-(/d*)-/d*/, “$1”)),
_offtop = _this.offset().top – 40,
_oph = _offtop + _this.height();
if (_top >= _offtop && _top < _oph) {
if (_newyear != _year) {
$(“#year-” + _year).removeClass(“selected”);
$(“#year-” + _newyear).addClass(“selected”);
_year = _newyear
}
var _id = _id = “#” + _ooid.replace(“arti”, “mont”),
_selected = $(“.month.monthed.selected”);
_selected.removeClass(“selected”);
$(_id).addClass(“selected”)
}
})
})
});