WordPress给文章增添悬浮按钮

文章在拥有悬浮按钮用来给文章进行翻篇或者其他应用添加时，对于用户阅读文章和浏览使用都会利于用户的使用于操作，分享一下WordPress网站文章添加左右悬浮按钮方法。

一、上传图片素材

将下面两张图片保存到本地，然后再通过多媒体上传到您的媒体库中，并获取对应的 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') {#p#分页标题#e#

if(next == null) {

alert('没有了！');

return false;

}

else{

window.location.href = next;

}

}

}

</script>

<!--上下翻页END-->

通过上面的三步您就可以通过左右固定悬浮按钮来切换上一篇、下一篇文章了，添加上面的代码可能需要了解一些基本的 HTML知识，否则容易添加错误。