今天给大家推荐的是一款时间轴样式的 WordPress 文章归档页面，个人觉得比普通的归档页更加高大上一些，这里分享给大家，喜欢的可以拿去使用下。在 WordPress 中，文章归档页面是一个非常重要的页面，特别是当你的 wordpress 网站文章很多的时候，它将文章以年月日的分类方式对文章进行归类，可以让读者很方便的迅速找到某年某日的文章。wordpress 主题的文章归档页面样式大多是普通的文章标题列表页面，那今天给大家分享一组可以实现时间轴列表展示的文章归档页面代码，方便更清新的在页面中展示出标题及文章，且提供给大家前端的 css 及 js，而且有展开文章列表功能，体验与适配程度都比较好。

模板代码

1. <div class="archives">

2.         <?php

3.         $previous_year = $year = 0;

4.         $previous_month = $month = 0;

5.         $ul_open = false;

6.         $myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');

7.         foreach($myposts as $post) :

8.             setup_postdata($post);

9.             $year = mysql2date('Y', $post->post_date);

10.             $month = mysql2date('n', $post->post_date);

11.             $day = mysql2date('j', $post->post_date);

12.             if($year != $previous_year || $month != $previous_month) :

13.                 if($ul_open == true) : 

14.                     echo '</ul>';

15.                 endif;

16.                 echo '<h3 class="m-title">'; echo the_time('Y-m'); echo '</h3>';

17.                 echo '<ul class="archives-monthlisting">';

18.                 $ul_open = true;

19.             endif;

20.             $previous_year = $year; $previous_month = $month;

21.         ?>

22.             <li>

23.                 <a href="<?php the_permalink(); ?>"><span><?php the_time('Y-m-j'); ?></span><div class="atitle"><?php the_title(); ?></div></a>

24.             </li>

25.         <?php endforeach; ?>

26.         </ul>

27. </div>

CSS 样式

将 css 样式代码添加到 wordpress 主题和 style.css 样式表内：

1. .archive-title{border-bottom:1px #eee solid;position:relative;padding-bottom:4px;margin-bottom:10px}    

2. .archives li a{padding:8px 0;display:block}

3. .archives li a:hover .atitle:after{background:#ff5c43}

4. .archives li a span{display: inline-block;width:100px;font-size:12px;text-indent:20px}

5. .archives li a .atitle{display: inline-block;padding:0 15px;position:relative}

6. .archives li a .atitle:after{position:absolute;left:-6px;background:#ccc;height:8px;width:8px;border-radius:6px;top:8px;content:""}

7. .archives li a .atitle:before{position:absolute;left:-8px;background:#fff;height:12px;width:12px;border-radius:6px;top:6px;content:""}

8. .archives{position:relative;padding:10px 0}

9. .archives:before{height:100%;width:4px;background:#eee;position:absolute;left:100px;content:"";top:0}

10. .m-title{position:relative;margin:10px 0;cursor:pointer}    

11. .m-title:hover:after{background:#ff5c43}

12. .m-title:before{position:absolute;left:93px;background:#fff;height:18px;width:18px;border-radius:6px;top:3px;content:""}

13. .m-title:after{position:absolute;left:96px;background:#ccc;height:12px;width:12px;border-radius:6px;top:6px;content:""}

JS 特效

点击月份伸缩效果，放在 js 标签内部即可：

1. $('.archives ul.archives-monthlisting').hide();

2. $('.archives ul.archives-monthlisting:first').show();

3. $('.archives .m-title').click(function() {

4.     $(this).next().slideToggle('fast');

5.     return false;

6. });