WordPress实现返回顶部和写评论的悬浮按钮

整理  懿古今   2022-10-02 13:19:30 更新  技术文档

很多博客都已经有这种按钮了,一般都是返回顶部、写评论和直达底部三个按钮,不过我还是比较喜欢卢松松博客的那个返回顶部和写评论的按钮效果。刚好搜索到博主枫之羁绊分享的《给 wordpress 博客添加回到顶部和写评论的悬浮按钮》就是卢松松博客的那个按钮效果,所以就直接应用上了。

详细操作步骤如下:

1、新建一个 JS 文件名称为 top.js,将以下代码粘贴进去,然后放入主题文件的 js 文件夹里。

//回顶部+写评论
lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("full").style.top=parseInt(document.getElementById("full").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
if(diffY - 200){document.getElementById("full").style.display = "block"}
else{
document.getElementById("full").style.display = "none"}
}
suspendcode="<div id=\"full\" style='display:none; width:15px; height:57px; POSITION:absolute; left:50%; top:460px; margin-left:213px; z-index:100; text-align:center;'><a href='#'><img src='http://www.fengmr.com/wp-content/themes/fengmr/images/btn_top.gif' /></a><br><br><a href='#comment'><img src='http://www.fengmr.com/wp-content/themes/fengmr/images/btn_comment.gif' /></a></div>"
document.write(suspendcode);
window.setInterval("heartBeat()",1);
function switchImage(imageId, imageUrl, linkId, linkUrl, preview, title, alt) {
if(imageId && imageUrl) {
var image = $(imageId);
image.src = imageUrl;
if(title) {
image.title = title;
}
if(alt) {
image.alt = alt;
}
}
if(linkId && linkUrl) {
var link = $(linkId);
link.href = linkUrl;
}
}

2、在主题的 single.php 和 page.php 文件的最后面添加下面的代码。

<script src="<?php bloginfo('template_url'); ?>/js/top.js"></script>

3、将以下两个图片放入主题的 images 文件夹。

WordPress实现返回顶部和写评论的悬浮按钮 - 第1张 - 懿古今(www.yigujin.cn)

WordPress实现返回顶部和写评论的悬浮按钮 - 第2张 - 懿古今(www.yigujin.cn)

4、调整 top.js 文件内的 CSS,让悬浮按钮出现在你想要的位置。一般只需要调整 top:460px; margin-left:213px;这两个数字就行了。图片地址也换成自己的,当然这些按钮的图片也可以自己设计的,到时候直接更新图片地址就行了。

注意:如果第一步中的 JS 文件名字改变了,第二步中引用的 JS 文件名也要跟着改变。

经本人测试使用,回顶部按钮是有效的,但是写评论却无效。后来我查看自己页面的源文件,发现评论框附近有<a name="comments"></a>,而 top.js 文件写评论的链接却是回到 href='#comment',所以需要把 top.js 文件中的 href='#comment'修改为 href='#comments'才行。我不知道是特例还是什么,大家如果发现点击按钮没有反应,就通过查看源代码检查一下。

文章代码来源于:枫先生《给 wordpress 博客添加回到顶部和写评论的悬浮按钮

本文地址:https://www.yigujin.cn/98.html

你可能感兴趣的文章

文章标签: ,  
版权声明:本文内容来源于互联网资源,发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请发邮件至[email protected],确认后马上更正、删除,谢谢!

发表评论

  1. 中国历史
    中国历史 @回复

    幻杀给我弄了一个返回顶部的,你这个我先收藏了

    • 懿古今
      懿古今2014-12-13 20:08  回复

      @中国历史贵站的返回顶部按钮不错哦,不过少了一个写评论的按钮,个人感觉返回顶部和写评论一般都是成双成对出现的

  2. 淡忘~浅思
    淡忘~浅思 @回复

    赞一个

  3. 我爱动感单车网
    我爱动感单车网 @回复

    这个是相当酷炫并且实用的效果!