腾讯云服务器优惠活动华纳云香港服务器
boke112百科 » Plugins » 正文

WordPress响应式纯HTML和CSS时间线插件Cool Timeline

WordPress主题推荐

今天老古向大家推荐这款 Cool Timeline 插件,它是一个响应式 WordPress 纯 HTML 和 CSS 时间线插件,可以让我们创建出漂亮的水平和垂直历史时间线。我们只需要在创建文章的时候设置好图像和日期,然后 Cool Timeline 插件就会根据故事的年份和日期按时间顺序(ASC 或 DESC)自动填充,而且还可以使用简码轻松地在网站的任何页面上显示时间轴。那么什么情况下的文章比较适合使用时间线显示呢?建议以下类型比较使用:

  • 代表我们的建站故事(公司的故事);
  • 以时间轴格式展示教程/过程步骤;
  • 创建一个程序时间表;
  • 创建事件/约会时间表;
  • 工作经历/成就时间表;
  • 个人故事时间表等

Cool Timeline插件的安装及启用

登录 WordPress 后台 – 插件 – 安装插件 – 搜索“Cool Timeline”,点击该插件右上角的【现在安装】按钮,稍等片刻安装完毕后点击【Activate】或【启用】按钮启用该插件(PS:或前往插件 – 已安装的插件 – 找到该插件后点击【启用】按钮)。

WordPress响应式纯HTML和CSS时间线插件Cool Timeline-第1张-boke112百科(boke112.com)

如果无法在后台直接安装就前往 WordPress 官方插件页面Cool Timeline中下载,然后在后台 – 插件 – 安装插件 – 点击【上传插件】- 点击【选择文件】按钮后选择刚才下载的插件安装包 – 点击【现在安装】按钮 – 成功安装后点击【启用插件】按钮。

Cool Timeline插件的设置和使用

1、插件的设置

登录 WordPress 后台 – Cool Timeline Settings,即可进入到该插件的具体设置页面。

1.1 常规设置

WordPress响应式纯HTML和CSS时间线插件Cool Timeline-第2张-boke112百科(boke112.com)

1.2 样式设定

WordPress响应式纯HTML和CSS时间线插件Cool Timeline-第3张-boke112百科(boke112.com)

1.3 版式设置

WordPress响应式纯HTML和CSS时间线插件Cool Timeline-第4张-boke112百科(boke112.com)

1.4 进阶设定:我们使用免费版,这个可直接忽略。

2、插件的使用

2.1 Add New添加新故事

WordPress 后台 – Timeline Stories – Add New 可以进入到新建故事编辑状态,跟我们平时发布文章的操作一样,只不过多了两个小地方,一是可以在“Select Story Icon”点击【Add Icon】添加故事图标,二是在“Timeline Story Settings”中选择故事发生的日期及选择图片是全图还是缩略图,最后记得点击【发布】按钮。

WordPress响应式纯HTML和CSS时间线插件Cool Timeline-第5张-boke112百科(boke112.com)

2.2 All Stories 所有故事

WordPress 后台 – Timeline Stories – All Stories,可以查看和管理所有的故事,跟所有文章一样。

WordPress响应式纯HTML和CSS时间线插件Cool Timeline-第6张-boke112百科(boke112.com)

2.3 在文章中添加时间轴故事

进入到文章页编辑状态,点击编辑器中的时间轴图标按钮可以选择 Add Cool Timeline Shortcode 添加垂直时间轴或 Add Cool Horizontal Timeline 添加水平时间轴。具体如下图所示:

WordPress响应式纯HTML和CSS时间线插件Cool Timeline-第7张-boke112百科(boke112.com)

2.3.1 Add Cool Horizontal Timeline 添加水平时间轴的选项设置

WordPress响应式纯HTML和CSS时间线插件Cool Timeline-第8张-boke112百科(boke112.com)

前端效果图如下:

WordPress响应式纯HTML和CSS时间线插件Cool Timeline-第9张-boke112百科(boke112.com)

2.3.2 Add Cool Timeline Shortcode 添加垂直时间轴的选项设置

WordPress响应式纯HTML和CSS时间线插件Cool Timeline-第10张-boke112百科(boke112.com)

前端效果图如下:

WordPress响应式纯HTML和CSS时间线插件Cool Timeline-第11张-boke112百科(boke112.com)

总结

对于这个 WordPress 响应式纯 HTML 和 CSS 时间线插件 Cool Timeline,如果只是在某个文章页中添加时间轴会有点浪费,如果把时间轴中的每一个故事当做一篇篇的文章,然后就通过简码方式添加到某个页面或者模板中,那么就可以把整个站点的分类或者专题页都按照时间轴来展示出来。唯一缺点就是有很多功能都需要付费成为专业版才能操作。

本文地址:https://boke112.com/post/3957.html

赞 (0) 打赏
版权声明:本文为原创文章,版权归 boke112百科 所有,欢迎分享本文,转载请保留出处!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请联系我们,确认后马上更正或删除,谢谢!
香港云主机55元/年
wu