搬码资源网广告位 搬码资源网广告位

制作WordPress时间轴文章列表

下面是搬码源码网 abnma.com 通过网络收集整理的代码片段。搬码源码网小编现在分享给大家,也给大家做个参考。

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

模板代码

<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 样式表内:

.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;

});

以上是搬码源码网(abnma.com)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得搬码源码网网站内容还不错,欢迎将搬码源码网网站推荐给程序员好友。

声明:
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站资源来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
如果您喜欢该程序,请支持正版软件,得到更好的正版服务。
本文链接:https://www.abnma.com/11127.html,转载请注明出处。
如有侵权,请邮件联系我们删除处理。

0
搬码资源网广告位

评论0

请先

没有账号? 注册  忘记密码?