WordPress教程
为您的WordPress博客文章添加左右悬浮按钮
PetitQ
收藏
在网络上浏览文章的时候无意中看到这个小功能，左右两侧分别有两个固定悬浮的按钮，作用就是用来切换上一篇和下一篇文章，显得非常直观且利用用户体验，那么创客云来分享一下自己的代码吧。
一、上传图片素材
将下面两张图片保存到本地，然后再通过多媒体上传到您的媒体库中，并获取对应的 URL 地址。
也想出现在这里？联系我们吧
二、添加 CSS 样式
将下面的 CSS 样式添加到主题目录下的 style.css 文件中，如果您使用了七牛云存储，请在七牛删除缓存，否则无法生效，或者您可以直接添加到主题目录的 header.php 文件中，代码放在之前。
<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，参照步骤一的方法。
<!--上下翻页-->
<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，否则容易添加错误，如果您遇到什么问题也可以联系创客云帮忙解决。
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
