a标签实现返回顶部和跳转至评论框

现在网上都有很多种方法实现返回顶部和跳转至评论框的方法,有简单的也有复杂的,今天我就分享本主题所使用的方法,个人认为是比较简单的。

首先,打开我们所使用的主题中的footer.php文件,在</footer>前面添加以下代码并保存。

<div class="tools">
    <a href="#" class="tools_top" title="返回顶部"></a>
    <?php wp_reset_query(); if ( is_single() || is_page() ) { ?>
        <a href="#respond" class="tools_comments" title="发表评论"></a>
    <?php } else {?>
        <a href="<?php bloginfo('url');?>/zxly#respond" class="tools_comments" title="给我留言"></a>
    <?php } ?>
</div>

第6行代码的意思就是如果不在页面或日志页就跳转到我们留言板的评论框中。

接着,打开我们所使用的主题中的style.css文件,加上以下代码保存即可。

/*返回顶部、查看评论、转到底部*/
.tools{ position:fixed; bottombottom:50px; rightright:20px; z-index:1000}
.tools_comments,
.tools_top{ display:block; height:32px; width:32px; background:url(image/top.gif) no-repeat; background-position:0 -64px;  margin-top:5px;}
.tools_comments:hover{ background-position:0 -96px;}
.tools_top{ background-position:0 0;}
.tools_top:hover{ background-position:0 -32px}

其中,第2行代码就是定位的,如离右边和底部多远,可以自己调整;第4行代码中的background:url(image/top.gif)就是本主题所使用的返回顶部和跳转至评论框的背景图。