为您的WordPress博客添加上一篇下一篇固定悬浮按钮。

流年

管理员

327
文章

504.1千
浏览

81,7611字数 661阅读2分12秒

现在我的文章两边各有一个小箭头是上下篇按钮，之前看见别人博客上有，觉得挺有意思的，就折腾了一个。

非常直观且有利于提升用户体验！

一.添加css样式

添加到style.css里面。

二.把下面代码添加到single.php页面进行调用，请自己添加到适当位置！

<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');">
<i class="fa fa-angle-left"></i>
</a>
</div>
<div id = "art_right">
<a href = "javascript:;" onclick = "jump('n');"><i class="fa fa-angle-right"></i></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('真滴没有下一篇了！不要再点了！o(^▽^)o');
return false;
}
else{
window.location.href = next;
}
}
}
</script>

以上代码用了fontawesome的图标字体。如果你像使用要引入fontawesome相关文件。也可以到后台搜索安装这个插件 Font Awesome 4 Menus 。

如果你不想使用图标字体，那么可以使用以下代码。

一.上传素材图片到你的网站目录。

二.把以上代码中的这两句

都换成这个

然后图片地址改成你刚才上传的那两个图片地址。

CSS：

OK全部完工，不懂得可以留言。

刚才写完文章以后，我打开手机版看了下，看见按钮依然存在，在手机上貌似没那个必要。。所以我们要添加一个css

这个css就是当屏幕小于等于480像素的时候，隐藏上下篇箭头。。懂得自然懂。。不懂得去研究一下。

最后这个css是自适应模板用的，不是自适应的也能用。

好啦折腾完了，俺要睡觉觉了。