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

2014-08-13 20:55 ⁄ WP相关 ⁄ 共 3141字 ⁄ 字号小中大 ⁄ 暂无评论

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

一、首先打开主题目录下的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() &#038;& comments_open() ) { ?-->
<a class="gocom" onclick="document.getElementById('comment').focus();return false;" href="#respond">
<span>发表评论</span></a> <!--?php if ( !is_user_logged_in() ) : ?-->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/show-gravatar.js"></script>
 <!--?php endif; ?-->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/comment-plus.js"></script>
<!--?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%}