WordPress 归档页面 使用方法：自定一个模板，复制php、css、js 部分到自定的模板中，然后新建页面，启用该模板即可。代码部分1、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 --> 2、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  } 3、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") } }) }) });