WordPress时间轴插件完整教程：Cool Timeline免费安装 + 使用指南

Cool Timeline插件教程：WordPress时间线5分钟上手

　　您是否曾经想在您的网站上添加事件时间线？在本文中，我们晓得博客将向您展示WordPress时间轴插件Cool TimeLine插件使用教程。

　　Cool Timeline是一个响应式WordPress插件，可让您创建漂亮的水平和垂直历史时间线。您只需创建帖子、设置图像和日期，然后 Cool Timeline 将根据故事的年份和日期自动按时间顺序（ASC 或 DESC）填充这些帖子。您可以使用简码轻松地在网站的任何页面上显示时间线。

什么是 Cool Timeline？适合哪些网站使用

　　顾名思义，时间轴是时间线的视觉表示。在网页设计中，它通常用于以图像、文本、视频和其他形式的内容显示事件的时间线，以提供视觉吸引力和高度交互的用户体验。用来显示公司的历史信息。

　　将时间表纳入您的网站可能会有所帮助，个人网站所有者可以关于页面甚至博客上使用它。简而言之，时间线是显示业务里程碑或内容的地图的可视化图表，通常按时间顺序排列。目的是使您的用户能够浏览您的材料并找到已发布的内容。另一个好处是，通常简单而枯燥的帖子列表可以用交互式元素来补充。

　　推荐：什么是CTA?CTA的好处有那些？

Cool Timelines插件下载

　　Cool Timelines 插件允许您创建一个漂亮的垂直时间线，可以将其添加到页面或帖子中。时间线非常适合按时间顺序创建历史事件或发展过程的表示的情况。

　　登录您的WordPress仪表盘，点击“ 插件 ”->” 安装插件 “，搜索“ Cool Timelines插件 ”，然后点击安装即可，激活启用后，就可以在仪表盘看到“ Timeline Addons ”，这样就表明时间轴插件安装激活完成。

　　Cool Timelines插件功能特点：

• Gutenberg块时间线：用户可以在 Gutenberg 即时时间线构建器块的帮助下创建即时时间线。
• 紧凑的时间线：免费用户也可以创建一个紧凑的时间线，这意味着一个故事之间没有太多空间的时间线。
• 干净的布局：干净清晰的外观，
• 水平路线图时间表：在路线图设计的帮助下，您可以表示您的项目/公司计划和阶段。
• 高级设计和优化代码：对开发人员友好，可以轻松自定义时间线故事默认查询。
• 创建双面或单面垂直时间线。
• 在弹出窗口中显示时间线图像或链接到完整故事。
• 选择图标和故事。
• 指定故事背景自定义颜色。
• 指定年份圈自定义颜色。
• 可以为故事帖子标题指定不同的颜色。
• 显示完整故事页面的阅读更多按钮。
• 以 DESC 或 ASC 顺序显示故事。
• 易于使用的简码可将酷时间线放置在您心中想要的任何地方
• 在任何页面上轻松添加简码
• 响应和移动就绪的时间表。

Cool Timeline 免费版 vs Pro版 功能对比表

　　免费版仅支持垂直时间线，Pro 版才开放水平布局、分类筛选和 Ajax 加载，以及 Pro 版支持图片幻灯片、YouTube 视频嵌入，并可用自定义文字替代日期 Edublogs整理而成。

Cool Timelines插件功能简介

　　注意：本文是以Cool Timeline Pro插件完成。

　　在WordPress仪表盘，点击“Timeline Addons”，这样就进入了插件界面。Cool Timelines插件包含六个部分，分别为Dashboard仪表盘，License许可证，Cool Timeline Stories时间轴故事，Add New Story添加新的故事，Categories分类，Cool Timeline Pro Setting时间轴插件设置。

Dashboard仪表盘

　　Dashboard仪表盘：显示当前安装激活的时间轴插件，也包含Elementor时间线小部件插件 和 古腾堡的时间线块。

License许可证

　　License许可证：输入Cool Timeline Pro 许可证。

Cool Timeline Stories时间轴故事

　　Cool Timeline Stories时间轴故事：显示给时间轴插件添加的故事。

Add New Story添加新故事

　　Add New Story添加新的故事：给时间轴插件添加故事，包含标题，图像，Icon,链接等等。

Categories分类

　　Categories分类：添加显示时间轴插件故事分类，可以根据不同的故事线添加不同的分类。

　　推荐：WordPress插件Simple Google reCAPTCHA插件使用指南教程

Cool Timeline Pro Setting时间轴插件设置

　　Cool Timeline Pro Setting时间轴插件设置：时间轴显示的通用设置，样式设置，排版设置，故事设置，时间线简码以及其他设置，如禁用Google字体等等。下面我们晓得博客会详细为你展示WordPress时间轴插件Cool TimeLine插件使用教程指南。

• 通用设置：时间线标题、年份导航，分页，博客文章内容时间表。
• 样式设置：时间线显示左右位置、背景、故事背景、内容字体颜色、标题颜色等等。
• 排版设置：时间线标题tag标签、字体样式、故事日期、故事内容等等字体选择设置。
• 故事设置：故事日期设置、故事内容设置、故事图片设置。
• 时间线简码：时间线简码生成器
• 其他设置：禁用 Font Awesome CSS、禁用谷歌字体、自定义样式。

Cool Timelines插件设置

　　创建和添加时间线取决于您使用的是 块编辑器 还是 经典编辑器。在发布之前，需要先添加故事。

添加故事

　　时间线/时间轴可以使用一系列时间线故事来创建。每个时间线故事都会向您的时间线添加一个事件。

　　1、登录WordPress仪表盘，点击“ Timeline Addons时间轴插件 ” -> “Add New Story添加新内容”

　　2、添加您的故事标题和您的故事内容。

　　3、单击设置特色图片并添加图片（用于您的故事图片），设置后，您的图像将显示在“特色图像”模块中。

　　4、可以设置故事的排序方式、故事添加图像视频的尺寸、故事Icon以及其他设置。可以在全尺寸或小尺寸之间切换图像大小。默认情况下，使用全尺寸图像。选择小时，文本将环绕图像。

　　5、单击发布。（如果需要的话，可将发布日期更改为您的故事日期和故事年份，然后单击确定。）

　　6、重复使用上述添加故事的过程，直到为要在时间线中显示的每个事件发布了故事。

　　推荐：Easy WP SMTP插件教程设置WordPress网站发送电子邮件

Cool Timeline 短代码完整参数说明

短代码是 Cool Timeline 最灵活的使用方式，一行代码就能在任何页面或文章中嵌入时间轴，并通过参数精确控制它的外观和行为。很多用户只会复制默认短代码，完全不知道可以通过调整参数实现完全不同的效果，这一章节把所有参数逐一讲清楚。

默认短代码（完整版）

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

把这段短代码复制到任何页面的区块或文本编辑器中，即可显示你创建的所有时间轴故事。下面是每个参数的详细说明。

参数一：layout（布局样式）

控制时间轴的整体排列方式，是视觉效果差异最大的参数。

// 示例：单侧图文布局
[cool-timeline layout="one-side-image" ...]

⚠️ 注意：水平时间轴（horizontal）是 Pro 版专属功能，免费版只支持以上三种垂直布局。

参数二：skin（皮肤/配色风格）

控制时间轴的整体视觉风格，影响线条、圆点、卡片的配色。

// 示例：简洁风格，适合极简主题
[cool-timeline skin="clean" ...]

参数三：date-format（日期显示格式）

控制每条时间轴故事的日期如何显示，使用 PHP 标准日期格式。

// 示例：只显示年份，适合公司成立大事记
[cool-timeline date-format="Y" ...]

// 示例：显示完整日期，适合精确的项目节点
[cool-timeline date-format="F j, Y" ...]

💡 提示：如果时间轴里的事件是以「阶段」或「步骤」命名的（如「第一阶段」「设计期」），可以升级 Pro 版使用「自定义标签」功能完全替换日期显示，不受日期格式限制。

参数四：icons（节点图标）

控制时间轴中间线上的圆形节点是否显示图标。

// 示例：不显示图标，极简风格
[cool-timeline icons="NO" ...]

参数五：show-posts（每页显示数量）

控制一次性加载多少条时间轴故事，超出数量的内容会自动分页。

// 示例：显示全部故事，不分页
[cool-timeline show-posts="-1" ...]

// 示例：每页只显示5条，搭配分页
[cool-timeline show-posts="5" ...]

⚠️ 注意：故事数量超过 20 条时，建议不要使用 -1，会导致页面一次性加载大量内容，影响加载速度和用户体验。

参数六：order（排列顺序）

控制时间轴故事的时间排列方向。

// 示例：历史时间轴，从最早到最近
[cool-timeline order="ASC" ...]

// 示例：更新日志，最新内容在顶部
[cool-timeline order="DESC" ...]

参数七：story-content（内容显示长度）

控制每条故事显示完整内容还是只显示摘要。

// 示例：只显示摘要，保持时间轴整洁
[cool-timeline story-content="excerpt" ...]

参数组合实战模板

根据不同用途，直接复制对应模板使用：

公司历史大事记（年份显示，升序，两侧布局）

[cool-timeline layout="default" skin="clean" date-format="Y" icons="YES" show-posts="-1" order="ASC" story-content="full"]

产品更新日志（月年显示，降序，单侧布局）

[cool-timeline layout="one-side" skin="default" date-format="M Y" icons="YES" show-posts="10" order="DESC" story-content="excerpt"]

个人简历时间轴（完整日期，升序，图文单侧）

[cool-timeline layout="one-side-image" skin="clean" date-format="F Y" icons="YES" show-posts="-1" order="ASC" story-content="full"]

项目进度展示（简洁风格，自定义标签代替日期）

[cool-timeline layout="one-side" skin="clean" date-format="Y" icons="YES" show-posts="-1" order="ASC" story-content="full"]

块编辑器

　　以下部分说明如何使用块编辑器添加使用时间线故事创建的时间线。如果您使用的是经典编辑器，请参阅使用经典编辑器部分使用时间线故事创建的时间线

• Cool Timeline Shortcode 块：用于将使用 TimeLine Stories 创建的时间线插入帖子/页面。
• Cool Timeline – Instant Builder 块：用于使用块和块设置直接在帖子/页面中实时创建时间线。

　　创建所有故事后，您可以使用块编辑器在页面或帖子中显示您的时间线，如下所示：

　　1、转到页面 -> 添加新内容（或帖子 -> 添加新内容）， （可选：添加您的页面标题）。

　　2、添加Cool Timeline短代码块。要将Cool Timeline Shortcode 块添加到帖子或页面，请单击任何空块左侧或编辑器左上角的 + 图标，然后搜索 Cool Timeline 并单击Cool Timeline Shortcode 块图标。

　　3、您可以使用编辑器侧边栏自定义时间轴/时间线。如果没有看到编辑器侧边栏，请单击“发布/更新”按钮旁边的齿轮，选择点击“区块”即可。 

　　编辑器侧边栏自定义时间线/时间轴选项包括：

• 布局– 控制时间线的显示方式。
  • 默认布局 – 垂直两侧时间线。
  • 水平的
  • 单面布局
  • 简单的布局
  • 紧凑的布局
• 每页显示数：控制时间线中显示的故事数。如果故事的数量多于您选择的数量，分页将被添加到您的时间线中。
• 日期格式：控制日期的格式。
• 图标– 选择“是”是您设置了故事图标并希望它们显示。
• 皮肤——控制皮肤的外观。
  • 默认皮肤
  • 干净的
• 动画效果——控制时间线动画。
  • 无 – 无动画
  • 淡入淡出
• 故事描述
  • 概括
  • 全文
• 故事顺序
  • 描述
  • 上升

　　4、 单击发布。

　　注意：Cool Timeline – Instant Builder 块是用于使用块和块设置直接在帖子/页面中实时创建时间线，与上述步骤类似。

　　推荐：[最新版]Duplicator Pro插件免费下载WordPress迁移备份插件

经典编辑器

　　以下部分说明如何使用经典编辑器添加使用时间线故事创建的时间线。如果您使用的是块编辑器，请参阅使用块编辑器部分使用时间线故事创建的时间线。

　　创建所有故事后，您可以使用经典编辑器在页面或帖子中显示时间线，如下所示：

　　1、 转到页面 -> 添加新内容（或帖子 -> 添加新内容）， （可选：添加您的页面标题）。

　　2、单击添加时间线简码图标。

　　3、Cool Timelines Shortcode 窗口将启动。

　　4、 选择您的布局选项，然后单击确定。

　　编辑器自定义时间线/时间轴选项包括：

• 布局– 控制时间线的显示方式。
  • 默认布局 – 垂直两侧时间线。
  • 水平的
  • 单面布局
  • 简单的布局
  • 紧凑的布局
• 每页显示数：控制时间线中显示的故事数。如果故事的数量多于您选择的数量，分页将被添加到您的时间线中。
• 日期格式：控制日期的格式。
• 图标– 选择“是”是您设置了故事图标并希望它们显示。
• 皮肤——控制皮肤的外观。
  • 默认皮肤
  • 干净的
• 动画效果——控制时间线动画。
  • 无 – 无动画
  • 淡入淡出
• 故事描述
  • 概括
  • 全文
• 故事顺序
  • 描述
  • 上升

　　5、您的时间线短代码将被插入到页面中。单击发布。

Cool Timeline 适用场景：8 个行业实战案例

很多人以为时间轴只能用来展示「公司历史」，其实这只是最基础的用法之一。只要涉及按时间或步骤顺序排列的内容，Cool Timeline 都可以帮你用视觉化方式呈现，效果远比纯文字列表更直观、更有说服力。以下是 8 个覆盖不同行业的真实使用场景。

场景一：企业官网 — 公司发展历史

搜索需求：WordPress 公司历史时间轴怎么做

这是最经典的用法。将企业从创立到现在的重要节点——首次融资、产品上线、用户突破、新市场进入——按年份排列在时间轴上，比一段段文字叙述更有冲击力，也更容易建立品牌信任感。

推荐配置：

• layout="default"（两侧交替，适合多个里程碑）
• date-format="Y"（只显示年份即可）
• order="ASC"（从创立年份开始向上排列）
• 每条故事配一张对应年代的品牌图片

实际效果：访客在「关于我们」页面看到清晰的发展脉络，企业形象更具分量，停留时间明显增加。

场景二：SaaS / 软件产品 — 产品路线图与版本更新日志

搜索需求：WordPress 产品路线图时间轴、版本更新日志页面怎么做

对于软件产品或订阅服务，公开展示产品路线图（Roadmap）和更新日志（Changelog）是建立用户信任的重要方式。用时间轴展示每次版本更新的内容，比一篇篇博客文章更直观，用户一眼就能看出产品在持续进步。

推荐配置：

• layout="one-side"（单侧布局更适合版本号 + 更新说明）
• date-format="M Y"（月份 + 年份格式）
• order="DESC"（最新版本在顶部）
• story-content="excerpt"（每条只显示摘要，保持页面整洁）

💡 可以用不同颜色图标区分「新功能」「Bug修复」「性能优化」三类更新（需要 Pro 版自定义颜色）。

场景三：个人品牌 / 自由职业者 — 职业经历时间轴

搜索需求：WordPress 个人简历时间轴、作品集网页时间轴怎么做

设计师、摄影师、咨询顾问等自由职业者的个人网站，通常需要展示职业经历、项目经历或获奖记录。与其用普通列表堆砌，不如用时间轴把每段经历的时间节点、公司名称、核心成就清晰呈现，视觉效果远比 PDF 简历更有印象。

推荐配置：

• layout="one-side-image"（图文单侧，可以放项目截图或公司 Logo）
• date-format="F Y"（月份 + 年份）
• order="DESC"（最近的工作经历在最上方）
• skin="clean"（简洁皮肤更符合专业感）

场景四：教育 / 培训机构 — 课程学习路径

搜索需求：WordPress 学习路线图时间轴、培训课程进度展示

在线教育平台或培训机构可以用时间轴展示「学习路径」——从入门基础到进阶认证，每个阶段对应的课程模块、学习目标和预计时长，帮助学员在报名前就清晰了解学习旅程，降低决策门槛，提升转化率。

推荐配置：

• layout="one-side"（步骤感更强，适合「第一阶段→第二阶段」的线性流程）
• 用自定义图标区分每个学习阶段（如书本图标、证书图标、实战图标）
• date-format="Y" 或直接用 Pro 版的「自定义标签」替换日期（如”基础期””进阶期”）
• order="ASC"（从第一步开始向下展示）

场景五：房地产 / 建筑开发 — 项目开发进度

搜索需求：WordPress 项目进度时间轴、房产开发阶段展示

房地产开发商或建筑公司可以用时间轴展示一个楼盘项目从立项、规划审批、动工、主体完工到交付的全流程节点，配合每个阶段的现场实拍图片，既可以对潜在购房者透明展示开发进度，也可以作为项目管理的公开可视化工具。

推荐配置：

• layout="default"（两侧交替，节点感强）
• date-format="F j, Y"（精确到月日，体现项目管理的严谨性）
• 每个节点配现场施工照片
• order="ASC"（从开工时间开始排列）

场景六：活动策划 / 婚礼 — 流程时间轴

搜索需求：WordPress 婚礼流程时间轴、活动议程页面怎么制作

活动策划公司、婚庆机构或举办大型活动的组织，可以用时间轴作为活动流程页面，替代枯燥的文字议程表。婚礼网站用时间轴展示当天流程（入场→仪式→宴席→送宾），在手机端同样清晰易读，宾客扫码即可了解全程安排。

推荐配置：

• layout="one-side-image"（图文并茂，放场地照片或布置效果图）
• 用自定义图标搭配每个环节（如戒指图标、香槟图标、相机图标）
• date-format="F j"（只显示月日，不显示年份）
• show-posts="-1"（一次显示所有流程，方便宾客全览）

场景七：旅游 / 出行 — 行程规划时间轴

搜索需求：WordPress 旅行行程时间轴、旅游攻略时间线制作

旅游博主或旅行社网站可以用时间轴直观展示多日行程：每天的目的地、主要活动、交通方式和住宿信息，配上当地风景图片，比传统表格更有沉浸感，也更方便用户保存和分享。

推荐配置：

• layout="one-side-image"（大图 + 文字说明，视觉效果最强）
• date-format="F j"（第几月第几日）
• order="ASC"（从出发第一天开始）
• 每条故事的图片使用目的地风景图，标题写「Day 1 · 城市名」格式

场景八：非营利组织 / 公益项目 — 成果展示时间轴

搜索需求：WordPress 公益项目进度、NGO 成果展示页面

非营利机构或公益项目的官网需要向捐助者和公众展示项目成果和资金使用情况。时间轴可以清晰呈现每个阶段的项目进展——受益人数、建成设施、覆盖地区——按时间排列，既体现透明度，也有效传递项目影响力，有助于提升捐助转化。

推荐配置：

• layout="default"（两侧交替，适合多个成果节点）
• 每条故事配现场图片（受益者、建成项目等真实场景）
• date-format="F Y"（月份 + 年份，按季度或半年更新）
• order="ASC"（从项目启动开始向上排列）

场景汇总速查

Cool Timelines时间轴/时间线页面效果

FAQ常见问题解答

总结

　　Cool Timeline 是目前 WordPress 平台上最易上手的时间轴插件之一，免费版功能已足够覆盖绝大多数使用场景。无论是展示公司发展历程、产品路线图，还是个人简历时间轴，都可以通过 Gutenberg 区块或简单短代码在几分钟内完成创建，无需任何代码基础。

　　如果你只需要基础的垂直时间轴，免费版就够了；如果需要水平布局、分类筛选或更丰富的视觉风格，可以考虑升级 Pro 版，以上是晓得博客为你介绍的WordPress时间轴插件Cool TimeLine插件使用教程的全部内容。希望对你的WordPress建站有所帮助，如有Cool TimeLine插件使用教程的相关问题，欢迎留言探讨。

　　推荐：（图文）WP Rocket插件配置教程