• A+

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

2018-11-14 阅读: 348 次 评论 0 条 百度已收录
你若不想做, 总能找到借口; 你若想做, 总会找到方法——阿拉伯谚语
本文共855个字,预计阅读时间需要3分钟。

搞了个网站,由于主题没有自带返回顶部按钮,那只能自己动手了,这类的第三方插件非常多,但是我认为能用代码实现的就不要用插件,插件越多拖慢网站速度那是必须的。

在网上找到一种代码方法,非常简单,效果如下,下面就分享一下吧:

效果


1、下载图标图片上传到主题目录下的images文件夹下:点击下载(密码为chyiyang,图片是白色透明的哦~)
2、首先编辑主题目录下的footer.php文件,在 代码之前添加以下的代码:

  1. <div id="sticky-nav"><a class="gotop" onclick="window.scrollTo(0,0);return false;" href="#top">
  2. <span>返回顶部</span></a> 
  3. <a class="about" href="http://www.heminjie.com/" target="_blank">
  4. <span>关于我们</span></a> 
  5. <?php if ( is_singular() && comments_open() ) { ?>
  6. <a class="gocom" onclick="document.getElementById('comment').focus();return false;" href="#respond">
  7. <span>发表评论</span></a>
  8. <?php } ?>
  9. <a class="bianlan" <span><span class="close-sidebar">隐藏侧边</span></span>
  10. <span class="show-sidebar" style="display:none;">显示侧边</span></a>
  11. <a class="gobtm" onclick="window.scrollTo(0,document.body.scrollHeight);return false;" href="#colophon">
  12. <span>前往底部</span></a></div>

3、再编辑主题目录下的style.css文件,在最后面添加如下的代码,给其增加样式:

  1. #sticky-nav {
  2.  -webkit-border-radius:3px 0 0 3px;
  3.  -moz-border-radius:3px 0 0 3px;
  4.  border-radius:3px 0 0 3px;
  5.  position:fixed;
  6.  right:0px;
  7.  bottom: 5%;
  8.  z-index: 9999;
  9.  width:30px;
  10.  _position:absolute;
  11.  _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2-this.offsetHeight/2))
  12. }
  13. #sticky-nav a:hover { 
  14.  right:56px;
  15. }
  16. #sticky-nav a {
  17.  background:url(images/sideTools.png) no-repeat;
  18.  width:30px;
  19.  height:30px;
  20.  display:block;
  21.  -webkit-border-top-left-radius:3px;
  22.  -moz-border-top-left-radius:3px;
  23.  -webkit-border-bottom-left-radius:3px;
  24.  -moz-border-bottom-left-radius:3px;
  25.  border-top-left-radius: 3px;
  26.  border-bottom-left-radius: 3px;
  27.  position:relative;
  28.  text-decoration:none;
  29. }
  30. #sticky-nav span {
  31.  background:#333;
  32.  -webkit-border-top-right-radius:3px;
  33.  -moz-border-top-right-radius:3px;
  34.  -webkit-border-bottom-right-radius:3px;
  35.  -moz-border-bottom-right-radius:3px;
  36.  border-top-right-radius:3px;
  37.  border-bottom-right-radius:3px;
  38.  font-size:12px;
  39.  position:absolute;
  40.  right: -56px;
  41.  padding:6.5px 4px;
  42.  color:#fff;
  43. }
  44. #sticky-nav a:hover {
  45.  overflow:visible
  46. }
  47. #sticky-nav a:hover span {
  48.  -webkit-transform:translate(0,0);
  49.  -moz-transform:translate(0,0);
  50.  -ms-transform:translate(0,0);
  51.  -o-transform:translate(0,0);
  52.  transform:translate(0,0);
  53.  opacity:1;
  54.  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity =100)";
  55.  filter:alpha(opacity=100)
  56. }
  57. #sticky-nav span:before,
  58. #sticky-nav span:after {
  59.  content:'';
  60.  display:block;
  61.  width:0;
  62.  height:0; 
  63. }
  64. #sticky-nav span:before {
  65.  border-left-color:#ccc;
  66.  right:-8px
  67. }
  68. #sticky-nav a.gotop {
  69.  background-position: -3px -3px;
  70.  background-color: #333;
  71.  margin-bottom: 5px;
  72. }
  73. #sticky-nav a.gobtm {
  74.  background-position: -4px -186px;
  75.  background-color: #333;
  76. }
  77. #sticky-nav a.gocom {
  78.  background-position: -4px -150px;
  79.  background-color: #333;
  80.  margin-bottom: 5px;
  81. }
  82. #sticky-nav a.bianlan {
  83.  background-position: -3px -77px;
  84.  background-color: #333;
  85.  margin-bottom: 5px;
  86. }
  87. .close-sidebar {
  88.  cursor:pointer;
  89. }
  90. .show-sidebar {
  91.  cursor:pointer;
  92. }
  93. #sticky-nav a.about {
  94.  background-position: -3px -40px;
  95.  background-color: #333;
  96.  margin-bottom: 5px;
  97. }

## 上面第一部分代码中定义了5个按钮,返回顶部、关于我们、评论、隐藏/显示侧边栏、返回顶部,如果不想要“隐藏/显示侧边栏”按钮,可直接删除第一部分中的下面一段代码:

  1. <a class="bianlan" <span><span class="close-sidebar">隐藏侧边</span></span>
  2. <span class="show-sidebar" style="display:none;">显示侧边</span></a>

如果不需要“关于我们”可删除下面代码:

  1. <a class="about" href="http://www.heminjie.com/" target="_blank">
  2. <span>关于我们</span></a>

且不需要往下看教程了,刷新页面,已经有效果了吧~

增加“关闭/显示侧边栏”按钮的js控制文件:

1、请复制以下代码另存为all.js,上传到网站FTP中:
注意:下面js代码中那个宽度两个width值需要相应修改,1280px是整个网站的宽度,900px是文章主体的宽度。

  1. jQuery(document).ready(function($){ 
  2.  $('.close-sidebar').click(function() { //点击class=“close-sidebar”的对象,即导航中“关闭侧边栏”时 
  3.  $('.close-sidebar,.sidebar').hide(); //隐藏class=“close-sidebar”和“sidebar”的对象,即导航中“关闭侧边栏”和主题的“侧边栏” 
  4.  $('.show-sidebar').show(); //显示class=“show-sidebar”的对象,即导航中“显示侧边栏” 
  5.  $('.content').animate({width: "1280px"}, 0); }); //“文章主体部分”的宽度增加到1280px 
  6.  $('.show-sidebar').click(function() { //点击导航中“显示侧边栏”时 
  7.  $('.show-sidebar').hide(); //隐藏导航中“显示侧边栏” 
  8.  $('.close-sidebar,.sidebar').show(); //显示导航中“关闭侧边栏”和主题的“侧边栏” 
  9.  $('.content').animate({width: "900px"}, 0);}); //“文章主体部分”的宽度收缩回900px
  10. });

2、编辑主题目录下的footer.php文件,在 代码之前添加以下的代码(载入all.js):

  1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/all.js"></script>

到这里就结束了,都搞好后,ctrl+f5刷新下网站看看效果哦,可能不同的wp主题css样式都不太相同,如果有样式有偏差,就需要微微调整css样式了~

原文标题:WordPress纯代码实现“返回顶部、返回底部、评论”效果
原文地址:http://www.heminjie.com/wordpress/2229.html

本文地址:https://www.chyiyang.cn/20.html
本文标题:WordPress纯代码实现“返回顶部、返回底部、评论”效果
版权声明:本站所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果,转载请写明出处!
所属分类:WP相关

发表评论


表情