本文實例講述了WORDPRESS文章中微信打賞功能的2種實現方法,。分享給大家供大家參考,，具體如下：

打賞功能功能就是給我們一些資助了,寫博客不容易所以會給一些內容與說明了,下面我們就一起來看2種給WORDPRESS文章添加微信打賞功能實現方法.

方法一、比較專業(yè)也是比較復雜了

給WordPress文章添加微信打賞功能,如果你的博文給別人有幫助,也許會有熱心的讀者給你打賞,首先在WordPress主題的functions.php末尾添加如下代碼.

//如果是文章頁并且不是手機訪問,，在文章末尾添加一段html代碼function add_pay($content) {  $pay = <<<PAY  <div class="gave" >  <a href="javascript：;" id="gave">打賞</a>  <div class="code" id="wechatCode" style="display: none">  <img src=http://dlxai.com/b2b/skin/default/image/nopic.gif alt="">  <div><img src=http://dlxai.com/b2b/skin/default/image/nopic.gif alt="微信logo" class="ico-wechat">微信掃一掃,，打賞作者吧～</i></div>  </div>  </div>  PAY;  if(is_single() && !wp_is_mobile()){  $content .= $pay;  }  return $content;}add_filter( 'the_content', 'add_pay',10);

這個函數的作用是:如果是文章頁并且不是手機訪問,在文章末尾添加一段html代碼.

在主題的css文件添加以下樣式:

<style type="text/css">  .gave {  height: 110px;  position: relative;  text-align: center;  }  .gave .code::after {  border-color: #fff transparent transparent;  border-style: solid;  border-width: 10px;  content: "";  height: 0;  left: 50%;  margin-left: -7.5px;  position: absolute;  top: 100%;  width: 0;  }  .gave .code {  background: #fff none repeat scroll 0 0;  border-radius: 5px;  bottom: 100%;  box-shadow: 0 0 15px #e5e5e5;  color: #68b3de;  display: none;  font-size: 13px;  height: 160px;  left: 50%;  margin-left: -110px;  padding: 20px;  position: absolute;  width: 180px;  }  .gave a {  background: #f06363 none repeat scroll 0 0;  border-radius: 50%;  color: #fff !important;  display: inline-block;  font-size: 18px;  height: 75px;  line-height: 75px;  text-align: center;  width: 75px;  text-decoration: none;  }  .gave .code > img {  height: 124px;  width: 124px;  border: medium none;  max-width: 100%;  }</style>

在模板文章的頁面如footer.php中添加如下js:

<script type="text/javascript">  document.getElementById('gave').onmouseover = function() {  document.getElementById('wechatCode').style.display = 'block';  }  document.getElementById('gave').onmouseout = function() {  document.getElementById('wechatCode').style.display = 'none';  }</script>

這樣就OK了。

別忘了把微信支付二維碼替換成自己的哦,。

其實更好的方式是做成WordPress插件的形式,，沒時間折騰，有空可以構想一下用插件實現,，這樣可以方便大家直接安裝了,。

方法二、超級簡單就像文章下面所說沒技術就這樣來設置,。

本人技術有限,，沒有做虎嗅那種按鈕形式,。我是直接在WordPress模板中添加代碼,，一勞永逸,，這樣就不用每次寫文章都要粘貼復制一遍代碼。本文的同時顯示微信支付和支付寶的二維碼,，虎嗅只顯示一種支付碼，相信不是所有人都用微信支付或支付寶吧,，所以多一種選擇多一個收入渠道,。不過這適用于像我這種全站只是我一個人寫文章的。樣式參考文章正文內容下方,。

方法:

1.修改相應風格模板的single.php 文件

2.找到

<!-- END .entry-content -->

在上行添加如下代碼:

<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"><img class="wp-image-558 size-thumbnail" src=http://dlxai.com/b2b/skin/default/image/nopic.gif alt="pay_weixin" width="150" height="150" /><img class="wp-image-558 size-thumbnail" src=http://dlxai.com/b2b/skin/default/image/nopic.gif alt="pay_weixin" width="150" height="150" /></div> <div style="text-align: center;"><span style="color: #999999;">金額隨意 快來“打”我呀～</span></div>

3.修改后保存上傳即可,當然你也可以根據你的喜好選擇將此段代碼放置到何處.