检测到您启用了Adblock等屏蔽广告扩展,导致正常的内容图片无法显示,为了不影响阅读体验,建议您将www.xiaoz.me加入白名单。

为您的WordPress博客文章添加左右悬浮按钮

在网络上浏览文章的时候无意中看到这个小功能,左右两侧分别有两个固定悬浮的按钮,作用就是用来切换上一篇和下一篇文章,显得非常直观且利用用户体验,那么小z来分享一下自己的代码吧。

一、上传图片素材

将下面两张图片保存到本地,然后再通过多媒体上传到您的媒体库中,并获取对应的URL地址。

right_64
left_64

二、添加CSS样式

将下面的CSS样式添加到主题目录下的style.css文件中,如果您使用了七牛云存储,请在七牛删除缓存,否则无法生效,或者您可以直接添加到主题目录的header.php文件中,代码放在</head>之前。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type = "text/css">
	#art_left{
		position:fixed;
		top:50%;
		left:10px;
		margin-top:-32px;
	}
	#art_right{
		position:fixed;
		top:50%;
		right:10px;
		margin-top:-32px;
	}
</style>

三、添加js函数

在合适的位置将下面的代码添加到主题目录的single.php页面进行调用,其中图片地址请替换为您自己的URL,参照步骤一的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!--上下翻页-->
<div class="prev" id = "prev" style = "display:none;"><?php previous_post_link('« %link') ?></div>
<div class="next" id = "next" style = "display:none;"><?php next_post_link('%link »') ?></div>
<div id = "art_left">
	<a href = "javascript:;" onclick = "jump('p');">
		<img src = "您的图片素材地址" />
	</a>
</div>
<div id = "art_right">
	<a href = "javascript:;" onclick = "jump('n');"><img src = "您的图片素材地址" /></a>
</div>
<script>
	//声明全局变量
	var prev;
	var next;
	//获取对应的URL
	$(document).ready(function(){
		prev = $("#prev a").attr("href");
		next = $("#next a").attr("href");
	});
	//调用方法进行跳转
	function jump(re) {
		if(re == 'p') {
			window.location.href = prev;
		}
		if(re == 'n') {
			if(next == null) {
					alert('没有了!');
					return false;
				}
				else{
					window.location.href = next;
				}
		}
	}
</script>
<!--上下翻页END-->

通过上面的三步您就可以通过左右固定悬浮按钮来切换上一篇、下一篇文章了,效果可以参考小z博客文章的左右两侧,添加上面的代码可能需要了解一些基本的HTML,否则容易添加错误,如果您遇到什么问题也可以联系小z帮忙解决。

8 Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注