回到顶部悬挂猫咪

回到顶部悬挂猫咪是今天我从网上看到觉得很不错,然后就弄到了本站,确实很棒。话不多说,下面分享教程!

美化教程

回到顶部悬挂猫咪只能电脑端显示,需要手机端显示,自己修改CSS代码。

本教程以本站使用的子比主题为例,大部分主题大同小异。

回到顶部悬挂猫咪采用js+css+Jquery,但大多数的WordPress主题都已经使用Jquery,所以无需担心Jquery问题(当然啦,如果主题没有Jquery,那么去百度找Jquery好用的CDN进行调用。)

1、首先,下载回到顶部悬挂猫咪的JS+CSS(在本文章末)。

2、两种方式:

在网站后台—>主题设置—>自定义代码—>自定义头部HTML代码,把下面的代码添加进去;

图片[25]-子比美化教程合集 美化只看这一篇文章就够了!!!-zibll美化交流分享社区-zibll子比主题-Wordpress主题模板-zibll子比主题

如果没有自定义头部HTML代码那么的主题,请在主题目录下header.php末尾添加下面的代码。

图片[26]-子比美化教程合集 美化只看这一篇文章就够了!!!-zibll美化交流分享社区-zibll子比主题-Wordpress主题模板-zibll子比主题

代码:

<!--回到顶部-->
<link rel="stylesheet" type="text/css" href="https://www.cunshao.com/666666/meihua/szgotop.css" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -900px;"></div>
<script type="text/javascript" src="https://www.cunshao.com/666666/meihua/szgotop.js"></script>

注(非常重要):自己把得到CSS、JS文件放在喜欢的目录里面,或者在自己网站根目录下创建新的目录把文件放进去(嘿嘿嘿,实在实在是不会的自己花钱弄),然后在href=”文件路径”和src=”文件路径”填写自己的文件路径。悬挂猫咪是一张图片,还需要在CSS里面修改图片的路径(图片路径在CSS最后面,见下图)。

图片[27]-子比美化教程合集 美化只看这一篇文章就够了!!!-zibll美化交流分享社区-zibll子比主题-Wordpress主题模板-zibll子比主题

3、前两步如果都完成了,那么在网站首页拉到底部就可以看到了悬挂猫咪,那么这时候就会出现“主题自带的回到顶部”和悬挂猫咪,那么需要我们到网站后台—>主题设置里面关闭主题自带的回到顶部,其他主题的主题设置不知道有没有关闭这一项。

子比主题只需在网站后台—>主题设置—>全局&功能—>常用功能—>返回顶部按钮—>关闭电脑端的回到顶部。

图片[28]-子比美化教程合集 美化只看这一篇文章就够了!!!-zibll美化交流分享社区-zibll子比主题-Wordpress主题模板-zibll子比主题

 

图片[29]-子比美化教程合集 美化只看这一篇文章就够了!!!-zibll美化交流分享社区-zibll子比主题-Wordpress主题模板-zibll子比主题
内容看完了
© 版权声明
1:本网站名称:蜡笔傻新
2:本站永久网址:https://labishaxin.com/
3:本站部分内容收集于互联网,如果有侵权内容、请联系我们删除,不妥之处,敬请谅解
4:本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责
5:本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6:本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论