WordPress制作时间轴文章列表页面

wordpress主题的文章归档页面样式大多是普通的文章标题列表页面，那今天测速网给大家分享一组可以实现时间轴列表展示的文章归档页面代码，方便更清新的在页面中展示出标题及文章，且提供给大家前端的css及js，而且有展开文章列表功能，体验与适配程度都比较好。

将下面的代码复制进页面模版内

<div ><?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 '<h3 >'; echo the_time('Y-m'); echo '</h3>';echo '<ul >';$ul_open = true;endif;$previous_year = $year; $previous_month = $month;?><li><a href="<?php%20the_permalink();%20?>"><span><?php the_time('Y-m-j'); ?></span><div ><?php the_title(); ?></div></a></li><?php endforeach; ?></ul></div>123456789101112131415161718192021222324252627<div ><?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 '<h3 >'; echo the_time('Y-m'); echo '</h3>';echo '<ul >';$ul_open = true;endif;$previous_year = $year; $previous_month = $month;?><li><a href="<?php%20the_permalink();%20?>"><span><?php the_time('Y-m-j'); ?></span><div ><?php the_title(); ?></div></a></li><?php endforeach; ?></ul></div>

CSS样式
将css样式代码添加到wordpress主题和style.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:-6px;background:#ccc;height:8px;width:8px;border-radius:6px;top:8px;content:""}.archives li a .atitle:before{position:absolute;left:-8px;background:#fff;height:12px;width:12px;border-radius:6px;top:6px;content:""}.archives{position:relative;padding:10px 0}.archives:before{height:100%;width:4px;background:#eee;position:absolute;left:100px;content:"";top:0}.m-title{position:relative;margin:10px 0;cursor:pointer}.m-title:hover:after{background:#ff5c43}.m-title:before{position:absolute;left:93px;background:#fff;height:18px;width:18px;border-radius:6px;top:3px;content:""}.m-title:after{position:absolute;left:96px;background:#ccc;height:12px;width:12px;border-radius:6px;top:6px;content:""}12345678910111213.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:-6px;background:#ccc;height:8px;width:8px;border-radius:6px;top:8px;content:""}.archives li a .atitle:before{position:absolute;left:-8px;background:#fff;height:12px;width:12px;border-radius:6px;top:6px;content:""}.archives{position:relative;padding:10px 0}.archives:before{height:100%;width:4px;background:#eee;position:absolute;left:100px;content:"";top:0}.m-title{position:relative;margin:10px 0;cursor:pointer}.m-title:hover:after{background:#ff5c43}.m-title:before{position:absolute;left:93px;background:#fff;height:18px;width:18px;border-radius:6px;top:3px;content:""}.m-title:after{position:absolute;left:96px;background:#ccc;height:12px;width:12px;border-radius:6px;top:6px;content:""}

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

$('.archives ul.archives-monthlisting').hide();$('.archives ul.archives-monthlisting:first').show();$('.archives .m-title').click(function() {$(this).next().slideToggle('fast');return false;});123456$('.archives ul.archives-monthlisting').hide();$('.archives ul.archives-monthlisting:first').show();$('.archives .m-title').click(function() {$(this).next().slideToggle('fast');return false;});

上一篇：纯代码wordpress主题禁止复制粘贴文章内容的方法

下一篇：wordpress 主题缺少style.css无法安装这个包解决办法

---