如何在 WordPress 网站中添加时间线？

WordPress 带有默认的 Gutenberg 块编辑器，提供用于插入按钮、社交图标、列和许多其他元素的块。 但是，在许多情况下，您需要自定义小部件，例如常见问题解答、手风琴、时间线等。尤其是，时间线对于向读者展示您的进步或成长会更有用。 虽然时间线没有默认块，但幸运的是，您有多种方法可以在 WordPress 站点中添加时间线。

相关：如何在 Weebly 站点中添加时间线小部件？

什么是时间线？

时间线是基于时间显示的事件的可视化表示。 它们可以采用视频、图像、文本或其他内容形式，以提供有吸引力且高度交互的用户体验。 您可以在 WordPress 站点中以垂直或水平方向添加时间线来展示事件流。

添加时间线的优势？

您可能想要在帖子或页面中插入时间线的原因有很多：

• 这是展示您公司多年来的进步或品牌历史的好方法。
• 如果您提供项目服务，展示项目的发展阶段会很有用。
• 您可以将时间线用于产品生命线和展示成就。
• 此外，当您想向最终用户或目标受众讲述故事、可视化产品和流程（将复杂的信息传达为简单的信息）时，时间线会派上用场。

因此，显示漂亮的时间表有助于在访问者中建立更多信任，以下是制作它们的方法。

在 WordPress 中添加时间线的不同方法

WordPress 中的简单选项是使用可用的时间线插件之一。 但是，您也可以简单地创建一个小部件并插入带有自定义内容的任何地方。

1. 自定义垂直时间线小工具

下面是自定义时间线小部件，您可以使用“自定义 HTML”块将其插入到站点的任何位置。

• 2025

  时间线事件 5

  这是您的时间线事件的内容。 输入一个小段落来详细描述该事件。

• 2024

  时间线事件 4

  这是您的时间线事件的内容。 输入一个小段落来详细描述该事件。

• 2023

  时间线事件 3

  这是您的时间线事件的内容。 输入一个小段落来详细描述该事件。

• 2022年

  时间线事件 2

  这是您的时间线事件的内容。 输入一个小段落来详细描述该事件。

• 2021年

  时间线事件 1

  这是您的时间线事件的内容。 输入一个小段落来详细描述该事件。

以下是时间线小部件的完整代码，您可以根据需要自定义外观和文本。 您可以在网站的任何位置插入此代码，无需任何额外的插件。

 <style> .tl { position: relative; padding: 20px 0 20px; list-style: none; } .tl:before { content: " "; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background-color: #eeeeee; } .tl > li { position: relative; margin-bottom: 20px; list-style-type: none !important; } .tl > li:before, .tl > li:after { content: " "; display: table; } .tl > li:after { clear: both; } .tl > li:before, .tl > li:after { content: " "; display: table; } .tl > li:after { clear: both; } .tl > li > .tl-panel { float: left; position: relative; width: 40%; padding: 20px; border: 1px solid #d4d4d4; border-radius: 5px; -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175); box-shadow: 0 1px 6px rgba(0,0,0,0.175); } .tl-body { font-size: 18px; line-height: 26px; color: rgba(121, 112, 112, 0.71); } .tl > li > .tl-panel:before { content: " "; display: inline-block; position: absolute; top: 26px; right: -15px; border-top: 15px solid transparent; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; border-left: 15px solid #ccc; } .tl > li > .tl-panel:after { content: " "; display: inline-block; position: absolute; top: 27px; right: -14px; border-top: 14px solid transparent; border-right: 0 solid #fff; border-bottom: 14px solid transparent; border-left: 14px solid #fff; } .tl > li > .tl-badge { z-index: 1; position: absolute; top: 16px; left: 50%; width: 50px; height: 50px; margin-left: -25px; border-radius: 50% 50% 50% 50%; text-align: center; font-size: 1.4em; line-height: 50px; color: #fff; background-color: #999999; } .tl > li.tl-inverted > .tl-panel { float: right; } .tl > li.tl-inverted > .tl-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; } .tl > li.tl-inverted > .tl-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .tl-badge { font-size: 18px !important; font-weight: bold; } .tl-badge.primary { background-color: #2e6da4 !important; } .tl-badge.success { background-color: #3f903f !important; } .tl-badge.warning { background-color: #f0ad4e !important; } .tl-badge.danger { background-color: #d9534f !important; } .tl-badge.info { background-color: #5bc0de !important; } .tl-title { margin-top: 0; margin-bottom: 10px; color: rgba(45, 45, 72, 0.44); font-size: 20px; } @media screen and (max-width: 380px) { .tl > li > .tl-panel { width:25% !important; } } @media screen and (max-width: 800px) { .tl > li > .tl-panel { width:33%; } } </style> <ul class="tl"> <li> <div class="tl-badge success"> 2025 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 5</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li class="tl-inverted"> <div class="tl-badge warning"> 2024 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 4</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li> <div class="tl-badge danger"> 2023 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 3</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li class="tl-inverted"> <div class="tl-badge"> 2022 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 2</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li> <div class="tl-badge info"> 2021 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 1</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> </ul>

2. 使用 Cool Timeline Plugin 在 WordPress 中添加时间线

第一步需要安装并激活“Cool Timeline”插件。 通过“插件”侧边栏菜单类别下的“添加新”子菜单使用搜索功能来实现这一点。 激活插件后，“时间线故事”和“酷时间线设置”项目现在将作为新的侧边栏菜单出现在您的仪表板中。 为了使用该插件，您必须创建故事，然后创建时间线以将故事显示为事件流。

设置插件的默认设置

如果您想自定义默认设置，请转到“酷时间线设置”菜单以查找您可以与酷时间线插件一起使用的所有相关设置。

• 常规设置 - 在这里您可以自定义默认对齐方式、内容长度、标题标题标签、要显示的故事数量、启用或禁用阅读更多、故事顺序等。
• 样式设置 - 您可以在此处自定义背景和其他元素的颜色。 您还可以根据需要添加自定义 CSS 来装饰您的时间线。
• 排版设置 - 为时间线中的每个元素设置字体大小、系列和粗细。
• 高级设置 - 在这里您可以找到免费版和专业版之间的差异。

完成自定义后，单击“保存更改”按钮以保存所有设置。

为时间线创建故事

如前所述，您必须创建故事以用作时间线小部件中的事件。 将鼠标悬停在“时间线故事”菜单上，然后单击站点管理面板中的“添加新”子菜单。 添加与您的故事一起出现的标题和媒体。 此外，使用“视觉”或“文本”界面输入故事描述。 单击“添加图标”按钮以选择故事图标。

然后，向下滚动到“时间线故事设置”并选择故事日期/年份/时间，将故事图像声明为小尺寸或全尺寸。 设置特色图片并填写专业版包含的其他功能，例如故事格式、类别和自定义设置。 使用插件的免费版本时，您可以将专业版字段留空。 最后，点击“发布”按钮以成功创建您的时间线故事。 此外，对出现在您的时间线中的其他故事也执行相同的操作。

注意：如您所见，该插件使用经典编辑器来创建故事，同时它支持古腾堡块以及用于插入帖子的经典编辑器小部件。 您创建的故事存储为自定义帖子类型，名称为cool_timeline。

在 WordPress 帖子或页面中添加时间线

该插件提供多种时间线布局，如垂直、水平、一侧、简单和紧凑的布局。 我们将解释如何在古腾堡和经典编辑器中使用时间线。

在古腾堡编辑器中使用酷时间线短代码块

您有两种生成和添加时间线的方法 - 使用短代码或使用即时时间线构建器块。 当您在 Gutenberg 编辑器中时，单击右上角的 + 图标并搜索“时间轴”。 您将看到两个块 – Cool Timeline Shortcode 和 Cool Timeline – Insta Builder。

单击“Cool Timeline Shortcode”块，插件将向您显示预览和短代码。 您可以从侧边栏中自定义设置，例如更改布局，并根据您的兴趣填写其他详细信息。 短代码将自动更新并点击“发布”按钮。

现在，您可以查看根据您的设置自动插入到漂亮的时间线布局中的故事。

如果您想在水平时间线中显示故事，您只需选择“水平”作为时间线布局和其他设置以适应您的时间线。 另一方面，简单紧凑的布局将用作水平或垂直时间线设置。

事实上，您可以将以下短代码直接粘贴到您网站的任何位置，以将故事展示为时间线。

 [cool-timeline layout="default" skin="default" date-format="F j" icons="YES" show-posts="10" animation="FadeInOut" order="DESC" story-content="full"]

影响编辑的解释如下：

• Cool-timeline：它是我们插件的默认启动语法。
• 布局：大约有五种主要的布局选项，分别是垂直、水平、一侧、简单和紧凑。 您可以对上述代码进行更改以符合您的考虑。
• 皮肤：此处提供干净/默认选项。
• 日期格式：您可以根据您的语言或乡村风格表示选择任何日期格式与故事一起显示。
• 图标：您可以选择为任何时间线故事启用或禁用（是/否）图标。
• Show-posts：协助分页，通常用于时间线（有很多故事）。
• 动画：Cool Timeline 免费版中只有一种动画效果（即 - FadeInOut）。 您可以购买 pro 以获得更多信息。
• 顺序：帮助安排和管理故事在时间线上的显示方式，升序或降序 (ASC/DESC)。
• 故事内容：它有一个简短/完整的选项来显示整个 HTML 文本，或者有一个简短的描述和阅读更多的时间线故事。

使用 Instant Builder Block 在 Gutenberg 中添加时间线

简码方法很有用，因为您可以将简码复制并粘贴到站点的任何位置以显示相同的时间线。 但是，您必须创建故事，并且故事只能在一个时间线中使用。 如果您想创建显示不同事件的多个时间线，那么您可以使用“Cool Timeline – Instant Builder”块及其设置轻松地实时执行此操作。 在您的页面或帖子编辑器仪表板中搜索并添加“Cool Timeline – Instant Builder”块。 开始编辑时间线标题、描述、日期、图标、图像，并根据需要添加更多故事。 您可以使用“默认（双面）”或“单面”作为时间线布局并自定义标题/描述大小和颜色。

使用 Elementor Page Builder 添加时间线

Cool Timeline 插件提供了一个附加插件，可与流行的 Elementor 页面构建器插件一起使用。 如果您使用的是 Elementor，请安装并激活“Elementor Timeline Widget Addon”插件，编辑您想要使用它创建时间线的页面或帖子（“Edit with Elementor”按钮）。 在搜索栏中输入“时间线”，然后拖放“故事时间线”组件。 使用“编辑故事时间线”设置更改各种选项以满足您理想的时间线要求。

使用经典编辑器插入时间轴

如果您使用的是经典编辑器而不是古腾堡，请不要担心！！！ Cool Timeline 也有经典编辑器的选项。 当您在经典编辑器中时，单击“Cool Timeline Shortcode”下拉菜单并选择“Add Cool Timeline Shortcode”。

在弹出窗口中调整您的选择，然后单击“确定”按钮以插入时间线短代码。

同样，您可以选择“添加酷水平时间线”选项来插入水平时间线小部件。

最后的想法

时间表可以显着提高您的业务的可信度。 尽管有许多时间线插件可用，但 Cool Timeline 插件提供了一种在 WordPress 站点中添加时间线的不错方法。 您可以轻松创建垂直或水平布局自定义外观。 如果您对使用该插件不感兴趣，请使用上面给出的小部件代码。