如何在 WordPress 中添加美观的事件时间轴

08/30/2023

为什么要在 WordPress 中添加美观的事件时间轴

事件时间轴通过清晰、按时间顺序的结构突出重要的里程碑。使用时间轴可以增强内容的叙事效果。除了里程碑,时间轴还可以直观地展示进程、阶段和事件之间的关联,使内容更加吸引人。

许多 WordPress 网站所有者使用时间轴来有组织且视觉上吸引地展示相关事件。企业和组织也经常使用时间轴来展示其历史。

如果您有一个作品展示网站,比如一个在线摄影作品集,那么您可以在一个漂亮的垂直时间轴上展示您环游世界的摄影作品。这比在您的网站上编写历史并作为纯文本页面添加更具吸引力。

如何在 WordPress 中添加事件时间轴

在 WordPress 中添加事件时间轴的最简单方法是使用 Cool Timeline 插件。这个免费的用户友好插件可以让您快速而轻松地创建令人惊叹的时间轴。

方法 1:使用 Timeline Addons 菜单创建可重复使用的事件时间轴

要创建您的第一个事件,您可以从您的 WordPress 仪表板中转到 Timeline Addons » Add New Story。

步骤 1: 设置基本信息

在‘添加标题’字段中键入事件标题。在主编辑器中输入您想在时间轴上显示的所有文本。然后单击‘设置特色图片’链接,选择图片代表事件。

步骤 2: 设定事件时间

向下滚动到‘时间轴故事设置’部分,点击‘故事日期/年份’字段,并使用日历弹出窗口选择事件发生的时间和日期。

步骤 3: 添加和发布事件

在页面顶部点击‘发布’按钮。您可以重复这些步骤来创建更多事件。所有事件创建完毕后,可以前往 Timeline Addons » Cool Timeline Stories 查看。

步骤 4: 自定义时间轴样式

您可以转到 Timeline Addons » Timeline Settings » General Settings,设置时间轴标题和图像,选择事件在时间轴上的显示位置,以及设置内容显示的最大字数。在样式设置(Style Settings)选项卡中,您可以添加背景颜色和更改字体。

完成所有设置后,您可以将时间轴添加到页面或帖子中,只需点击‘+’按钮,搜索并添加‘Cool Timeline Shortcode Block’。

方法 2: 使用时间块创建多个事件时间轴

您还可以使用块编辑器和‘Cool Timeline Block’在 WordPress 中构建事件时间轴。替换每个占位符,并添加您自己的文本和图片。在页面或帖子中添加‘Cool Timeline Block’,点击占位事件进行编辑,并上传代表事件的图片。在右侧菜单中,替换‘Story Heading’占位符,添加事件描述,并在‘Primary Label (Date/Steps)’字段中键入事件发生的日期。您还可以为每个事件选择自定义图标,并根据需要添加更多事件。

结语

希望本文帮助您了解如何在 WordPress 网站上添加漂亮的事件时间轴,您也可以查看我们的其他指南,例如如何创建简单的事件日历,和如何在 WordPress 中添加倒计时小部件。



Related Posts

  • 2024-07-27
  • WordPress 插件

您是否希望在 WordPress 中要求文章必須設置精選圖片?如果您正在運營一個多作者的 WordPress 博客,您會希望確保每位作者在發布文章之前都添加精選圖片。在這篇文章中,我們將向您展示如何輕鬆地在 WordPress 中要求文章設置精選圖片。

閱讀更多
  • 2024-07-26
  • WordPress 插件

WordPress 內建搜尋功能,但其搜尋結果通常不盡人意。幸運的是,您可以自訂搜尋結果頁面,使其更加使用者友好。本文章將向您展示如何無需編寫任何代碼輕鬆自訂 WordPress 搜尋結果頁面。

透過自訂搜尋結果頁面,使用者能更容易找到他們需要的內容,並改善整體使用者體驗,從而提高頁面瀏覽量和轉化率。

閱讀更多
  • 2024-07-24
  • WordPress 插件

您在尋找如何創建影片和圖片的 WordPress Slider 吗?Sliders 是展示內容且吸引網站訪客注意力的絕佳方式。本文將為您提供使用 Soliloquy 簡易創建影片和圖片 Slider 的詳細指南。

首先,您需要安裝一個合適的 WordPress Slider 插件,例如 Soliloquy。這個插件使用簡單,可建立響應式的影片和圖片 Slider,不需要編寫一行代碼。接著,您可以根據需求添加各種媒體內容並調整 Slider 設定。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>