给WordPress添加打赏功能

发现很多博客都添加了二唯码打赏,如是也想给自己博客也弄个,算是给自己个幻想吧!磕磕碰碰玩建站也差不多10来年了,就赚过100块钱广告费,凄惨!好像跑题了,建站只是兴趣。

方法一:

威言威语的打赏效果挺不错,该打赏使用的dialog这个组件,https://github.com/aui/artDialog,有兴趣的也可以自己研究,我这里是直接提取。
首先下载artdialog组件,提取里面一个dialog-min.js上传至你的js目录下,并激活。

  1. <script src=“<?php bloginfo(‘template_directory’); ?>/js/dialog-min.js”></script>  

将上面代码添加至你的footer.php或者header.php
打开single.php,在合适位置添加

  1. <div class=“article article_c”>  
  2. <div class=“shang”>  
  3. <span class=“zanzhu”><a title=“赞助本站” id=“weiShowDialog” href=“#shang” onfocus=“this.blur()”>赏</a></span>  
  4. </div>  
  5. </div>  

打开style.css添加

  1. /* 赞助 */  
  2. .shang{margin: 0 auto;positionrelative;width92px;padding:10px;}  
  3. .zanzhu{display:block;text-align:center;}  
  4. .zanzhu a:link,.zanzhu a:visited{background#fefefe;border-radius:46px;font-weightnormal;height66px;width66px;border2px solid #eee;display:block;line-height62px;font-size:34px;color:#ff8140;text-decoration:none;box-shadow:1px 2px 3px rgba(0,0,0,.2);}  
  5. .zanzhu a:hover {background#ff8140;border:2px solid #ff8140;color:#fff;}  
  6. .ui-dialog-body {padding:20px;text-aligncenter;background#fff;border: 0 none;border-collapsecollapse;border-spacing: 0;margin: 0;widthauto;border-radius: 6px;height:410px;}  

最后一步添加js动作

  1. jQuery(document).ready(  
  2.     function() {  
  3.         $(“#weiShowDialog”).click(function(){  
  4.             var d = dialog({  
  5.                 title: ,  
  6.                 content: ‘<div><p><strong>微信</strong>扫一扫,打赏作者吧~</p><img src=“https://www.xxko.net/wp-content/themes/haili/images/pay1.png” height=“180”>’ +  
  7.                         ‘<p style=“margin-top:20px;”><strong>支付宝</strong>扫一扫,打赏作者吧~</p><img src=“https://www.xxko.net/wp-content/themes/haili/images/pay2.png” height=“180”></div>’,  
  8.                 quickClose: true  
  9.             });  
  10.             d.showModal();  
  11.         });  
  12.     }  
  13. );  

记得将图片地址改成自己的,效果详情见威言威语博客。注:部分代码来自威言威语博客

方法二:

直接在single.php添加

  1. <!– START .pay by xxko.net –>  
  2. <div style=“text-align: center;”><strong>用<span style=“color: #339966;”>微信</span> OR <span style=“color: #337fe5;”>支付宝</span> 扫描二维码</strong></div>  
  3. <div style=“text-align: center;”><strong>为本文作者 <span style=“color: #ff6600;”>打个赏</span></strong></div>  
  4. <div align=“center”><a href=“https://www.xxko.net/wp-content/themes/haili/img/pay1.png” target=“_blank”><img class=“wp-image-558 size-thumbnail” src=“https://www.xxko.net/wp-content/themes/haili/img/pay1.png” alt=“pay_weixin” width=“150” height=“150” /></a><a href=“https://www.xxko.net/wp-content/themes/haili/img/pay2.png” target=“_blank”><img class=“wp-image-558 size-thumbnail” src=“https://www.xxko.net/wp-content/themes/haili/img/pay2.png” alt=“pay_weixin” width=“150” height=“150” /></a></div>  
  5. <div style=“text-align: center;”><span style=“color: #999999;”>金额随意 快来“打”我呀~</span></div>  
  6. <!– END .pay by xxko.net –>  

效果如图

注意更改图片地址,收工。

说明:

两种方法均测试没问题,然而悲催的我方法一,主题出现js冲突,很郁闷,正在学习中。

© 版权声明
THE END
喜欢就支持以下吧
点赞0赞赏
分享
评论 共1条

请登录后发表评论