相信大家对返回顶部、返回底部这些功能已经不陌生了,wordpress上也有很多插件可以实现,也有很多代码方式;
今天我分享的也是以纯代码实现"返回顶部、返回底部、评论"的效果,但是样式跟其他人的可能不同,个人认为比较美观实用一些,可以在其中增加一些超链接或者“关闭/显示侧边栏”按钮,效果图如下:
## 默认是以图标的方式贴在右下角边栏,鼠标滑过弹出文字说明,单击执行效果。
添加方法(三步实现):
1、下载图标图片上传到主题目录下的images文件夹下:点此下载(图片是白色透明的哦~)
2、首先编辑主题目录下的footer.php文件,在 </body></html>代码之前添加以下的代码(复制代码的时候不要复制前面的行号哦~):
3、再编辑主题目录下的style.css文件,在最后面添加如下的代码,给其增加样式:
#sticky-nav {
-webkit-border-radius:3px 0 0 3px;
-moz-border-radius:3px 0 0 3px;
border-radius:3px 0 0 3px;
position:fixed;
right:0px;
bottom: 5%;
z-index: 9999;
width:30px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2-this.offsetHeight/2))
}
#sticky-nav a:hover {
right:56px;
}
#sticky-nav a {
background:url(images/sideTools.png) no-repeat;
width:30px;
height:30px;
display:block;
-webkit-border-top-left-radius:3px;
-moz-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-bottom-left-radius:3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
position:relative;
text-decoration:none;
}
#sticky-nav span {
background:#333;
-webkit-border-top-right-radius:3px;
-moz-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
-moz-border-bottom-right-radius:3px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;
font-size:12px;
position:absolute;
right: -56px;
padding:6.5px 4px;
color:#fff;
}
#sticky-nav a:hover {
overflow:visible
}
#sticky-nav a:hover span {
-webkit-transform:translate(0,0);
-moz-transform:translate(0,0);
-ms-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0);
opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity =100)";
filter:alpha(opacity=100)
}
#sticky-nav span:before,
#sticky-nav span:after {
content:'';
display:block;
width:0;
height:0;
}
#sticky-nav span:before {
border-left-color:#ccc;
right:-8px
}
#sticky-nav a.gotop {
background-position: -3px -3px;
background-color: #333;
margin-bottom: 5px;
}
#sticky-nav a.gobtm {
background-position: -4px -186px;
background-color: #333;
}
#sticky-nav a.gocom {
background-position: -4px -150px;
background-color: #333;
margin-bottom: 5px;
}
#sticky-nav a.bianlan {
background-position: -3px -77px;
background-color: #333;
margin-bottom: 5px;
}
.close-sidebar {
cursor:pointer;
}
.show-sidebar {
cursor:pointer;
}
#sticky-nav a.about {
background-position: -3px -40px;
background-color: #333;
margin-bottom: 5px;
}
## 上面第一部分代码中定义了5个按钮,返回顶部、关于我们、评论、隐藏/显示侧边栏、返回顶部,如果不想要“隐藏/显示侧边栏”按钮,可直接删除第一部分中的下面一段代码:
如果不需要“关于我们”可删除下面代码:
关于我们
且不需要往下看教程了,刷新页面,已经有效果了吧~
增加“关闭/显示侧边栏”按钮的js控制文件:
1、请复制以下代码另存为all.js,上传到网站FTP中:
注意:下面js代码中那个宽度两个width值需要相应修改,1280px是整个网站的宽度,900px是文章主体的宽度。
jQuery(document).ready(function($){
$('.close-sidebar').click(function() { //点击class=“close-sidebar”的对象,即导航中“关闭侧边栏”时
$('.close-sidebar,.sidebar').hide(); //隐藏class=“close-sidebar”和“sidebar”的对象,即导航中“关闭侧边栏”和主题的“侧边栏”
$('.show-sidebar').show(); //显示class=“show-sidebar”的对象,即导航中“显示侧边栏”
$('.content').animate({width: "1280px"}, 0); }); //“文章主体部分”的宽度增加到1280px
$('.show-sidebar').click(function() { //点击导航中“显示侧边栏”时
$('.show-sidebar').hide(); //隐藏导航中“显示侧边栏”
$('.close-sidebar,.sidebar').show(); //显示导航中“关闭侧边栏”和主题的“侧边栏”
$('.content').animate({width: "900px"}, 0);}); //“文章主体部分”的宽度收缩回900px
});
2、编辑主题目录下的footer.php文件,在 </body></html>代码之前添加以下的代码(载入all.js):
## 上面代码中的src路径修改为刚才你上传all.js到FTP中的路径。
到这里教程就结束了,都搞好后,ctrl+f5刷新下网站看看效果哦,可能不同的wp主题css样式都不太相同,如果有样式有偏差,就需要微微调整css样式了~
原文链接:WordPress纯代码实现“返回顶部、返回底部、评论”效果,转载请注明来源!
好了
肯定还是哪里做的有问题。
显示不了.全做好了.结果没有效果.伤心了
谢谢博主,介绍的很详细,收藏了以后可能会换
非常感谢!
这个功能是我一直想要的,试试看自己能不能做出这个效果哈哈