网站底部多功能导航 - 子比主题美化

更新功能：

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

效果图

在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 这段建议保留)

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> 到底啦';
}

更新

分享按钮代码发生了变动，这里我们也做一下修改：

<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 标签代码将原先的代码覆盖就完成了

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。