wordpress自定義打賞
阿新 • • 發佈：2019-02-02
原文地址和效果圖：http://liuyanzhao.com/2293.html
之前逛張戈部落格的時候，看到那個打賞的部件，同時也有教程。今天準備試一試，當然由於張戈的那篇文章寫的已經很久了，對於begin主題可能會多少有些問題，但是基本是不傷大雅的。可以搬過來用！
交待：本文程式碼兩處程式碼取自於張戈部落格，其他均博主整理
效果圖如下：
第一步、新建js檔案
新建shang.js到主題資料夾下的js資料夾下（位置無所謂啦，只要你待會兒引入正確即可），程式碼如下
腳下留心：下面程式碼中有三處圖片路徑記得修改哦
(function($){
var id = Date 第二步、html部分
在你需要顯示打賞按鈕的位置加以下程式碼（一般來說，文章頁面都是single.php）
<button onclick="PaymentUtils.show();">賞</button>
<script type="text/javascript" src="http://xxx.com/wp-content/themes/begin/js/shang.js"></script>
腳下留心：上面兩句程式碼，第一句是的button可以改成a標籤，也就是隻需要在你的打賞按鈕里加一句onlick就可以啦；第二句中的js檔案路徑不要錯了。
這樣我們的效果就已經實現了。
如果你是begin主題的話，只需要把begin/inc/social.php中略作修改（js檔案跟上面一樣）
1、把下面程式碼註釋掉（或者去掉）
<span class="tipso_style" id="tip-p" data-tipso='
<span id="shang">
<span class="shang-main">
<?php if ( zm_get_option('alipay_h') == '' ) { ?><?php } else { ?><h4><i class="fa fa-heart" aria-hidden="true"></i> <?php echo zm_get_option('alipay_h'); ?></h4><?php } ?>
<?php if ( zm_get_option('qr_a') == '' ) { ?>
<?php } else { ?>
<span class="shang-img">
<img src="<?php echo zm_get_option('qr_a'); ?>" alt="alipay"/>
<?php if ( zm_get_option('alipay_z') == '' ) { ?><?php } else { ?><h4><?php echo zm_get_option('alipay_z'); ?></h4><?php } ?>
</span>
<?php } ?>
<?php if ( zm_get_option('qr_b') == '' ) { ?>
<?php } else { ?>
<span class="shang-img">
<img src="<?php echo zm_get_option('qr_b'); ?>" alt="weixin"/>
<?php if ( zm_get_option('alipay_w') == '' ) { ?><?php } else { ?><h4><?php echo zm_get_option('alipay_w'); ?></h4><?php } ?>
</span>
<?php } ?>
<span class="clear"></span>
</span>
</span>'>
2、然後把緊接著下面的如下程式碼註釋
<a title="<?php echo zm_get_option('alipay_t'); ?>"><?php echo zm_get_option('alipay_name'); ?></a>
3、加上如下程式碼
<a onclick="PaymentUtils.show();" style="cursor:pointer">賞</a>
至此begin適應也完美解決了。如果你跟我一樣遇到分享按鈕錯位的話，很簡單，只需要加一點css樣式讓它回位。因為博主遇到的是分享按鈕往上移動了一部分，只需要在分享按鈕的span里加一句
style="margin-top: 25px!important;"就可以！