给WordPress添加打赏功能
发现很多博客都添加了二唯码打赏，如是也想给自己博客也弄个，算是给自己个幻想吧！磕磕碰碰玩建站也差不多10来年了，就赚过100块钱广告费，凄惨！好像跑题了，建站只是兴趣。
方法一：
威言威语的打赏效果挺不错，该打赏使用的dialog这个组件，https://github.com/aui/artDialog，有兴趣的也可以自己研究，我这里是直接提取。
首先下载artdialog组件，提取里面一个dialog-min.js上传至你的js目录下，并激活。
- <script src="<?php bloginfo('template_directory'); ?>/js/dialog-min.js"></script>
将上面代码添加至你的footer.php或者header.php
打开single.php，在合适位置添加
- <div class="article article_c">
- <div class="shang">
- <span class="zanzhu"><a title="赞助本站" id="weiShowDialog" href="#shang" onfocus="this.blur()">赏</a></span>
- </div>
- </div>
打开style.css添加
- /* 赞助 */
- .shang{margin: 0 auto;position: relative;width: 92px;padding:10px;}
- .zanzhu{display:block;text-align:center;}
- .zanzhu a:link,.zanzhu a:visited{background: #fefefe;border-radius:46px;font-weight: normal;height: 66px;width: 66px;border: 2px solid #eee;display:block;line-height: 62px;font-size:34px;color:#ff8140;text-decoration:none;box-shadow:1px 2px 3px rgba(0,0,0,.2);}
- .zanzhu a:hover {background: #ff8140;border:2px solid #ff8140;color:#fff;}
- .ui-dialog-body {padding:20px;text-align: center;background: #fff;border: 0 none;border-collapse: collapse;border-spacing: 0;margin: 0;width: auto;border-radius: 6px;height:410px;}
最后一步添加js动作
- jQuery(document).ready(
- function() {
- $("#weiShowDialog").click(function(){
- var d = dialog({
- title: '',
- content: '<div><p><strong>微信</strong>扫一扫，打赏作者吧~</p><img src="https://mehuts.com/wp-content/themes/haili/images/pay1.png" height="180">' +
- '<p style="margin-top:20px;"><strong>支付宝</strong>扫一扫，打赏作者吧~</p><img src="https://mehuts.com/wp-content/themes/haili/images/pay2.png" height="180"></div>',
- quickClose: true
- });
- d.showModal();
- });
- }
- );
记得将图片地址改成自己的，效果详情见威言威语博客。注：部分代码来自威言威语博客
方法二：
直接在single.php添加
- <!-- START .pay by xxko.net -->
- <div style="text-align: center;"><strong>用<span style="color: #339966;">微信</span> OR <span style="color: #337fe5;">支付宝</span> 扫描二维码</strong></div>
- <div style="text-align: center;"><strong>为本文作者 <span style="color: #ff6600;">打个赏</span></strong></div>
- <div align="center"><a href="https://mehuts.com/wp-content/themes/haili/img/pay1.png" target="_blank"><img class="wp-image-558 size-thumbnail" src="https://mehuts.com/wp-content/themes/haili/img/pay1.png" alt="pay_weixin" width="150" height="150" /></a><a href="https://mehuts.com/wp-content/themes/haili/img/pay2.png" target="_blank"><img class="wp-image-558 size-thumbnail" src="https://mehuts.com/wp-content/themes/haili/img/pay2.png" alt="pay_weixin" width="150" height="150" /></a></div>
- <div style="text-align: center;"><span style="color: #999999;">金额随意 快来"打"我呀～</span></div>
- <!-- END .pay by xxko.net -->
效果如图
注意更改图片地址，收工。
说明：
两种方法均测试没问题，然而悲催的我方法一，主题出现js冲突，很郁闷，正在学习中。
