WordPress页面添加打赏按钮

奥多也网络

前言

虽然WordPress很多主题包括CoreNext在文章的底部都有赞赏的按钮，但是页面中是没有的，为了解决这一问题，所以找到了如下教程。

教程

教程非常简单，在需要添加的页面位置添加如下代码，记得更换其中的二维码地址，当然如果你想赞助我的话也是可以的。

1. <!-- 打赏 -->
   
2. <div id="rewardSection" style="padding: 10px 0; margin: 20px auto; width: 100%; font-size: 16px; text-align: center;"><button id="rewardButton" style="border: 1px solid #ccc; line-height: 36px; text-align: center; height: 36px; display: block; border-radius: 4px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; background-color: #04be02; color: #ffffff; margin: 0 auto; padding: 0 25px;">¥ 点我显示打赏</button>
   
3. <div id="QR" style="display: none;">
   
4. <div id="wechat" style="display: inline-block; margin: 20px;"><img id="wechat_qr" style="width: 180px; max-width: 100%; display: inline-block; margin: 0.8em 2em 0 2em;" src="https://www.xrbk.cn/api/img/sk/wx.png" alt="微信二维码" />微信打赏
   
5. 
   
6. </div>
   
7. <div id="alipay" style="display: inline-block; margin: 20px;"><img id="alipay_qr" style="width: 180px; max-width: 100%; display: inline-block; margin: 0.8em 2em 0 2em;" src="https://www.xrbk.cn/api/img/sk/zfb.png" alt="支付宝二维码" />支付宝打赏
   
8. 
   
9. </div>
   
10. </div>
    
11. </div>
    
12. <script>
    
13. jQuery(document).ready(function($) {
    
14.     $('#rewardButton').click(function() {
    
15.         $('#QR').toggle();
    
16.     });
    
17. });
    
18. </script>
    
19. 
    
20. <!-- 打赏 -->

复制代码