WordPress如何制作动态时间轴

一. 前言

每个网站都有自己的发展/折腾史，将这些标志性的事件做成一个时间轴，用来记录你的每次决断和网站的发展，想想就超有意思，从网上找了不少教程，最后选了落叶陈飞前辈的教程，并简单美化了一下，分享给大家

二. 更改主题的style.css表

1. 点击外观——> 编辑 ——> style.css，如下图

2. 在最底部添加如下代码

/* 站点动态时间轴 */
#teamnewslist ol{list-style:none;margin-left: 36px;padding-left: 14px;border-left: 2px solid #eee;font-size: 18px;color: #666;}
#teamnewslist b{font-size: 12px;font-weight: normal;color: #999;display: block;position: relative;margin-bottom:5px;}
#teamnewslist b::after{position: absolute;top: 6px;left: -22px;content: '';width: 14px;height: 14px;border-radius: 50%;background-color: #fff;border: 2px solid #ccc;box-shadow: 2px 2px 0 rgba(255,255,255,1), -2px -2px 0 rgba(255,255,255,1)}
#teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
#teamnewslist li:hover{color: #25c6fc;}
#teamnewslist li:hover b::after{border-color: #25c6fc;}
#teamnewslist li:hover b{color: #25c6fc;}

如下图：

三. 新建时间轴页面

1. 页面——> 新建页面，如下图

2. 选择文本模式，输入以下代码

每个红框里的代码作为一年，比如你的网站创办五年了，那你就把下面代码块里的内容复制五次，然后修改h2标题里的年份和li标签中的月份和日期以及内容就可以了，如下图：

<h2 style="text-align: center;"><span style="font-size: 20px;"><span style="color: #999;">2018年</span></span></h2>
<div id="teamnewslist">
<ol>
 	<li><b>XX月X日</b> 网站发展历程</li>
 	<li><b>XX月X日</b> 网站发展历程</li>
 	<li><b>XX月X日</b> 网站发展历程</li>
 	<li><b>XX月X日</b> ……………………</li>
</ol>
</div>