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

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

一、上传图片素材

  将下面两张图片保存到本地,然后再通过多媒体上传到您的媒体库中,并获取对应的URL地址。
为您的WordPress博客文章添加左右悬浮按钮

二、添加CSS样式

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

  1. <style type = "text/css">
  2. 	#art_left{
  3. 		position:fixed;
  4. 		top:50%;
  5. 		left:10px;
  6. 		margin-top:-32px;
  7. 	}
  8. 	#art_right{
  9. 		position:fixed;
  10. 		top:50%;
  11. 		right:10px;
  12. 		margin-top:-32px;
  13. 	}
  14. </style>

三、添加js函数

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

  1. <!--上下翻页-->
  2. <div class="prev" id = "prev" style = "display:none;"><?php previous_post_link('« %link') ?></div>
  3. <div class="next" id = "next" style = "display:none;"><?php next_post_link('%link »') ?></div>
  4. <div id = "art_left">
  5. 	<a href = "javascript:;" onclick = "jump('p');">
  6. 		<img src = "您的图片素材地址" />
  7. 	</a>
  8. </div>
  9. <div id = "art_right">
  10. 	<a href = "javascript:;" onclick = "jump('n');"><img src = "您的图片素材地址" /></a>
  11. </div>
  12. <script>
  13. 	//声明全局变量
  14. 	var prev;
  15. 	var next;
  16. 	//获取对应的URL
  17. 	$(document).ready(function(){
  18. 		prev = $("#prev a").attr("href");
  19. 		next = $("#next a").attr("href");
  20. 	});
  21. 	//调用方法进行跳转
  22. 	function jump(re) {
  23. 		if(re == 'p') {
  24. 			window.location.href = prev;
  25. 		}
  26. 		if(re == 'n') {
  27. 			if(next == null) {
  28. 					alert('没有了!');
  29. 					return false;
  30. 				}
  31. 				else{
  32. 					window.location.href = next;
  33. 				}
  34. 		}
  35. 	}
  36. </script>
  37. <!--上下翻页END-->

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 为您的WordPress博客文章添加左右悬浮按钮 https://zhutizhen.com/14362.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章