WordPress添加时间轴功能记录你的站点历史

青木

2个月前更新

0210

免费领流量卡

流量卡包邮

本站同款主题

广告招租

前言

时间轴可以帮助你记录网站的发展历史以及各种重要事件，本次教程适用于大多数WordPress网站。时间轴的HTML代码和CSS样式来自博客广然笔记，我在此基础上增加了一个WordPress后台发布功能。

预览效果

图片[1] - WordPress添加时间轴功能记录你的站点历史 - 狐狸资源网

部署教程

本次教程将会分为两个主要步骤：

注册自定义文章类型
添加自定义模板

注册自定义文章类型

首先，打开主题文件，前往主题文件 functions.php，添加下方代码来注册自定义文章类型时间轴：

此处内容已隐藏，请评论后刷新页面查看.

将上述代码添加完成后，你会在WordPress后台菜单栏中看到一个”时间轴”的菜单，用于发布和管理时间轴文章。

图片[2] - WordPress添加时间轴功能记录你的站点历史 - 狐狸资源网

创建模板文件

创建一个模板文件或在现有模板中添加代码，以显示“时间轴”文章，并按照时间排序。在你的主题中创建一个模板文件 timeline.php，或者在现有模板文件中添加以下代码：

隐藏内容，输入密码后查看

微信扫描二维码或搜索【狐狸工具盒】小程序，输入【2024080705】获取密码验证后才能查看！！！

以上CSS由于长度原因已经压缩，如果需要修改可以格式化回来。

主题示例：CoreNext

以CoreNext主题为例，使用子主题的话，前往 CoreNext-Child/template/ 新建一个文件 timeline.php，将下述代码复制进去。

此处内容已隐藏，请评论后刷新页面查看.

随后到WordPress后台页面，新建页面，选择模板时间轴即可。

结语

通过以上步骤，你已经成功在WordPress网站中创建了一个时间轴。你可以通过发布时间轴文章，记录和展示网站的发展历史及重要事件。

有问题欢迎留言交流。

基础源码：广然笔记【一个时间轴】

一个时间轴，复制 CSS 粘贴到主题设置–>插入代码–>自定义css，然后新建文章，将代码放入文章即可。

样式

div.timenode {
    position:relative;
}
div.timenode:before,div.timenode:after {
    content:'';
    z-index:1;
    position:absolute;
    background:rgba(57,186,232,0.5);
    width:2px;
    left:7px;
}
div.timenode:before {
    top:0px;
    height:6px;
}
div.timenode:after {
    top:26px;
    height:calc(100% - 26px);
}
div.timenode:last-child:after {
    height:calc(100% - 26px - 16px);
    border-bottom-left-radius:2px;
    border-bottom-right-radius:2px;
}
div.timenode .meta,div.timenode .body {
    max-width:calc(100% - 24px);
}
div.timenode .meta {
    position:relative;
    color:#5e5e5e;
    font-size:0.875rem;
    line-height:32px;
    height:32px;
}
div.timenode .meta:before,div.timenode .meta:after {
    content:'';
    position:absolute;
    top:8px;
    z-index:2;
}
div.timenode .meta:before {
    background:rgba(36,136,136);
    width:16px;
    height:16px;
    border-radius:8px;
    -webkit-border-radius:8px;
}
div.timenode .meta:after {
    background:#00d084;
    width:16px;
    height:16px;
    border-radius:8px;
    -webkit-border-radius:8px;
    transform:scale(0.5);
    -webkit-transform:scale(0.5);
    -khtml-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -o-transform:scale(0.5);
    -ms-transform:scale(0.5);
    transition:all 0.28s ease;
    -webkit-transition:all 0.28s ease;
    -khtml-transition:all 0.28s ease;
    -moz-transition:all 0.28s ease;
    -o-transition:all 0.28s ease;
    -ms-transition:all 0.28s ease;
}
div.timenode .meta p {
    font-weight:bold;
    margin:0 0 0 24px;
}
div.timenode .body {
    margin:4px 0 16px 24px;
    padding:16px;
    border-radius:8px;
    -webkit-border-radius:8px;
    background:#f0f0f0;
    display:-webkit-box;
    display:-moz-box;
    display:inline-block;
}
div.timenode .body:empty {
    display:-webkit-box;
    display:-moz-box;
    display:none;
}
div.timenode .body >*:first-child {
    margin-top:0.25em;
}
div.timenode .body >*:last-child {
    margin-bottom:0.25em;
}
div.timenode .body .highlight {
    border:1px solid #e5e5e5;
}
div.timenode:hover .meta {
    color:#181818;
}
div.timenode:hover .meta:before {
    background:#0693e3;
}
div.timenode:hover .meta:after {
    background:#00d084;
    transform:scale(1);
    -webkit-transform:scale(1);
    -khtml-transform:scale(1);
    -moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
}

代码

<div class="timeline">
    <div class="timenode">
        <div class="meta">
            <p></p>
            <p>2021年7月 IPv6适配</p>
            <p></p>
        </div>
        <div class="body">
            <p>全站完成 IPv6 适配，支持 IPv4 + IPv6 双栈访问</p>
        </div>
    </div>
    <div class="timenode">
        <div class="meta">
            <p></p>
            <p>2021年1月 网站备案</p>
            <p></p>
        </div>
        <div class="body">
            <p>完成网安备案</p>
        </div>
    </div>
    <div class="timenode">
        <div class="meta">
            <p></p>
            <p>2019年7月 站点上云</p>
            <p></p>
        </div>
        <div class="body">
            <p>站点除 API 接口外，所有业务全部迁移至阿里云</p>
        </div>
    </div>
</div>