【WordPress 教程】年单侧伸缩式时间轴记录网站发展历程

孤狼
171
文章
95
评论
2019年6月11日00:00:51 15 13,437 2715字阅读9分3秒
摘要

wordpress时间轴效果常见于博客历程页面中,以时间为轴,记录博客发展过程中的重要时刻。也有利用时间轴记录自己的心情,主题更新日志等情况,是一个比较实用且可丰富博客展示效果的功能。本文主要讲解单侧伸缩式时间轴的实现过程。

【单侧伸缩式时间轴】

2019年

01-01
内容 1
01-02
内容 2
01-03
内容 3

2018年

01-01
内容 4
01-02
内容 5
01-03
内容 6

【功能介绍】

实现过程

  • 采用自定义列表的方式实现时间轴效果
  • 时间轴以年为单位进行分段,每一个“年”为一段

实现功能

  • 点击“年份”可以展开或闭合该段内容,默认情况下第一段展开,其余闭合
  • 鼠标移动到具体的某一行时,该行内容颜色发生变化,以突出鼠标所在当前行
  • 自适应屏幕,在不同屏幕尺寸下实现相同效果

相关说明

  • 使用相同主题的童鞋可以直接套用,使用其他主题的童鞋,可能需要对样式做一定的调整
  • 我没有对时间轴在后台编辑器的样式做优化,所以在可视化模式下不能实时看到效果,只能看到基本框架结构
  • 增删内容时,建议在文本模式下操作

【操作方法】

  • 首先:新建一个页面,页面标题自定义,切换到【文本】模式,复制以下代码到编辑器中并发表
<div id="history-time-line">
	<p class="year">年份 1</p>
		<div class="time-line">
			<dl>
				<dt>日期 1</dt>
				<dd>内容 1</dd>
				<dt>日期 2</dt>
				<dd>内容 2</dd>
				<dt>日期 3</dt>
				<dd>内容 3</dd>
			</dl>
		</div>
	<p class="year">年份 2</p>
		<div class="time-line">
			<dl>
				<dt>日期 4</dt>
				<dd>内容 4</dd>
				<dt>日期 5</dt>
				<dd>内容 5</dd>
				<dt>日期 6</dt>
				<dd>内容 6</dd>
			</dl>
		</div>
</div>

代码说明:

  • 代码第 2~12 行为一个内容段,也就是一个“年”,这里我放了两个段作参考
  • 如果你需要多个段,就复制这部分代码到最后一个</div>的前面即可
  • “年份”:可任意输入,长度不限
  • “日期”:由于样式的关系需要写成“XX-XX”的格式,否则后面的蓝色小圆点会不在蚂蚁线的中间
  • “内容”:可任意输入,长度不限

后台编辑器效果:

然后:打开【style.css】文件,在任意位置(或最后)添加

此处为隐藏的内容!
发表评论并刷新,方可查看

代码说明:

  • 第 49 行的一条代码主要用来适应屏幕宽度不大于 700 时让时间轴整体向左移动
  • 第 49 行的第二条代码主要用来当屏幕宽度不大于 700px 时,使蓝色小圆点和蚂蚁线水平居中对齐。

接着:打开【js/script.js】文件,找到代码

// 文字展开
$(".show-more span").click(function(e) {
	$(this).html(["<i class='be be-squareplus'></i>展开", "<i class='be be-squareminus'></i>折叠"][this.hutia ^= 1]);
	$(this.parentNode.parentNode).next().slideToggle();
	e.preventDefault();
});

在其下面添加

//博客历程时间轴展开
$(document).ready(function(){
	(function(){
		$('#history-time-line p.year').each(function(){
			var num=$(this).next().children('dl').children('dt').size();
			var text=$(this).text();
			$(this).html(text+' <span class="year-num">共'+num+'条</span>');
		});
		var $all_time_line=$('#history-time-line .time-line'),
			$first_time_line=$('#history-time-line .time-line:first');
			$all_time_line.hide(1,function(){
			$first_time_line.show();
		});
		$('#history-time-line p.year').click(function(){
			$(this).next().slideToggle(400);
			return false;
		});
	})();
});
  • 这部分代码用来实现点击“年份”时,该段内容展开/闭合效果。
  • 或者可以新建一个JS文件保存代码自定义文件位置,也方便以后主题更新不用去修改代码。
继续阅读
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
  • 本文由 发表于 2019年6月11日00:00:51
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:15   其中:访客  15   博主  0
    • 钟诚俊 钟诚俊

      众芳摇落独暄(xuān)妍,占尽风情向小园。疏影横斜水清浅,暗香浮动月黄昏。霜禽欲下先偷眼,粉蝶如知合断魂。幸有微吟可相狎(xiá),不须檀板共金樽(zūn)。—-【山园小梅(北宋林逋(bū))】

      • 明月秋枫 明月秋枫

        style.css这里代码呢

        • 明月秋枫 明月秋枫

          春风得意马蹄疾,一日看尽长安花—-【唐·孟郊·登科后】

          • 玩命蜗牛 玩命蜗牛

            正好需要呢 来看看 是否按照你的方法我可以实现 非常感谢

            • 冰-Mango 冰-Mango

              地下城与勇士DNF换频道掉线或组队卡,大多是因为你的路由器不行,尤其是免费软路由。