WordPress制作时间轴文章列表页面
发布于
by
摘要：wordpress主题的文章归档页面样式大多是普通的文章标题列表页面，那今天大挖给大家分享一组可以实现时…
摘要：wordpress主题的文章归档页面样式大多是普通的文章标题列表页面，那今天大挖给大家分享一组可以实现时间轴列表展示的文…
wordpress主题的文章归档页面样式大多是普通的文章标题列表页面，那今天大挖给大家分享一组可以实现时间轴列表展示的文章归档页面代码，方便更清新的在页面中展示出标题及文章，且提供给大家前端的css及js，而且有展开文章列表功能，体验与适配程度都比较好。
将下面的代码复制进页面模版内
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<div class=“archives”>
<?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 class=”m-title”>’; echo the_time(‘Y-m’); echo ‘</h3>’;
echo ‘<ul class=”archives-monthlisting”>’;
$ul_open = true;
endif;
$previous_year = $year; $previous_month = $month;
?>
<li>
<a href=“<?php the_permalink(); ?>“><span><?php the_time(‘Y-m-j’); ?></span><div class=“atitle”><?php the_title(); ?></div></a>
</li>
<?php endforeach; ?>
</ul>
</div>
|
CSS样式
将css样式代码添加到wordpress主题和style.css样式表内。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.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标签内部即可
|
1
2
3
4
5
6
|
$(‘.archives ul.archives-monthlisting’).hide();
$(‘.archives ul.archives-monthlisting:first’).show();
$(‘.archives .m-title’).click(function() {
$(this).next().slideToggle(‘fast’);
return false;
});
|
类别：WordPress教程、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
猜你喜欢GUESS YOU LIKE
还没有任何评论，赶紧来占个楼吧！