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

12,433
WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式一)
  • 4.60 / 5 5
4.60分(5票)

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

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

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

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

教程进入ing

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

1
2
3
4
5
6
7
8
<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文件,添加如下的代码:

1
2
3
4
5
6
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请求数。

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

喵~本文目前有9条留言,欢迎发表评论!

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

    [回复]
  2. 连找好几家都是这样,连代码都不给出,看来都只是抄来抄去。。。

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

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

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

    [回复]
  4. 传说中的沙发
    :

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

    [回复]

打破沉默,我来发表评论鸟~