WordPress博客添加微信/支付宝打赏功能 - 任意网站通用无插件

老蒋在网友博客中转悠的时候经常看到内容页面下方有打赏功能，之前一直想加到上面去，但是总觉着如果加上去有点向网友索要点什么似得。前几天，网友在群里讨论这个问题，提到还是有必要加上一个，万一分享的技术、文章、方法可以帮助到网友且有的网友也会通过发个奖赏之类的。

今天工作空闲时间，从WP大学（wpdaxue.com）网站看到认为还不错的效果且没有用到插件，于是整理过来添加到老蒋部落中，我们现在也可以看到效果感觉还是不错的。可以加上微信、支付宝的收款二维码。

这个打赏功能采用的是无插件，直接CSS实现的，顺带把代码分享出来，如果有用户也有需要用到可以直接使用。这里要申明的是，我也是从WPDAXUE抠出来的，版权归属倡萌同学，仅仅是将好的东西分享给大家提供便捷。我们可以将安装到任何网站中。

第一、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}

将CSS放到我们的CSS文件中，注意是否与我们已有的CSS命令有冲突，如果有则需要修改。

2、调用部分

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>

根据我们的需要，将需要调用打赏功能的页面、模板添加上面调用代码。

PS：需要提到的是，我们预先要做2个图片，从支付宝、微信中先下载到收款的二维码，然后替换成自己的图片，千万别放我的。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！