#WordPress小技巧#纯代码为自己博客添加支付宝/微信打赏功能-WordPress开发教程
在此文章中蜗牛为大家分享一个纯代码为自己WordPress博客添加支付宝打、微信打赏功能的方法,不但美观而且实用,适合所有WordPress主题。此方法并非蜗牛原创,转自@老蒋,而老
在此文章中蜗牛为大家分享一个纯代码为自己WordPress博客添加支付宝打、微信打赏功能的方法,不但美观而且实用,适合所有WordPress主题。此方法并非蜗牛原创,转自@老蒋,而老蒋也是根据WPDAXUE博客的打赏功能提取的。
一、添加CSS样式
方法很简单,我们只需找到主题CSS文件,把下面代码添加进去即可。一般把代码放到“main.css”文件,当然我们需要注意是否与现有的CSS命令有冲突,如果有则需要自己修改。
.reward{padding:5px 0} .reward .reward-notice{font-size:14px;line-height:14px;margin:15px auto;text-align:center} .reward .reward-button{font-size:28px;line-height:58px;position:relative;display:block;width:60px;height:60px;margin:0 auto;padding:0;-webkit-user-select:none;text-align:center;vertical-align:middle;color:#fff;border:1px solid #f1b60e;border-radius:50%;background:#fccd60;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fccd60),color-stop(100%,#fbae12),color-stop(100%,#2989d8),color-stop(100%,#207cca));background:-webkit-linear-gradient(top,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%);background:linear-gradient(to bottom,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%)} .reward .reward-code{position:absolute;top:-220px;left:50%;display:none;width:350px;height:200px;margin-left:-175px;padding:15px;border:1px solid #e6e6e6;background:#fff;box-shadow:0 1px 1px 1px #efefef} .reward .reward-button:hover .reward-code{display:block} .reward .reward-code span{display:inline-block;width:150px;height:150px} .reward .reward-code span.alipay-code{float:left} .reward .reward-code span.alipay-code a{padding:0} .reward .reward-code span.wechat-code{float:right} .reward .reward-code img{display:inline-block;float:left;width:150px;height:150px;margin:0 auto;border:0} .reward .reward-code b{font-size:14px;line-height:26px;display:block;margin:0;text-align:center;color:#666} .reward .reward-code b.notice{line-height:2rem;margin-top:-1rem;color:#999} .reward .reward-code:after,.reward .reward-code:before{position:absolute;content:'';border:10px solid transparent} .reward .reward-code:after{bottom:-19px;left:50%;margin-left:-10px;border-top-color:#fff} .reward .reward-code:before{bottom:-20px;left:50%;margin-left:-10px;border-top-color:#e6e6e6}
二、添加调用代码
然后到主题的文章页,一般是“single.php”文件添加调用代码,具体添加到什么位置,大家根据自己需要测试。测试前最好先备份一份“single.php”文件。记得把“支付宝收款二维码地址200*200PX”、“微信收款二维码地址200*200PX”改成你的微信、支付宝收款二维码地址。
<div class="reward"> <div class="reward-button"> 赏 <span class="reward-code"> <span class="alipay-code"> <img class="alipay-img" src="支付宝收款二维码地址200*200PX"> <b> 支付宝扫码打赏 </b> </span> <span class="wechat-code"> <img class="wechat-img" src="微信收款二维码地址200*200PX"> <b> 微信打赏 </b> </span> </span> </div> <p class="reward-notice"> 如果文章对您有帮助,欢迎移至上方按钮打赏蜗牛 </p> </div>
三、效果演示
下面是蜗牛添加成功后的演示效果。如果代码都填写正确后,打赏功能显示错位,请清理下浏览器缓存,蜗牛亲测是没有什么问题的。
原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/121532

服务项目 | 服务内容 | 收费标准(元) |
---|---|---|
开发定制 | WordPress主题/插件开发定制 | (以最终需求为准) |
主题/插件汉化 | 汉化团队WordPress主题/插件,翻译率95% | (以标的主题/插件的句子数量为准) |
服务器环境配置 | 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 | 100元/次 |
网站托管 | 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 | 标配套餐:1000元/年/站点 高配套餐:联系客服获取 |
网站加速优化 | 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) | 500元/次(仅站内优化200元/次) |
主题配置 | 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 | 英文主题安装 60元/次 汉化主题安装 30元/次 |
HTTPS配置 | HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 | 100元/次 |
网站搬家 | 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 | 标准收费:500元/次 若网站数据量大,需协商 |
网站运维 | 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 | 标准收费:2000元/年 IP 5000以上需协商 |