今天给大家分享下添加返回顶部/底部的WordPress教程,其实也不难,主要是用到html、css和一些jq代码。

效果图如下图所示:

我们开始教程:

首先我们把下面的html代码添加到WordPress主题footer.php文件的</body>上面:

<div class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”gotop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>

<a id=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”top\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”><i class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”iconfont icon-arrow-up\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”></i></a>

<a href=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”https://www.wpzt.net/<?php echo $gotop[\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’qq_url\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’]?>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” rel=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”external nofollow\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” rel=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’nofollow\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”uk-display-block b-b\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”><i class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”iconfont icon-qq\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”></i></a>

<a class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”wechat\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”><i class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”iconfont icon-wechat\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”></i></a>

<a href=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”https://www.baidu.com/baidu?word=wptoo%E6%95%99%E7%A8%8B%E7%BD%91\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” rel=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”external nofollow\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” rel=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’nofollow\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’><i class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”iconfont icon-resonserate-fill\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”></i></a>

<a id=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”footer\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”><i class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”iconfont icon-arrow-down\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”></i></a>

</div>

<div class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”gotop-pop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>

<div class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”gotop-pop-main\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>

<div class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”gotop-pop-box uk-overflow-hidden\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>

<h3>微信</h3>

<i class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”iconfont icon-icon-test25 gotop-pop-box-close\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”></i>

<img src=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”https://wtoo.cxcat.com/wp-content/uploads/2020/02/2020020408254925.jpg\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” />

</div>

</div>

</div>

可以看到在右侧按钮上面是有Icon图标的,所以我们还需要加载一个Icon图标,把下面的一行代码添加到header.php的</head>标签上面,加载Icon样式。

<link rel=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”stylesheet\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” href=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”https://at.alicdn.com/t/font_1557485_rig7wtgjqd.css\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” rel=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”external nofollow\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” />复制

Icon图标

如果你的博客有Icon图标样式,可以不用添加上面的代码,用自己的图标

然后我们添加js代码,将下面代码添加到footer.php文件的</body>上面:

<script>

$(window).scroll(function() {

var scroll_top = $(window).scrollTop();

if(scroll_top >= 200) {

$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”.gotop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).fadeIn();

} else {

$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”.gotop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).fadeOut();

}

});

$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”#top\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).click(function() {

$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”html,body\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).finish().animate({

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”scrollTop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”: $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”.top\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).offset().top

}, 500);

});

$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”#footer\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).click(function() {

$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”html,body\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).finish().animate({

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”scrollTop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”: $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”.bottom\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).offset().top

}, 500);

});

$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’.wechat\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’).click(function() {

$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’.gotop-pop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’).toggle();

});

$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’.gotop-pop-box-close\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’).click(function() {

$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’.gotop-pop\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’).hide()

});

</script>

以上代码依赖jquery,请确保你的博客已经加载jquery文件。

最后就是css样式了, 将下面代码添加到header.php文件的</head>上面,也可以添加到主题的样式文件内,一般是style.css这个文件。(为了方便二次修改,css样式代码没有压缩,代码比较长,可以直接点击复制)

/*

* ——————————————————————————

* 返回顶部样式

* ——————————————————————————

*/

.gotop {

position: fixed;

bottom: 0;

right: 0;

margin: 30px;

display: none;

overflow: hidden;

border-radius: 4px;

border: 1px solid #eee;

}

.gotop a {

display: block;

padding: 10px 13px;

background-color: #fff;

transition: all .3s ease;

color: #888;

background: #fff;

border-bottom: 1px solid #eee;

text-decoration: none;

cursor: pointer;

}

.gotop a:hover {

color: #fff;

background: #2c63ff;

box-shadow: -3px 2px 10px -2px #2c63ff;

transform: translateY(-3px);

border: 0

}

.gotop a:last-child {

border: 0

}

.gotop i {

font-size: 18px

}

.gotop-pop {

position: fixed;

width: 100%;

height: 100%;

background: #00000030;

display: none;

top: 0;

transition: all .3s;

}

.gotop-pop-main {

position: relative;

max-width: 600px;

margin: 10% auto;

padding: 15px;

animation: fadeinB .6s infinite;

-moz-animation: fadeinB .6s infinite;

/* Firefox */

-webkit-animation: fadeinB .6s infinite;

/* Safari and Chrome */

-o-animation: fadeinB 1s infinite;

/* Opera */

animation-iteration-count: 1;

-webkit-animation-iteration-count: 1;

/* Safari 和 Chrome */

}

.gotop-pop-box {

background: #fff;

padding: 20px;

text-align: center;

}

.gotop-pop-box h3 {

text-align: center;

}

.gotop-pop-box-close {

position: absolute;

right: 0;

top: 0;

font-size: 24px;

color: #aaa;

}

@keyframes fadeinB {

0% {

transform: translateY(20px);

opacity: 0;

filter: Alpha(opacity=0);

}

100% {

transform: translateY(0px);

opacity: 1;

filter: Alpha(opacity=1);

}

}

.fadeinB {

animation: fadeinB .6s infinite;

-moz-animation: fadeinB .6s infinite;

/* Firefox */

-webkit-animation: fadeinB .6s infinite;

/* Safari and Chrome */

-o-animation: fadeinB 1s infinite;

/* Opera */

animation-iteration-count: 1;

-webkit-animation-iteration-count: 1;

/* Safari 和 Chrome */

}

WordPress教程到此就结束了,完成以上步骤后,去网站前端看看效果吧。

相关新闻

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

151-1101-0018

在线咨询:
邮件:30115776@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
关注微信
分享本页
返回顶部