wordpress添加文章打賞按鈕

原文來自搬磚工，如需轉載請註明出處

---

博主個人建站專欄，請戳這裏http://blog.csdn.net/column/details/14142.html

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

打賞功能功能就是給我們一些資助了,寫博客不容易所以會給一些內容與說明了,下面我們就一起來看2種給WORDPRESS文章添加微信打賞功能實現方法.
方法一
給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="/wp-content/uploads/2015/10/pay.jpg" alt="">
<div><img src="m/wp-content/uploads/2015/10/ico-wechat.jpg" 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模板中添加代碼，一勞永逸，這樣就不用每次寫文章都要粘貼複製一遍代碼。本文的同時顯示微信支付和支付寶的二維碼，虎嗅只顯示一種支付碼，相信不是所有人都用微信支付或支付寶吧，所以多一種選擇多一個收入渠道。不過這適用於像我這種全站只是我一個人寫文章的。樣式參考文章正文內容下方。
方法:
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="微信二維碼圖片地址" 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>

3.修改後保存上傳即可,當然你也可以根據你的喜好選擇將此段代碼放置到何處.
希望本文所述對大家基於wordpress的程序設計有所幫助。