Loading
0

建站知识:为wordpress添加打赏按钮

左叔新书《一生中还有多少个你》| 当当 | 京东 | 亚马逊 | 天猫 | 签名本+帆布袋 | 有声版 | 新华书店温暖上市

打赏按钮刊例

看到知更鸟的主题里面有点赞、打赏、分享的按钮,看起来蛮有质感,也有很多仿主题的人分享了代码。但点赞、分享等功能目前我使用的主题已经有了,再添加就有点重复。抽空研究了水冷眸移植的代码,把相关的代码进行了剥离,只保留单纯的打赏按钮,并且对相关的样式进行了放大,也期待一些大神对这些内容进行插件化,方便一些小白使用者来设置相关功能

第一步:添加html代码

文章页面

找到主题里面的的single.php(文章页面)文件,具体位置可以自己调整,需要注意的是,代码中有个的代码,这是调用fontawesome图标字体的代码,如果你的主题没有采用fontawesome图标字体的代码,可能需要你另行载入fontawesome字体的文件,或者是替换成你主题所采用的图标字体。

第二步:添加CSS代码

css代码

可以直接添加到主题style.css里面;部分主题可能不是直接主题根目录下style.css里面写css代码,遇到此情况,可以将此css代码添加到任何一个页面有载入的CSS文件即可。字体的大小和背景的颜色都是可以调整的,自己随便改吧。

第三步:引入jbox的JS和css

载入jbox样式

点击弹出相关的模态窗口样式需要调用jbox的代码,你可以把这些代码添加到你主题的head区内。

第四步:在footer区添加打赏的二维码图片

footer区代码

一定要记得把图片地址换成你自己的二维码哦。其实除了wordpress的博客外,这个按钮还是可以移植到其他平台的网站上的,大家发挥想像力吧。为了方便大家,我也整理了一个可以直接复制粘贴的代码版本提供给大家下载了。VIP会员免费哦,其他用户象征性地收1枚红小豆哦。