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

在网络上浏览文章的时候无意中看到这个小功能，左右两侧分别有两个固定悬浮的按钮，作用就是用来切换上一篇和下一篇文章，显得非常直观且利用用户体验，那么小z来分享一下自己的代码吧。
一、上传图片素材
将下面两张图片保存到本地，然后再通过多媒体上传到您的媒体库中，并获取对应的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-->

通过上面的三步您就可以通过左右固定悬浮按钮来切换上一篇、下一篇文章了。

来自https://www.xiaoz.me/archives/5880

标签：WordPress