经过一个下午的研究，一个新版的 “ 返回顶部-查看评论-返回底部 ”  诞生，也就是本站现在的效果。

返回顶部-查看评论-返回底部 升级完美版

今天教大家制作一个更简洁、更好用、更清新的 “ 返回顶部-查看评论-返回底部 ” 工具条。

工具条不会随着页面的滚动而滑动，而是一直保持在原有位置，这样能够使读者把更多的注意力集中在文字上。

操作方法：

1、下载 top.png ， 将其放在主题目录的images文件夹下。

top

2、下载 slide.js , 将其放在主题目录的 MRjs 文件夹下，在header.php的合适位置插入：

<script type="text/javascript" src="<?php bloginfo('template_url');?>/MRjs/slide.js"></script>

3、用 Notepad++ 打开主题目录下的 header.php ，找到合适的位置插入如下代码： 

<!-- add back to top button -->
<div id="shangxia" class="shangxia">
    <a id="shang" title="返回顶部" class="shang"></a>
    <?php if (is_single()||is_page()) { ?>
        <?php if ( $post -> comment_count ) { ?>
            <a id="comt" title="查看评论" class="comt"></a>
        <?php } else { ?>
            <a title="沙发还没有被抢哦" href="#respond" class="comt" style="cursor:default;"></a>
        <?php } ?>
    <?php } else { ?>
        <a title="给我留言" href="<?php bloginfo('url');?>/about#ds-replybox" class="comt" style="cursor:default;"></a>
    <?php } ?>

    <?php if (is_single()||is_page()) { ?>
        <a id="xia" title="转到底部，发表评论" class="xia"></a>
    <?php } else { ?>
        <a id="xia" title="转到底部" class="xia"></a>
    <?php } ?>
</div>
<script type="text/javascript" src="<?php bloginfo('template_url');?>/scripts/slide.js"></script>

4、用 Notepad++ 打开主题目录下的 style.css ， 找到合适的位置插入如下代码： 

/*返回顶部、查看评论、转到底部*/
.shangxia{
    position: fixed;
    top: 40%;
    display: block;
    right: 2%;
    width:47px;
    height:106px;
    background-color:#FFF;
    border-radius:5px;
    box-shadow:0 0 2px #6E6E6E;
}
.shangxia a {
    background:url(images/top.png) no-repeat;
    display:block;
    text-indent:999em;
    width:37px;
    margin:5px;
    border:0;
    overflow:hidden;
    float:left;
}
.shangxia .shang{
    background-position:4px 0;
    height:20px
}
.shangxia .shang:hover {
    background-position:-34px 0;
}
.shangxia .comt{
    background-position:4px -20px;
    height:32px;
}
.shangxia .comt:hover{
    background-position:-34px -20px;
}
.shangxia .xia{
    background-position:4px -52px;
    height:22px;
}
.shangxia .xia:hover{
    background-position:-34px -52px;
}
/*返回顶部、查看评论、转到底部*/

5、上传修改的文件。（若在WP后台完成修改，第五步可以忽略）

经过以上5步，工具条就制作完成了，快刷新网页看看效果吧。（本站目前也是这个效果）

功能与亮点

中间的按钮 “查看评论” ， 不仅仅只是查看评论。相关代码如下： 

    <a id="shang" title="返回顶部" class="shang"></a>
    <?php if (is_single()||is_page()) { ?>
        <?php if ( $post -> comment_count ) { ?>
            <a id="comt" title="查看评论" class="comt"></a>
        <?php } else { ?>
            <a title="沙发还没有被抢哦" href="#respond" class="comt" style="cursor:default;"></a>
        <?php } ?>
    <?php } else { ?>
        <a title="给我留言" href="<?php bloginfo('url');?>/about#ds-replybox" class="comt" style="cursor:default;"></a>
    <?php } ?>

通过代码我们可知：

①当你不在 文章页 或者 页面 时，那个“查看评论”按钮的作用是：点击按钮后转到留言板的留言框处。

②当你在 文章页 或者 页面 时，那个“查看评论”按钮的作用是：（1）如果有评论，则跳转到评论列表。 （2）若无评论，则跳转到 评论书写区。

参考推荐：

WordPress代码实现返回顶部按钮

实现”跳转底部”按钮渐隐的js

非插件实现WordPress返回顶部，底部，留言的代码

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