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

方法一,比較專業也是比較復雜了

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

1. //如果是文章頁并且不是手機訪問，在文章末尾添加一段html代碼 
2. function add_pay($content) { 
3.  
4. $pay = <<<PAY 
5. <div class="gave" > 
6.     <a href="javascript：;" id="gave">打賞</a> 
7.     <div class="code" id="wechatCode" style="display: none"> 
8.         <img src="/wp-content/uploads/2015/10/pay.jpg" alt=""> 
9.         <div><img src="m/wp-content/uploads/2015/10/ico-wechat.jpg" alt="微信logo" class="ico-wechat">微信掃一掃，打賞作者吧～</i></div> 
10.     </div> //Vevb.com 
11. </div> 
12. PAY; 
13.  
14.  if(is_single() && !wp_is_mobile()){ 
15.   $content .= $pay; 
16.  } 
17.  return $content; 
18. } 
19.  
20. add_filter( 'the_content', 'add_pay',10); 

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

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

1. <style type="text/css"> 
2.     .gave { 
3.         height: 110px; 
4.         position: relative; 
5.         text-align: center; 
6.     } 
7.  
8.     .gave .code::after { 
9.         border-color: #fff transparent transparent; 
10.         border-style: solid; 
11.         border-width: 10px; 
12.         content: ""; 
13.         height: 0; 
14.         left: 50%; 
15.         margin-left: -7.5px; 
16.         position: absolute; 
17.         top: 100%; 
18.         width: 0; 
19.     } 
20.     .gave .code { 
21.         background: #fff none repeat scroll 0 0; 
22.         border-radius: 5px; 
23.         bottom: 100%; 
24.         box-shadow: 0 0 15px #e5e5e5; 
25.         color: #68b3de; 
26.         display: none; 
27.         font-size: 13px; 
28.         height: 160px; 
29.         left: 50%; 
30.         margin-left: -110px; 
31.         padding: 20px; 
32.         position: absolute; 
33.         width: 180px; 
34.     } 
35.     .gave a { 
36.         background: #f06363 none repeat scroll 0 0; 
37.         border-radius: 50%; 
38.         color: #fff !important; 
39.         display: inline-block; 
40.         font-size: 18px; 
41.         height: 75px; 
42.         line-height: 75px; 
43.         text-align: center; 
44.         width: 75px; 
45.         text-decoration: none; 
46.     } 
47.  
48.     .gave .code > img { 
49.         height: 124px; 
50.         width: 124px; 
51.         border: medium none; 
52.         max-width: 100%; 
53.     } 
54. </style> 

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

1. <script type="text/javascript"> 
2.     document.getElementById('gave').onmouseover = function() { 
3.         document.getElementById('wechatCode').style.display = 'block'; 
4.     } 
5.     document.getElementById('gave').onmouseout = function() { 
6.         document.getElementById('wechatCode').style.display = 'none'; 
7.     } 
8. </script> 

這樣就OK了。

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

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

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

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

方法:

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

2.找到

代碼 1  <!-- END .entry-content -->

在上行添加如下代碼:

1. <!-- START .pay by andypm.com --> <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="微信二維碼圖片地址" alt="pay_weixin" width="150" height="150" /><img class="wp-image-558 size-thumbnail" src="支付寶二維碼地址" alt="pay_weixin" width="150" height="150" /></div> <div style="text-align: center;"><span style="color: #999999;">金額隨意 快來“打”我呀～</span></div> <!-- END .pay by Vevb.com -->  

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