利发国际lifa222 » WordPress » WordPress纯代码实现“返回顶部、返回底部、评论”效果

WordPress纯代码实现“返回顶部、返回底部、评论”效果

 
相信大家对返回顶部、返回底部这些功能已经不陌生了,wordpress上也有很多插件可以实现,也有很多代码方式;
 
今天我分享的也是以纯代码实现"返回顶部、返回底部、评论"的效果,但是样式跟其他人的可能不同,个人认为比较美观实用一些,可以在其中增加一些超链接或者“关闭/显示侧边栏”按钮,效果图如下:
23232
## 默认是以图标的方式贴在右下角边栏,鼠标滑过弹出文字说明,单击执行效果。
 
添加方法(三步实现):
 
1、下载图标图片上传到主题目录下的images文件夹下:点此下载(图片是白色透明的哦~)
 
2、首先编辑主题目录下的footer.php文件,在 </body></html>代码之前添加以下的代码(复制代码的时候不要复制前面的行号哦~):
1 2 3 4 5 6 7 8 9 10 11 12 <div id="sticky-nav"><a class="gotop" onclick="window.scrollTo(0,0);return false;" href="http://bearingbid.com/quot;#top">" <span>返回顶部</span></a> <a class="about" href="http://bearingbid.com/uot;http://www.heminjie.com/"" target="_blank"> <span>关于我们</span></a> <?php if ( is_singular() && comments_open() ) { ?> <a class="gocom" onclick="document.getElementById('comment').focus();return false;" href="http://bearingbid.com/quot;#respond">" <span>发表评论</span></a> <?php } ?> <a class="bianlan" <span><span class="close-sidebar">隐藏侧边</span></span> <span class="show-sidebar" style="display:none;">显示侧边</span></a> <a class="gobtm" onclick="window.scrollTo(0,document.body.scrollHeight);return false;" href="http://bearingbid.com/quot;#colophon">" <span>前往底部</span></a></div>
3、再编辑主题目录下的style.css文件,在最后面添加如下的代码,给其增加样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 #sticky-nav { -webkit-border-radius:3px 0 0 3px; -moz-border-radius:3px 0 0 3px; border-radius:3px 0 0 3px; position:fixed; right:0px; bottom: 5%; z-index: 9999; width:30px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2-this.offsetHeight/2)) } #sticky-nav a:hover { right:56px; } #sticky-nav a { background:url(images/sideTools.png) no-repeat; width:30px; height:30px; display:block; -webkit-border-top-left-radius:3px; -moz-border-top-left-radius:3px; -webkit-border-bottom-left-radius:3px; -moz-border-bottom-left-radius:3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; position:relative; text-decoration:none; } #sticky-nav span { background:#333; -webkit-border-top-right-radius:3px; -moz-border-top-right-radius:3px; -webkit-border-bottom-right-radius:3px; -moz-border-bottom-right-radius:3px; border-top-right-radius:3px; border-bottom-right-radius:3px; font-size:12px; position:absolute; right: -56px; padding:6.5px 4px; color:#fff; } #sticky-nav a:hover { overflow:visible } #sticky-nav a:hover span { -webkit-transform:translate(0,0); -moz-transform:translate(0,0); -ms-transform:translate(0,0); -o-transform:translate(0,0); transform:translate(0,0); opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity =100)"; filter:alpha(opacity=100) } #sticky-nav span:before, #sticky-nav span:after { content:''; display:block; width:0; height:0;   } #sticky-nav span:before { border-left-color:#ccc; right:-8px } #sticky-nav a.gotop { background-position: -3px -3px; background-color: #333; margin-bottom: 5px; } #sticky-nav a.gobtm { background-position: -4px -186px; background-color: #333; } #sticky-nav a.gocom { background-position: -4px -150px; background-color: #333; margin-bottom: 5px; } #sticky-nav a.bianlan { background-position: -3px -77px; background-color: #333; margin-bottom: 5px; } .close-sidebar { cursor:pointer; } .show-sidebar { cursor:pointer; } #sticky-nav a.about { background-position: -3px -40px; background-color: #333; margin-bottom: 5px; }
## 上面第一部分代码中定义了5个按钮,返回顶部、关于我们、评论、隐藏/显示侧边栏、返回顶部,如果不想要“隐藏/显示侧边栏”按钮,可直接删除第一部分中的下面一段代码:
1 2 <a class="bianlan" <span><span class="close-sidebar">隐藏侧边</span></span> <span class="show-sidebar" style="display:none;">显示侧边</span></a>
如果不需要“关于我们”可删除下面代码:
1 2 <a class="about" href="http://www.heminjie.com/" target="_blank"> <span>关于我们</span></a>
且不需要往下看教程了,刷新页面,已经有效果了吧~
 
增加“关闭/显示侧边栏”按钮的js控制文件:
 
1、请复制以下代码另存为all.js,上传到网站FTP中:
注意:下面js代码中那个宽度两个width值需要相应修改,1280px是整个网站的宽度,900px是文章主体的宽度。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 jQuery(document).ready(function($){   $('.close-sidebar').click(function() { //点击class=“close-sidebar”的对象,即导航中“关闭侧边栏”时   $('.close-sidebar,.sidebar').hide(); //隐藏class=“close-sidebar”和“sidebar”的对象,即导航中“关闭侧边栏”和主题的“侧边栏”   $('.show-sidebar').show(); //显示class=“show-sidebar”的对象,即导航中“显示侧边栏”   $('.content').animate({width: "1280px"}, 0); }); //“文章主体部分”的宽度增加到1280px   $('.show-sidebar').click(function() { //点击导航中“显示侧边栏”时   $('.show-sidebar').hide(); //隐藏导航中“显示侧边栏”   $('.close-sidebar,.sidebar').show(); //显示导航中“关闭侧边栏”和主题的“侧边栏”   $('.content').animate({width: "900px"}, 0);}); //“文章主体部分”的宽度收缩回900px });
2、编辑主题目录下的footer.php文件,在 </body></html>代码之前添加以下的代码(载入all.js):
1 <script src="http://www.heminjie.com/js/all.js"></script>
## 上面代码中的src路径修改为刚才你上传all.js到FTP中的路径。
 
到这里教程就结束了,都搞好后,ctrl+f5刷新下网站看看效果哦,可能不同的wp主题css样式都不太相同,如果有样式有偏差,就需要微微调整css样式了~
原文链接:WordPress纯代码实现“返回顶部、返回底部、评论”效果,转载请注明来源!
6