提供两种方法,建议采用第二种。
第一种方法:
(1)加载jQuery库,将slide.js(点击下载)放入当前使用主题的js目录,将slide.gif (点击下载) 放入images目录下;
(2)将以下代码加入到当前主题footer.php中:
<div id="shangxia"> <div id="shang" title="<?php _e('Top','YLife'); ?>"></div> <?php if (is_singular()) { ?><div id="comt" title="<?php _e('Comment','YLife'); ?>"></div><?php } ?> <div id="xia" title="<?php _e('Bottom','YLife'); ?>"></div> </div> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slide.js"></script>
(3)在style.css文件中加入以下代码:
#shangxia{position:absolute;top:40%;left:50%;margin-left:-535px;display:block;} #shang{background:url(images/slide.gif) no-repeat;position:relative;cursor:pointer; height:42px;width:32px;margin:10px 0;} #comt{background:url(images/slide.gif) no-repeat center -45px;position:relative; cursor:pointer;height:32px;width:32px;margin:10px 0;} #xia{background:url(images/slide.gif) no-repeat center -78px;position:relative; cursor:pointer;height:42px;width:32px;margin:10px 0;}
在使用该方法的过程中发现了一个小问题,就是当一篇文章有评论时,点击留言的代码是有用的,如果文章本身没有评论,则点击后没有反应,感觉不太好,凑合着用了。偶然的,在2012年9月25日网上浏览时发现了另一个方法,就是本文的第二种方法了,稍作修改(原文地址:WordPress代码实现:返回顶部、底部、查看评论)。
第二种方法:
(1)下载 slide.js (点击下载), 将其放在主题目录的 js 文件夹下,下载 top.png (点击下载)和, 将其放在主题目录的images文件夹下;
(2)打开主题目录下的header.php ,找到合适的位置分别插入以下两段代码:
Js的:
<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/slide.js"></script>
Php的:
<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-page#respond" 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>
(3)打开主题目录下的 style.css , 插入如下代码:
/*返回顶部、查看评论、转到底部*/ .shangxia{ position: fixed; top: 40%; display: block; right: 2%; width:47px; height:106px; background-color:#777; 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; } /*返回顶部、查看评论、转到底部*/
(4)完成,去看看效果吧,如果没有看到效果,可试试清空Wordpress缓存插件下的缓存(如果装了的话)和浏览器缓存。
提示:其中的“查看评论”按钮在博客首页上是直接连接到留言板的留言框处的,我用的“关于”页面,所以在Php代码的第十行处有“/about-page#respond”这样的写法,你可以根据自己的情况加以修改。
欢迎转载,转载请注明出处:蔓草札记 » 非插件实现WordPress返回顶部,底部,留言的代码