WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果（样式一）

WordPress, WP开发 原创 9 17,797

本文所说的”返回顶部、返回底部、评论 “相信你知道是什么东东了吧？  一般你在各大网站的右下角都能看到类似的东东，但许多网站都普遍只有“返回顶部”的效果。不过就Jeff认为，加上这个会更加提升用户体验。本站将陆续发表几篇文章提供这几类“返回顶部、返回底部、评论”的添加方法（教程 ），今天提供的是在Jeff的阳台中使用的，效果如下：

你也可以到Jeff的阳台查看效果。

此“返回顶部、返回底部、评论”效果没有像本站使用的js滑动特效，但影响不大。如果你在意这个，你也可以等待后续文章更新。具体的黑色是通过css定义的，你可以改成你需要的颜色。

在此之前，请先下载这个gif图片，一般放在主题目录下的images文件夹，之后就开始我们的代码之旅吧！

教程进入ing

一、首先打开主题目录下的footer.php文件，在</body></html>代码之前添加如下的代码：

<div id="sticky-nav"><a class="gotop" onclick="window.scrollTo(0,0);return false;" href="#top">
<span>返回顶部</span></a> 
<?php if ( is_singular() && comments_open() ) { ?>
<a class="gocom" onclick="document.getElementById('comment').focus();return false;" href="#respond">
<span>发表评论</span></a>
<?php } ?>
<a class="gobtm" onclick="window.scrollTo(0,document.body.scrollHeight);return false;" href="#colophon">
<span>前往底部</span></a></div>

二、再打开主题目录下的style.css文件，添加如下的代码：

article, .wp-pagenavi .current, #comment-nav-below .current{background:#fff url(images/bgb.gif) repeat-x 100% 100%; background:-webkit-linear-gradient(bottom,#eee 0%,#fff 40px); background:-moz-linear-gradient(bottom,#eee 0%,#fff 40px); background:-ms-linear-gradient(bottom,#eee 0%,#fff 40px); background:-o-linear-gradient(bottom,#eee 0%,#fff 40px); background:linear-gradient(bottom,#eee 0%,#fff 40px)}#sticky-nav{background:#000; -webkit-border-radius:3px 0 0 3px; -moz-border-radius:3px 0 0 3px; border-radius:3px 0 0 3px; position:fixed; right:0; top:41%; width:30px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2-this.offsetHeight/2))}
#sticky-nav a{background:url(images/sprite.gif) no-repeat; width:30px; height:30px; display:block; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; position:relative; color:#000; text-decoration:none; overflow:hidden}#sticky-nav span{background:#f7f7f7; border:1px solid #ccc; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; font-size:12px; position:absolute; left:-65px; top:4px; padding:2px 4px; -webkit-box-shadow:inset 0 0 1px #fff,0 0 1px rgba(0,0,0,.2); -moz-box-shadow:inset 0 0 1px #fff,0 0 1px rgba(0,0,0,.2); box-shadow:inset 0 0 1px #fff,0 0 1px rgba(0,0,0,.2); -webkit-transform:translate(10px,0); -webkit-transition:all .4s; -moz-transform:translate(10px,0); -moz-transition:all .4s; -ms-transform:translate(10px,0); -ms-transition:all .4s; -o-transform:translate(10px,0); -o-transition:all .4s; transform:translate(10px,0); transition:all .4s; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity =0)"; filter:alpha(opacity=0)}
#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; border:4px solid transparent; border-left-color:#fff; position:absolute; top:7px; right:-7px}
#sticky-nav span:before{border-left-color:#ccc; right:-8px}#sticky-nav a.gotop{background-position:100% 0}
#sticky-nav a.gobtm{background-position:100% 50%}#sticky-nav a.gocom{background-position:100% 100%}

最后保存刷新即可。

以上代码及gif图片来源于小影的ZiPE主题，特此感谢！

建议将下载的这个gif图片使用CSS sprite与其他图片合并，以减少http请求数。

过几天将奉上本站目前正在使用的”返回顶部、返回底部、发表评论 “效果的教程，敬请期待。

评分：
当前平均分 0.00 (0%) - 0 个投票
版权声明
© 声明：本站原创文章由 撰写，采用 BY-NC-SA 创作共用协议，转载时请以链接形式标明本文地址；非原创（转载）文章版权归原作者所有。查看版权声明
© 转载请注明来源：https://devework.com/wordpress-top-bottom-comment.html
9 条 评论

  1. 当然，你的文后注明来源的做法是不错的，值得肯定。

    10 年前 回复

  2. 连找好几家都是这样，连代码都不给出，看来都只是抄来抄去。。。

    10 年前 回复

    • 一年半前的水平，我将代码改了下了。show-gravatar.js 这个文件跟comment-plus.js 都不是实现这个功能的核心代码（就是说不用这个文件的，只不过是主题上带的）。还有，文中已经说了“以上代码及gif图片来源于小影的ZiPE主题，特此感谢！”——别扯什么抄不抄。最最后，如果没能力分辨代码及修改代码的能力，请先学好再来喷。没能力的话你直接复制粘贴肯定是不行的。最最最后，不要那么抱怨，不然人家是不愿理你的，本身提问态度都不行，你还想人家给你好脸色？

      10 年前 回复

      • 哈哈，我还没说谁抄谁的呢，就激动成这样!
        1、你自己把内容复制到百度里搜一下，看看是不是一堆重复的内容，而且很多都是没给出js代码；至少这些重复内容不利于网站的发展。我转发的新闻类都加noindex nofollow.
        2、做网站是不是做用户体验?用户体验不好你觉得网站质量能上去吗？提点意见就受不了，说别人态度也调整下自己的心态——要知道互联网是Open的。
        3、我网站代码都是自己改的谢谢。
        4、我是菜鸟，很多新站长可能都是菜鸟，如果别人找来最后发现都用不了，还会来么？我后来找了另一家素材站，都还不错，每用一个，一条好评回复。你自己想。

        10 年前 回复

  3. src=”/js/show-gravatar.js”> 这些JS代码呢?没代码怎么运行

    10 年前 回复

  4. “放在主题目录下的images文件夹”是哪个文件夹下的images文件？就这里不知道怎么弄？

    11 年前 回复
发表评论