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

本站资源均为站长亲测,真实有效,本站不发表未经验证的资源,请放心参与体验

相信大家对返回顶部、返回底部这些功能已经不陌生了,wordpress上也有很多插件可以实现,也有很多代码方式;

今天我分享的也是以纯代码实现”返回顶部、返回底部、评论”的效果,但是样式跟其他人的可能不同,个人认为比较美观实用一些,可以在其中增加一些超链接或者“关闭/显示侧边栏”按钮,效果图如下:

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

## 默认是以图标的方式贴在右下角边栏,鼠标滑过弹出文字说明,单击执行效果。

添加方法(三步实现):

1、下载图标图片上传到主题目录下的images文件夹下:点击此处下载(图片是白色透明的哦~)

2、首先编辑主题目录下的footer.php文件,在 </body></html>代码之前添加以下的代码(复制代码的时候不要复制前面的行号哦~):

<div id="sticky-nav"><a class="gotop" onclick="window.scrollTo(0,0);return false;" href="#top">
<span>返回顶部</span></a> 
<a class="about" href="https://www.53431.com/" target="_blank">
<span>关于我们</span></a> 
<?php if ( is_singular() && comments_open() ) { ?>
<a class="gocom" onclick="document.getElementById('comment').focus();return false;" href="#respond">
<span>发表评论</span></a>
<?php } ?>
<a class="bianlan" <span><span class="close-sidebar">隐藏侧边</span></span>
<span class="show-sidebar" style="display:none;">显示侧边</span></a>
<a class="gobtm" onclick="window.scrollTo(0,document.body.scrollHeight);return false;" href="#colophon">
<span>前往底部</span></a></div>

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个按钮,返回顶部、关于我们、评论、隐藏/显示侧边栏、返回顶部,如果不想要“隐藏/显示侧边栏”按钮,可直接删除第一部分中的下面一段代码:

<a class="bianlan" <span><span class="close-sidebar">隐藏侧边</span></span>
<span class="show-sidebar" style="display:none;">显示侧边</span></a>

如果不需要“关于我们”可删除下面代码:

<a class="about" href="https://www.53431.com/" target="_blank"> <span>关于我们</span></a>

且不需要往下看教程了,刷新页面,已经有效果了吧~

增加“关闭/显示侧边栏”按钮的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):

<script src="https://www.53431.com/js/all.js"></script>

## 上面代码中的src路径修改为刚才你上传all.js到FTP中的路径。

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

这篇文章如果帮到了你 打赏
分享到: 更多 (0)
1
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
  • WordPress网站底部增加蒲公英动态特效教程
    这个特效曾经我也用过很长一段时间,还是比较不错的,喜欢折腾的朋友可以使用一下,下面说一下方法 如果你实在不想折腾直接粘贴一下代码到你的底部文件中吧,注意代码中“图片地址”四个大字哦,将文中图片传到你的服务器中获取图片地址即可 <!--...
  • WordPress自定义后台登录页面的方法
    一成不变的wordpress后台登录界面早已看腻了也用腻了,这篇文章教你改变一下这一成不变的后台登录界面 教程所需的代码已经打包在下面,点击下载就可以了,贴出部分代码: //开始 //登录页面 function custom_login()...
  • 为WordPress添加百度分享按钮侧边悬浮固定效果
    如上图所示,百度分享默认固定在页面左侧边,不管页面向下或者向上滚动,百度分享按钮都会固定悬浮显示; 好了,下面就介绍一下方法吧,其实很简单,在原百度分享代码上添加一段css即可。 1、首先在wordpress后台编辑footer.php文件...
  • WordPress给文章添加百度是否已收录展示和查询功能
    1、编辑主题目录的functions.php文件,在最后一个?>标签前新添如下代码并保存(如没有?>标签,则直接加到最后面): //百度收录展示 function baidu_check($url){ global $wpdb;...
  • 如何彻底移除并关闭WordPress的RSS feed
    WordPress默认开启了feed功能,好处不言而喻,可以方便RSS阅读器进行订阅,让读者及时收到博客的更新信息。但有些博客基本没有人订阅,却有一堆机器人来采集博客的feed,方便了别人复制你的文章不说,还造成了不必要的资源消耗。 阻止采...
  • WordPress 自定义文章类型(Post Type)
    什么是 Post Type ? WordPress 里面内置了两种常用的 Post Type :Post(文章)、Page(页面),分别用来展示两种类型的内容,一种是相对动态的文章,另一种是相对固定的页面。 除此之外,WordPress 还...
  • WordPress在文章列表插入一篇广告跳转文章或在任意位置插入广告代码
    这个Wordpress技巧可以让你在文章列表中的任意位置插入一篇或多篇广告跳转文章,完美的与主题结构融合,与主题列表的展现形式一模一样,不用去额外的改变任何结构!而且可以一键无痕的将发布的任何文章变成广告跳转文章! 实现过程非常简单,利用了...
  • 检测自己的WordPress主机是否支持mail邮件功能
    在自己搭建环境或者租用虚拟主机安装wordpress后,经常有人会遇到这样的问题: 为什么在后台注册,WordPress没有给用户发送注册信息的Email? 为什么我已经安装了相关插件,但是WordPress没有给评论者发送新评论通知? 通...
  • 非插件实现WordPress彩色背景标签云
    WordPrss是用wp_tag_cloud函数来调用文章标签的显示边栏小工具标签云列表,默认标签是有自带颜色的,网上也有很多教程改变每个自带标签的颜色。 那如何来给标签加上不同背景色?而不只是改变标签本身的颜色,效果如下图(或看我网站的标...
  • WordPress升级/安装主题插件提示权限不足 输入FTP解决办法
    某些主机或VPS上WordPress更新,或者升级插件或者主题时会提示一个输入FTP信息的页面,然而有时候你明明输入是正确的信息,它还是提示不正确或者再再次的提示输入FTP信息。 解决方案: 方法1:在你的wp-config.php中插入:...
  • WordPress 给最新文章和置顶文章添加new和top图标
    wordpress发布文章一般类型是置顶或者在默认正常。如果在置顶文章或者是24小时内最新发布的文章标题加上相应的图标,不仅可以增加美观,也可以提高用户浏览网站的点击率。网上有各种漂亮的图标大家可以自己去搜一下。然后上传网站替换下面代码的图...
  • WordPress评论神器:一键自动填写名称和邮箱等留言表单
    在不同的WordPress博客间穿梭时,填写评论框信息是一件很麻烦的事有木有。每次都要手动填写名称、邮箱、网址信息,太折磨人了。 于是乎就有了这个神器,以后在评论之前使用它就能自动填写相关信息。这个可以大大节省时间,少做无用功。 其实就是在...

评论 抢沙发



觉得文章有用就赞赏支持一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏