MENU

Wordpress添加时间轴

February 20, 2020 • 阅读: 1467 • 笔记&折腾



为自己的wordpress增加时间轴功能

1.在主题添加额外CSS代码:

#teamnewslist ol{list-style:none;margin-left: 36px;padding-left: 14px;border-left: 2px solid yellowgreen;font-size: 18px;color: #666;}
#teamnewslist b{font-size: 12px;font-weight: normal;color: pink;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 pink;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: #555;}
#teamnewslist li:hover b::after{border-color: green;}
#teamnewslist li:hover b{color: green;}

2.新建页面,开启文本编辑模式或者添加HTML模块,填写以下代码:

</ol>
 <ol><h3>2019</h3>
  <li><b>2019年12月27日</b><a href="https://joessem.com/?p=237">PyQt5+poplib+smtplib+python3.6邮件客户端Demo</a></li>
  <li><b>2019年12月26日</b><a href="https://joessem.com/?p=230">Scapy+PyQt5+Python3.6实现网络嗅探器Demo</a></li>

    <li><b>2019年12月24日</b><a href="https://joessem.com/?p=205">局域网IP多播</a></li>

 <li><b>2019年12月22日</b><a href="https://joessem.com/?p=126">2019难忘时刻</a></li>

<li><b>2019年12月22日</b><a href="https://joessem.com/?p=112">Tracert 与 Ping程序设计与实现(二)</a></li>

<li><b>2019年12月20日</b><a href="https://joessem.com/?p=99">Tracert 与 Ping程序设计与实现(一)</a></li>

 <li><b>2019年12月19日</b><a href="https://joessem.com/?p=76">2019年度总结</a></li>

<li><b>2019年12月16日</b><a href="https://joessem.com/?p=62">网络聊天程序的设计与实现</a></li>

<li><b>2019年12月04日</b><a href="https://joessem.com/?p=6">开启新征程!</a></li>
 </ol>
</div>

当需要添加归档时只需在<ol>中添加一段:

<li><b>20xx年xx月xx日</b><a href="xxxxxxx">xxxxxx</a></li>

3.效果展示

Last Modified: February 6, 2021