wordpress教程-子比主题网站底部美化添加多功能导航

12117210

更新功能：

  • 加入了本篇文字的点赞、分享数量
  • 加入了一个简单的打赏功能
  • 修改了几个iconfont图标

效果图

子比主题博客网站底部添加多功能导航【更新】-1

在functions.php加上下面这段代码

图片是站长放在自己腾讯云里的，这里我就删除了，请自行添加自己的图片(//弹窗提醒)

  此处内容已隐藏，请评论后刷新页面查看.

引入阿里巴巴矢量库的图标，也可以自行修改

因为前面搞错东西了，后面查了下才发现问题，把下面的js跟css引入到你的网站即可

<!--阿里图标库--> 
<script src="https://at.alicdn.com/t/font_2827587_k24if0ucns.js"></script>
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2827587_k24if0ucns.css">
<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>

在footer.php里加上下面这段代码，自行修改

  此处内容已隐藏，请评论后刷新页面查看.

CSS代码

这段css其实是文字的抖动跟适应手机屏幕隐藏底部导航栏(可用可不用，不过@media这段建议保留)

/* start */
 .my-face {
    animation: my-face 5s infinite ease-in-out;
    color: #00f1ff;
    display: inline-block;
    margin: 0 5px;
}
@-webkit-keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
@keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
/* end */
/*底部导航*/
@media (max-width: 800px){.footwaveline{display: none;}}

JS代码

这段js代码是用来触发滚动条显示百分比的

  <!--滚动进度条百分比-->
$(function(){var $this=$("#footgundong");var scrollTimer;$this.hover(function(){clearInterval(scrollTimer)},function(){scrollTimer=setInterval(function(){scrollNews($this)},2000)}).trigger("mouseleave");function scrollNews(obj){var $self=obj.find("ul");var lineHeight=$self.find("li:first").height();$self.animate({"marginTop":-lineHeight+"px"},500,function(){$self.css({marginTop:0}).find("li:first").appendTo($self)})}})
window.onscroll = function() {
  let scrollNow = window.pageYOffset;
  let pageClientHeight = document.documentElement.clientHeight;
  let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - pageClientHeight;
  let fullWindowHeightInPercentage = Math.round((scrollNow / scrollHeight) * 100);
  let percentage = document.getElementById('percentage');
  percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg> ' + fullWindowHeightInPercentage + '%';
  if (fullWindowHeightInPercentage == 0) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg> 到顶啦';
  if (fullWindowHeightInPercentage == 100) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiasu1"></use></svg> 到底啦';
}
</script>

更新

元旦子比主题更新到了6.1版本，分享按钮代码发生了变动，这里我们也做一下修改：

<a class="share-btn poster" poster-share="<?php the_ID();?>" title="海报分享" href="javascript:;">
    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg>分享
</a>

把这段A标签代码将原先的代码覆盖就完成了

👋 感谢您的观看，对您有用就分享出去吧 ！

如您有好的资源/素材，可参与创作者激励计划享投稿分成。分成介绍
投稿成功收录，即可获得 1-10元/篇奖励。（重复内容无奖励）
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！
© 版权声明
1 如果您喜欢本站,点击这儿赞助下本站，感谢支持！
2 可能会帮助到你： 下载帮助 | 报毒说明 | 进站必看 | 广告合作；
3 本站内容观点不代表本站立场，并不代表本站赞同其观点和对其真实性负责；
4 本站所有内容均来源于网络，仅供学习与参考，请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负；
5 若作商业用途，请联系原作者授权，若本站侵犯了您的权益请 联系站长 进行删除处理；
6 如若转载，请注明文章出处：
THE END
子比主题美化代码插件
# 子比主题美化# 子比主题# 多功能导航
文章不错？点个赞呗
点赞10赞赏 分享
LR.程先生的头像-懒人Blog(资源素材网)
9个免费好用的AI音乐生成器+智能谱曲+作词和歌声合成-懒人Blog(资源素材网)
9个免费好用的AI音乐生成器+智能谱曲+作词和歌声合成
9个免费好用的AI音乐生成器+智能谱曲+作词和歌声合成
9个月前 5162
图集岛网站破解vip看图脚本-超高清套图免费看无限制-懒人Blog(资源素材网)
图集岛网站破解vip看图脚本-超高清套图免费看无限制
图集岛网站破解vip看图脚本-超高清套图免费看无限制
10个月前 2574
伪装上架-两款iOS影视追剧软件！赶紧下载安装-懒人Blog(资源素材网)
伪装上架-两款iOS影视追剧软件！赶紧下载安装
伪装上架-两款iOS影视追剧软件！赶紧下载安装
10个月前 2271
仿IOS软件安装介绍-APP下载页源码-懒人Blog(资源素材网)
仿IOS软件安装介绍-APP下载页源码
仿IOS软件安装介绍-APP下载页源码
10个月前 1746
微信自定义图文卡片链接防红链接跳转消息微信卡片生成源码工具-懒人Blog(资源素材网)
微信自定义图文卡片链接防红链接跳转消息微信卡片生成源码工具
微信自定义图文卡片链接防红链接跳转消息微信卡片生成源码工具
2年前 1678
阿里妈妈方圆体-简体中文双轴可变商用字体免费下载-懒人Blog(资源素材网)
阿里妈妈方圆体-简体中文双轴可变商用字体免费下载
阿里妈妈方圆体-简体中文双轴可变商用字体免费下载
10个月前 1543
相关推荐
图集岛网站破解vip看图脚本-超高清套图免费看无限制-懒人Blog(资源素材网)
图集岛网站破解vip看图脚本-超高清套图免费看无限制
图集岛网站破解vip看图脚本-超高清套图免费看无限制
10个月前 2574
鼠标移动到文章标题变色彩色样式[子比主题美化教程]-懒人Blog(资源素材网)
鼠标移动到文章标题变色彩色样式[子比主题美化教程]
鼠标移动到文章标题变色彩色样式[子比主题美化教程]
11个月前 1309
wordpress教程-子比主题网站底部美化添加多功能导航-懒人Blog(资源素材网)
wordpress教程-子比主题网站底部美化添加多功能导航
wordpress教程-子比主题网站底部美化添加多功能导航
2年前 1172
子比主题教程-添加全网聚合热搜今日热榜页面源码-懒人Blog(资源素材网)
子比主题教程-添加全网聚合热搜今日热榜页面源码
子比主题教程-添加全网聚合热搜今日热榜页面源码
9个月前 1131
wordpress教程-子比主题网站右键菜单内容自定义美化-懒人Blog(资源素材网)
wordpress教程-子比主题网站右键菜单内容自定义美化
wordpress教程-子比主题网站右键菜单内容自定义美化
2年前 1084
首页文章特色图片鼠标悬停&文章列表上浮效果-懒人Blog(资源素材网)
首页文章特色图片鼠标悬停&文章列表上浮效果
首页文章特色图片鼠标悬停&文章列表上浮效果
10个月前 1075
评论 共12条

请登录后发表评论

    只看作者
    • stalker的头像-懒人Blog(资源素材网)stalker等级-潜水-懒人Blog(资源素材网)0
      我要是有这才华，我走路都得横着走！
      1个月前浙江
    • psqq2008的头像-懒人Blog(资源素材网)psqq2008等级-潜水-懒人Blog(资源素材网)0
      难怪刚刚在天上没看见你呢，原来是下凡了
      1个月前重庆
    • xiaoze的头像-懒人Blog(资源素材网)xiaoze等级-潜水-懒人Blog(资源素材网)0
      我今天会很忙，忙着夸夸你
      2个月前黑龙江
    • clqhk2994678的头像-懒人Blog(资源素材网)clqhk2994678徽章-初出茅庐-懒人Blog(资源素材网)等级-潜水-懒人Blog(资源素材网)0
      就你这样的文章…等着上排行榜吧！
      3个月前广西壮族自治区
随机看看好帖需要善于发现
我也要发帖

热门圈子总有聊不完的话题
发现更多圈子
用户封面
LR.程先生的头像-懒人Blog(资源素材网)
懒人Blog(资源素材网)-汇集创意十足的素材资源站
懒人Blog(资源素材网)-汇集创意十足的素材资源站
9个免费好用的AI音乐生成器+智能谱曲+作词和歌声合成-懒人Blog(资源素材网)
5162人已阅读
9个免费好用的AI音乐生成器+智能谱曲+作词和歌声合成
TOP1
图集岛网站破解vip看图脚本-超高清套图免费看无限制-懒人Blog(资源素材网)
图集岛网站破解vip看图脚本-超高清套图免费看无限制
10个月前2574人已阅读
TOP2
伪装上架-两款iOS影视追剧软件！赶紧下载安装-懒人Blog(资源素材网)
伪装上架-两款iOS影视追剧软件！赶紧下载安装
10个月前2271人已阅读
TOP3
仿IOS软件安装介绍-APP下载页源码-懒人Blog(资源素材网)
仿IOS软件安装介绍-APP下载页源码
10个月前1746人已阅读
TOP4
微信自定义图文卡片链接防红链接跳转消息微信卡片生成源码工具-懒人Blog(资源素材网)
微信自定义图文卡片链接防红链接跳转消息微信卡片生成源码工具
2年前1678人已阅读
TOP5
阿里妈妈方圆体-简体中文双轴可变商用字体免费下载-懒人Blog(资源素材网)
阿里妈妈方圆体-简体中文双轴可变商用字体免费下载
10个月前1543人已阅读
TOP6

19个免费好用的AI音乐生成器+智能谱曲+作词和歌声合成

2图集岛网站破解vip看图脚本-超高清套图免费看无限制

3伪装上架-两款iOS影视追剧软件！赶紧下载安装

4仿IOS软件安装介绍-APP下载页源码

5微信自定义图文卡片链接防红链接跳转消息微信卡片生成源码工具

6阿里妈妈方圆体-简体中文双轴可变商用字体免费下载

73000万+摄影爱好者在用的泼辣修图专用版软件+视频教程[永久会员]

8国内桌面PC端ChatGPT4.0中文在线win/Mac版-Ai绘画论文智能对话办公[下载即用]

1强烈推荐！一站式生活缴费、会员影视权益自助平台，人人适用！

2【剪辑党福音】最新253+392套万能剪映模板合集+预览文件+源文件合集+使用教程【16.4G】直接套用

3最好用的抖音作品采集工具:唯一可用的版本

4PhotoShop又一款全能AI画图插件StartAI，图生图文生图超分扩图局部重绘智能消除样样精通

5声母韵母基础练声技巧-绕口令-发声练习（pdf文件）

6奶茶店运营大全-活动方案,营销案例,饮品教程,经营管理等资料700套

7抖音参哥金句120条【FDF文件】

8驾考题库大全-考驾照app手机软件(解锁会员)

1wordpress教程-文章内插入音乐播放器代码（美化版）

2强烈推荐！一站式生活缴费、会员影视权益自助平台，人人适用！

3解决SEO收录不一致？配置URL网站301重定向方法

4【实战】解决php中的goto加密解密，php在线解密工具

5随机一言评论语api接口制作详细教程

6子比主题添加功能-在用户中心添加投诉举报功能+处理进度+翻页+查询记录

7仅需一个永久链接、永久二维码聚合你的所有入口

8wordpress教程-自动更新网站底部 版权Copyright © 年份

1WP子比主题教程-网站底部横幅信息统计模块美化

2聚川闲鱼无货源最新经典玩法-基础认知+爆款闲鱼选品+快速找到货源

3高级网站安全认证源代码

4WP教程-给文章内容自动添加关键词TAG标签

5子比主题V6.0社区思考如何设计一个仅VIP会员,仅认证用户可见的页面

6搭建ChatGPT AI智能对话网站-PHP网页源码版

7子比主题添加功能-在用户中心添加投诉举报功能+处理进度+翻页+查询记录

8子比主题评论区增加自动打卡按钮功能模块

标签云
子比主题美化子比主题wordpress教程小工具WordPressChatGPT免激活中文版字体个人主页小程序ExcelChatGPT源码个人导航子比美化教程文字广告图片广告侧边栏短视频cssTypecho主题小红书api接口子比主题教程悬浮广告Ai智能对话htmlPHP代码商用字体激励广告模板抖音WordPress主题引导页复制弹窗子比主题插件悬浮按钮安装教程等级图标qq壁纸云开发地址收藏页wordpress模板子比插件评论区音频编辑软件流量变现
懒人Blog(资源素材网)-汇集创意十足的素材资源站
广告合作-懒人Blog(资源素材网)
国内安卓ChatGPT4.0中文在线手机版-文档论文Ai智能对话模式-懒人Blog(资源素材网)