为您的WordPress博客文章添加左右悬浮按钮
以下代码由PHP站长网 52php.cn收集自互联网现在PHP站长网小编把它分享给大家,仅供参考 在网络上浏览文章的时候无意中看到这个小功能,左右两侧分别有两个固定悬浮的按钮,作用就是用来切换上一篇和下一篇文章,显得非常直观且利用用户体验,那么创客云来分享一下自己的代码吧。 一、上传图片素材将下面两张图片保存到本地,然后再通过多媒体上传到您的媒体库中,并获取对应的 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--> 通过上面的三步您就可以通过左右固定悬浮按钮来切换上一篇、下一篇文章了,效果可以参考小 z 博客文章的左右两侧,添加上面的代码可能需要了解一些基本的 HTML,否则容易添加错误,如果您遇到什么问题也可以联系创客云帮忙解决。 以上内容由PHP站长网【52php.cn】收集整理供大家参考研究如果以上内容对您有帮助,欢迎收藏、点赞、推荐、分享。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |