CoreNext 主题美化：文章或页面添加时间轴

在当今网络环境中，时间轴功能被广泛用于清晰展示事件的发展顺序。对于 WordPress 网站而言，在文章或页面中添加时间轴，能有效提升内容的结构感与可读性。本文将教你如何在 CoreNext 主题中为文章或页面添加时间轴功能，并提供适配主题的 HTML 与 CSS 代码示例，无需插件即可实现美观、实用的时间线布局。

时间轴效果演示

文章内容代码

在需要添加时间轴的文章或者页面编辑时放入以下代码

<div id="timeaxis">
<ol>
<li><b>2023 年 01 月</b> 好软猫</li>
<li><b>2023 年 02 月</b> 关注好软件与资源分享的猫</li>
<li><b>2023 年 03 月</b> www.haoruanmao.com</li>
</ol>
</div>

CSS 样式代码添加位置

CoreNext 主题设置 CSS 中添加

在主题设置-代码-CSS 样式中加入即可

主题或子主题 CSS 中添加

外观-自定义-选择主题或子主题-额外 css

CSS 样式代码

/*站点时间轴*/
#timeaxis ol { list-style:none; margin-left:0px; padding-left:14px; border-left:2px solid #eee; font-size:16px; }
#timeaxis b { font-size:12px; font-weight:normal; display:block; position:relative; margin-bottom:5px; }
#timeaxis b::after { position:absolute; top:6px; left:-24px; content:''; width:14px; height:14px; border-radius:50%; background-color:#fff; border:2px solid #ccc }
#timeaxis li { list-style:none; margin:0 0 18px 0; line-height:100%; }
#timeaxis li:hover { color:#409EFF; }
#timeaxis li:hover b::after { border-color:#248888; }
#timeaxis li:hover b { color:#248888; }

更多推荐

CoreNext 主题美化教程合集