现在很多文章左右两侧都会有两个固定悬浮的按钮,作用就是用来切换上一篇和下一篇文章,显得非常直观且利用用户体验,chrafz分享一下代码吧。

一、上传图片素材

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

WordPress文章页添加上一篇、下一篇左右悬浮按钮-张弦先生-chrafz.comWordPress文章页添加上一篇、下一篇左右悬浮按钮-张弦先生-chrafz.com

二、添加CSS样式

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

三、添加js函数

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

通过上面的几步您就可以通过左右固定悬浮按钮来切换上一篇、下一篇文章了,效果可以参考张弦先生文章的左右两侧。