wordpress免插件仅代码实现“返回顶部““返回底部”“评论”效果

本文已经作废,更新文见:http://devework.com/wordpress-top-bottom-comment.html

最近Jeff在修改你如今看到的主题,老外的主题就是跟国内的“主流”主题样式不一样,比如说没有上一篇、下一篇提示,也没有国人制作的主题的返回顶部““返回底部”“评论”效果(就是你看看贴在右边的黑色的小框)。Jeff上网搜索资料,又摸索了一番,直接在之前使用的主题上获得了这个效果,不用插件,仅仅几段代码加一个gif图片。

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

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

 

二、再打开主题目录下的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%}

最后保存刷新即可,效果见这里的右边。