WordPress纯代码实现“返回顶部、返回底部、评论”效果

搞了个网站,由于主题没有自带返回顶部按钮,那只能自己动手了,这类的第三方插件非常多,但是我认为能用代码实现的就不要用插件,插件越多拖慢网站速度那是必须的。

在网上找到一种代码方法,非常简单,效果如下,下面就分享一下吧:

效果


1、下载图标图片上传到主题目录下的images文件夹下:点击下载(密码为chyiyang,图片是白色透明的哦~)
2、首先编辑主题目录下的footer.php文件,在 代码之前添加以下的代码:


 

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文件,在 代码之前添加以下的代码(载入all.js):


 

到这里就结束了,都搞好后,ctrl+f5刷新下网站看看效果哦,可能不同的wp主题css样式都不太相同,如果有样式有偏差,就需要微微调整css样式了~

原文标题:WordPress纯代码实现“返回顶部、返回底部、评论”效果
原文地址:http://www.heminjie.com/wordpress/2229.html

赞(0)
未经允许不得转载:伊阳博客 » WordPress纯代码实现“返回顶部、返回底部、评论”效果
所属分类: WordPress

留言 抢沙发

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

表情 关闭

图片