WordPress添加返回顶部的功能(纯代码和插件两种方法)

方法一:下载插件To Top

1、点击菜单插件->安装插件

2、搜索插件并安装。如下图,我使用的是To Top这一款。当然其他类似的插件也可以

3、安装后,点击启用即可。

方法二:纯代码添加

效果如下:

WordPress添加返回顶部的功能(纯代码和插件两种方法)

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

2、首先编辑主题目录下的footer.php文件,在 代码之前添加以下的代码:

<div id =“ sticky-nav”> <a class =“ gotop” onclick =“ window.scrollTo(0,0); return false;” href =“#top”>
<span>返回顶部</span></a>
<a class="about" href="https://vdir.cn/" target="_blank" rel="noopener noreferrer">
<span>关于我们</span></a>
<?php if(is_singular()&& comments_open()){?>
<a class =“ gocom” onclick =“ document.getElementById('comment')。focus();返回false;” href =“#respond”>
<span>发表<a class="tagcss" href="https://vdir.cn/" title="【查看含有[评论]标签的文章】" target="_blank">评论</a></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);返回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;
位置:固定
正确:0px;
底部:5%;
z索引:9999;
宽度:30px;
_position:绝对
_top:表达式(eval(document.documentElement.scrollTop + document.documentElement.clientHeight / 2-this.offsetHeight / 2))
}
#sticky-nav a:hover {
右:56px;
}
#sticky-nav a {
background:url(images / sideTools.png)不重复;
宽度:30px;
高度:30px;
显示:块;
-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;
位置:相对;
文字修饰:无;
}
#sticky-nav span {
背景:#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;
位置:绝对;
右:-56px;
填充:6.5px 4px;
颜色:#fff;
}
#sticky-nav a:hover {
溢出:可见
}
#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);
转换:转换(0,0);
不透明度:1;
-ms-filter:“ progid:DXImageTransform.Microsoft.Alpha(Opacity = 100)”;
过滤器:alpha(不透明度= 100)
}
#sticky-nav span:之前,
#sticky-nav span:之后{
内容:'';
显示:块;
宽度:0;
高度:0;
}
#sticky-nav span:before {
border-left-color:#ccc;
右:-8px
}
#sticky-nav a.gotop {
背景位置:-3px -3px;
背景颜色:#333;
底边距:5px;
}
#sticky-nav a.gobtm {
背景位置:-4px -186px;
背景颜色:#333;
}
#sticky-nav a.gocom {
背景位置:-4px -150px;
背景颜色:#333;
底边距:5px;
}
#sticky-nav a.bianlan {
背景位置:-3px -77px;
背景颜色:#333;
底边距:5px;
}
.close-sidebar {
cursor:pointer;
}
.show-sidebar {
cursor:pointer;
}
#sticky-nav a.about {
背景位置:-3px -40px;
背景颜色:#333;
底边距:5px;
}

上面第一部分代码中定义了5个按钮,返回顶部、关于我们、评论、隐藏/显示侧边栏、返回顶部,如果不想要“隐藏/显示侧边栏”按钮,可直接删除第一部分中的下面一段代码:

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

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

<a class="about" class="external" rel="nofollow" target="_blank" href="https://vdir.cn/go/?url=aHR0cDovL3d3dy5oZW1pbmppZS5jb20v" target="_blank" rel="noopener noreferrer">
<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文件,在 代码之前添加以下的代码(载入all.js):

<script type =“ text / javascript” src =“ <?php%20bloginfo('template_directory');%20?> / js / all.js”> </ script>

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

版权声明:gary0806 发表于 2020-07-13 11:20:18。
转载请注明:WordPress添加返回顶部的功能(纯代码和插件两种方法) | 微目录