1. David Wu首页
  2. WordPress
  3. WordPress安装教程

制作WordPress时间轴文章列表

今天给大家推荐的是一款时间轴样式的 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. });

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/99919

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

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