给wordpress添加个性化的归档（Archives）页面

2013.09.27 分享 34625 人浏览 20 条留言

关于网站归档页面，很多网站都已经在用了，效果都是很赞，最近看牧风发的一个教程，也是关于归档页面的，不同的是他才用了左侧时间导航的形式，非常美观和方便，然后我根据他的版本改了下样式，就成了我现在的归档页面，见Archives。下面分享下这个代码吧。

来源：牧风

效果：

archives

PHP部分

  1. <div id="archives" class="cobmwarchives">        
  2.     <div id="archives-content">        
  3.     <?php         
  4.         $the_query = new WP_Query( 'posts_per_page=-1&ignore_sticky_posts=1' );        
  5.         $year=0; $mon=0; $i=0; $j=0;        
  6.         $all = array();        
  7.         $output = '';        
  8.         while ( $the_query->have_posts() ) : $the_query->the_post();        
  9.             $year_tmp = get_the_time('Y');        
  10.             $mon_tmp = get_the_time('n');        
  11.             $y=$year; $m=$mon;        
  12.             if ($mon != $mon_tmp && $mon > 0) $output .= '</div></div>';        
  13.             if ($year != $year_tmp) { // 输出年份        
  14.                 $year = $year_tmp;        
  15.                 $all[$year] = array();        
  16.             }        
  17.             if ($mon != $mon_tmp) { // 输出月份        
  18.                 $mon = $mon_tmp;        
  19.                 array_push($all[$year], $mon);        
  20.                 $output .= "<div class='archive-title clearfix' id='arti-$year-$mon'><h3>$year-$mon</h3><div class='archives archives-$mon' data-date='$year-$mon'>";        
  21.             }        
  22.             $output .= '<div class="brick cobmwarchives"><a target="_blank" href="'.get_permalink() .'"><span class="time">'.get_the_time('d日').'</span>'.get_the_title() .'</a>     
  23.             <span class="arch-day">'. get_comments_number('0', '1', '%') .'</span></div>';        
  24.         endwhile;        
  25.         wp_reset_postdata();        
  26.         $output .= '</div></div>';        
  27.         echo $output;        
  28.        
  29.         $html = "";        
  30.         $year_now = date("Y");        
  31.         foreach($all as $key => $value){// 输出 左侧年份表        
  32.             $html .= "<li class='year' id='year-$key'><a href='#' class='year-toogle' id='yeto-$key'>$key</a><ul class='monthall'>";        
  33.             for($i=12; $i>0; $i--){        
  34.                 if($key == $year_now && $i > $value[0]) continue;        
  35.                 $html .= in_array($i, $value) ? ("<li class='month monthed' id='mont-$key-$i'>$i</li>") : ("<li class='month'>$i</li>");        
  36.             }        
  37.             $html .= "</ul></li>";        
  38.         }        
  39.     ?>       
  40.     </div>     
  41.     <div id="archive-nav">        
  42.         <ul class="archive-nav cobmwarchives"><?php echo $html;?></ul>        
  43.     </div>     
  44. </div>    

css部分

  1. /*archives*/  
  2. #archives {zoom: 1}    
  3. .cobmwarchives{padding:10px;text-shadow: none;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);border-radius: 5px;position: relative;   
  4.     -moz-border-radius: 5px;-webkit-border-radius: 5px;margin-bottom: 10px;}   
  5.     #archives:after {clear: both;display: block;visibility: hidden;height: 0!important;content: " ";font-size: 0!important;   
  6.     line-height: 0!important}    
  7.     #archives-content {float: right;width: 630px}   /*宽度自行修改*/
  8.     #archive-nav {float: left;width: 50px}    
  9.     .archive-nav{display:block;position:fixed;width:50px;padding:5px;text-align:center;margin-top: 10px;}   
  10.     .year{border-top:1px solid #ddd}   
  11.     .month{color:#ccc;padding:5px;cursor:pointer}   
  12.     .month.monthed{color:#777}   
  13.     .month.selected,.month:hover{background:#DBD9D9}   
  14.     .monthall{display:none}   
  15.     .year.selected .monthall{display:block}   
  16.     .year-toogle{display:block;padding:5px;text-decoration:none;background:#CCC;color:#333;font-weight:bold}   
  17.     .archive-title{}   
  18.     .brick{float: left;display: inline;width: 143px;height: 100px;margin: 0 10px 10px 0;color: #ccc;font-size: 12px;   
  19.         margin-bottom: 10px;position: relative;padding: 0;}   
  20.     .brick:hover {background: #ddd;}   
  21.     .archives{overflow: hidden;border-left: 1px solid #504F4F;padding-top: 8px;padding-left: 8px;list-style: none;}   
  22.     .archives a{position:relative;display:block;padding:10px;color:#333;font-style:normal;line-height:18px;height: 78px;}   
  23.     .time{color:#888;padding-right:10px;display: block;}   
  24.     #archives h3{}   
  25.     .arch-day {position: absolute;bottom: 0;right: 5px;font-size: 18px;font-weight: bold;color: #DDD;font-style: italic;   
  26.         text-shadow: 0 1px 0 white;}   
  27.     .brick:hover .arch-day {color: #7A7A7A;}  

js部分

  1. jQuery(document).ready(function($) {      
  2.     var old_top = $("#archives").offset().top,      
  3.         _year = parseInt($(".year:first").attr("id").replace("year-", ""));      
  4.     $(".year:first, .year .month:first").addClass("selected");      
  5.     $(".month.monthed").click(function() {      
  6.         var _this = $(this),      
  7.             _id = "#" + _this.attr("id").replace("mont", "arti");      
  8.         if (!_this.hasClass("selected")) {      
  9.             var _stop = $(_id).offset().top - 10,      
  10.                 _selected = $(".month.monthed.selected");      
  11.             _selected.removeClass("selected");      
  12.             _this.addClass("selected");      
  13.             $("body, html").scrollTop(_stop)      
  14.         }      
  15.     });      
  16.     $(".year-toogle").click(function(e) {      
  17.         e.preventDefault();      
  18.         var _this = $(this),      
  19.             _thisp = _this.parent();      
  20.         if (!_thisp.hasClass("selected")) {      
  21.             var _selected = $(".year.selected"),      
  22.                 _month = _thisp.children("ul").children("li").eq(0);      
  23.             _selected.removeClass("selected");      
  24.             _thisp.addClass("selected");      
  25.             _month.click()      
  26.         }      
  27.     });      
  28.     $(window).scroll(function() {      
  29.         var _this = $(this),      
  30.             _top = _this.scrollTop();      
  31.         if (_top >= old_top + 10) {      
  32.             $(".archive-nav").css({      
  33.                 top: 10      
  34.             })      
  35.         } else {      
  36.             $(".archive-nav").css({      
  37.                 top: old_top + 10 - _top      
  38.             })      
  39.         }      
  40.         $(".archive-title").each(function() {      
  41.             var _this = $(this),      
  42.                 _ooid = _this.attr("id"),      
  43.                 _newyear = parseInt(_ooid.replace(/arti-(\d*)-\d*/, "$1")),      
  44.                 _offtop = _this.offset().top - 40,      
  45.                 _oph = _offtop + _this.height();      
  46.             if (_top >= _offtop && _top < _oph) {      
  47.                 if (_newyear != _year) {      
  48.                     $("#year-" + _year).removeClass("selected");      
  49.                     $("#year-" + _newyear).addClass("selected");      
  50.                     _year = _newyear      
  51.                 }      
  52.                 var _id = _id = "#" + _ooid.replace("arti", "mont"),      
  53.                     _selected = $(".month.monthed.selected");      
  54.                 _selected.removeClass("selected");      
  55.                 $(_id).addClass("selected")      
  56.             }      
  57.         })      
  58.     })      
  59. });    

可能这个css不适用你的主题，请适当进行调整以达到最佳效果，比如css中的第7行宽度需要根据主题情况自己调整下，也可参考牧风的css样式。

怕有些人看不懂这个教程怎么用，在这里顺便提一下吧。

  1. 复制自己主题文件夹下的page.php文件放在主题目录，命名随意（例如我命名为archives.php）
  2. 用Sublime Txet等代码编辑器（如果没有就用记事本吧--囧--）打开文件，在顶部加上<?php  /* Template Name: archives */ ?>这句代码
  3. 在编辑页面中找到代码的正文部分,一般在 id="content" 的div里面（这个怎么解释呢...），然后用我上面写的php部分替换进去
  4. 打开style.css 添加css部分
  5. 新建一个js文件，把上面的js代码粘贴进去，并在archives中引用
  6. 在wp后台新建一个页面，模板选择为archives
  7. 搞定收工...

其实我发这篇文章是来试试代码高亮的... 传送门：https://huilang.me/code/

文章地址：https://huilang.me/wordpress-archives-page/

“给wordpress添加个性化的归档（Archives）页面” 有 20 条评论

  1. 草根成春说道：
    2013 年 9 月 27 日 下午 7:55

    谢谢分享！我捯饬捯饬！

    回复
  2. 诸葛小觉说道：
    2013 年 9 月 28 日 上午 8:46

    哈哈 这东西我喜欢~~~不过现在用的主题自带有归档模板了~

    回复
  3. 千寻说道：
    2013 年 9 月 28 日 下午 12:34

    很不错的归档页面~~

    回复
  4. muyan说道：
    2013 年 10 月 1 日 上午 1:25

    你那I SAY 页面杂做的啊？分享下吧

    回复
  5. 良聚美说道：
    2013 年 11 月 2 日 下午 5:40

    效果不错 不过 有点 不太喜欢js

    回复
  6. changleo说道：
    2013 年 11 月 3 日 下午 8:26

    请问在archive中怎么引用js文件

    回复
  7. 开心笑话说道：
    2013 年 11 月 22 日 下午 10:46

    博主好才！太帅气了，赞一个！不明白地方，到时还忘博主不吝赐教！

    回复

回复本文

您的电子邮箱地址不会被公开。 必填项已用 * 标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif