最新消息:蔓草札记的微信公众号开通了,赶紧在微信通讯录公众号中搜索“蔓草札记”关注下吧 :)

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

博客经验 xhhjin 6498浏览 10评论

提供两种方法,建议采用第二种。

第一种方法:

(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”这样的写法,你可以根据自己的情况加以修改。

73A87E1A133C6788788065A4ADF9B5A4_220_112


欢迎转载,转载请注明出处:蔓草札记 » 非插件实现WordPress返回顶部,底部,留言的代码

♥ 喜欢 0 赞赏
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (10)

  1. 怎么我只能上不能下呢?这个代码有问题么??
    chhayu5年前 (2012-06-18)回复
  2. 向下功能和评论没有用啊?
    chhayu5年前 (2012-06-19)回复
    • @chhayu 这段代码没有问题的,我现在采用的就是,刚去你的博客好像没见到加这个东西了。另外,你也可以试下加入的位置看看。
      xhhjin博主5年前 (2012-06-24)回复
      • @xhhjin 唔,为什么我向下的那个没有用?
        舌甘舌甘4年前 (2012-08-03)回复
        • @舌甘舌甘 应该不会的,去你网站看了下,只留下了向上和留言的哦。
          xhhjin博主4年前 (2012-08-03)回复
  3. 之前用插件的,感觉会卡,还是代码的好。 :oops:
    zzy4年前 (2012-07-05)回复
    • @zzy 插件就是图个方便,能用代码还是用代码的好,也不会造成插件冲突。 :roll:
      xhhjin博主4年前 (2012-07-05)回复
  4. 不知道怎么设置不出来!
    xy2年前 (2014-09-11)回复
    • @xy 看你博客好像只有首页有用啊。
      xhhjin博主2年前 (2014-09-12)回复