子比主题美化 – 加个好看的底部导航

前言

因为在捣鼓那个打赏功能，想着写个打赏完之后支付成功的小伙伴可以在表里显示出来，可惜站长之前没有捣鼓过支付，只借鉴了烟雨那个要饭网站，写的不好也有bug，所以想着不分享出来了，可是有小伙伴想要，我就分享一下初始的打赏吧！

更新功能：

• 加入了本篇文字的点赞、分享数量
• 加入了一个简单的打赏功能
• 修改了几个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代码是用来触发滚动条显示百分比的

更新

元旦子比主题更新到了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>

结语

教程到这就结束了，如果发现有问题的话可以在下面评论留言一下。