当前位置: 首页 > 网站建设 > WordPress建站 > 为您的WordPress博客文章添加左右悬浮按钮

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

发布于:2015-6-17 最后更新:2017-6-21 WordPress建站 8条评论 13,897 views
本站提供Linux服务器运维,自动化脚本编写等服务,如有需要请联系博主微信:xiaozme

在网络上浏览文章的时候无意中看到这个小功能,左右两侧分别有两个固定悬浮的按钮,作用就是用来切换上一篇和下一篇文章,显得非常直观且利用用户体验,那么小z来分享一下自己的代码吧。

一、上传图片素材

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

right_64
left_64

二、添加CSS样式

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

三、添加js函数

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




通过上面的三步您就可以通过左右固定悬浮按钮来切换上一篇、下一篇文章了,效果可以参考小z博客文章的左右两侧,添加上面的代码可能需要了解一些基本的HTML,否则容易添加错误,如果您遇到什么问题也可以联系小z帮忙解决。


8 条评论 “为您的WordPress博客文章添加左右悬浮按钮”

  1. 辣妹淘说道:

    虽然不是我想要的那种,但还是很感谢你的分享

  2. 明月登楼说道:

    显示了,就是不能用呀!出现404了,右边的永远都是“没有了”

    1. 小z说道:

      可能是因为主题原因,兼容性不是很好。方便的话可以加我QQ337003006调试一下。

  3. 老杨说道:

    个人感觉用处不大,反正我自己是不会用到的。

  4. 淘宝刷单说道:

    这个已经很不错了

  5. Vans爱好者说道:

    可以有更好的解决方案,看我的网站。

    1. 小z说道:

      你的那个做得不错,效果也很好。

发表评论

邮箱地址不会被公开。 必填项已用*标注