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

孤狼
孤狼
孤狼
171
文章
118
评论
2019年6月17日19:37:221715,980 2687字阅读8分57秒

【效果展示】

2019 年

2018 年

【功能介绍】

实现过程

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

实现功能

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

相关说明

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

【操作方法】

  • 首先:新建一个页面,页面标题自定义,切换到【文本】模式,复制以下代码到编辑器中并发表
此处为隐藏的内容
发表评论并刷新,方可查看

代码说明:

  • 代码第 2~14 行为一个内容段,也就是一个“年”,这里我放了两个段作参考
  • 如果你需要多个段,就复制这部分代码到最后一个</div>的前面即可
  • 代码第 4~8 行为一个内容段,也就是一个“月”,这里我放了两个段作参考
  • 如果你需要多个段,就复制这部分代码到“年段”最后一个</ul>的前面即可
  • 代码第 6 行为内容段,复制整段到“月段”最后一个</ul>的前面即可
  • “年份”:可任意输入,长度不限
  • “日期”:可任意输入,长度不限
  • “内容”:可任意输入,长度不限

后台编辑器效果:

然后:打开【style.css】文件,在任意位置(或最后)添加 Begin主题可添加定制风格内。

style.css代码:

.year {
	font-size: 16px;
	margin: 10px -21px 10px -21px;
	padding: 0 20px;
	border-bottom: 1px solid #ebebeb;
	border-left: 5px solid #0088cc;
}
.mon {
	color: #000;
	line-height: 30px; 
	margin: 5px 0 5px 5px;
	cursor: pointer;
}
.post_list li {
	line-height: 30px;
	text-indent: 2em;
}
.post_list {
	color: #999;
	margin: 0 0 10px 0;
}
.mon-num {
	color: #999;
	margin: 0 0 0 10px;
}

接着:新建一个JS文件保存代码自定义文件位置,也方便以后主题更新不用去修改代码。

//博客历程时间轴展开
$(document).ready(function(){
    (function(){
		$('#all_archives span.mon').each(function(){
			var num=$(this).next().children('li').size();
			var text=$(this).text();
			$(this).html(text+' <span class="mon-num">'+num+' 条</span>');
		});
		var $al_post_list=$('#all_archives ul.post_list'),
			$al_post_list_f=$('#all_archives ul.post_list:first');
		$al_post_list.hide(1,function(){
			$al_post_list_f.show();
		});
		$('#all_archives span.mon').click(function(){
			$(this).next().slideToggle(400);
			return false;
		});
    })();
 });
  • 这部分代码用来实现点击“月份”时,该段内容展开/闭合效果。
  • 也可以在编辑时加载代码如下
//博客历程时间轴展开 
<script type="text/javascript">
$(document).ready(function(){
    (function(){
		$('#all_archives span.mon').each(function(){
			var num=$(this).next().children('li').size();
			var text=$(this).text();
			$(this).html(text+' <span class="mon-num">'+num+' 篇</span>');
		});
		var $al_post_list=$('#all_archives ul.post_list'),
			$al_post_list_f=$('#all_archives ul.post_list:first');
		$al_post_list.hide(1,function(){
			$al_post_list_f.show();
		});
		$('#all_archives span.mon').click(function(){
			$(this).next().slideToggle(400);
			return false;
		});
    })();
 });
</script>
继续阅读
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
孤狼
  • 本文由 发表于 2019年6月17日19:37:22
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
【新年气象】过年啦WordPress 主题添加挂灯笼特效 WordPress

【新年气象】过年啦WordPress 主题添加挂灯笼特效

过年挂灯笼是中国的一个习俗,家里挂灯笼,自己博客也是自己的家,当然也要挂一个了。代码这里也分享一下,有喜欢的朋友拿去用,将灯笼挂在自己的博客上,增加点过年的气氛。这个灯笼只是简单应...
匿名

发表评论

匿名网友 填写信息

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

评论:17   其中:访客  17   博主  0
    • 666 666

      为什么家长只看分数?废话!难道他们看得懂题目?

      • cs cs

        和我888

        • cs cs

          觉得你暗恋的人也在暗恋你,你知道这叫什么吗?这叫想象力。

          • 吴子川 吴子川

            人与人之间,除了生离与死别,并无第三种结局。

            • @-O@_@彩虹雨你还记得我吗 @-O@_@彩虹雨你还记得我吗

              找了好久了

              • v八八八八八八八 v八八八八八八八

                月黑雁飞高,单(chán)于夜遁(dùn)逃。欲将轻骑(jì)逐,大雪满弓刀。—-【塞下曲(唐卢纶)】

                • 爱谁谁2 爱谁谁2

                  无情未必真豪杰,怜子如何不丈夫—-【鲁迅】