WORDPRESS文章中微信打賞功能的2種實(shí)現(xiàn)方法
我要評(píng)論本文實(shí)例講述了WORDPRESS文章中微信打賞功能的2種實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
打賞功能功能就是給我們一些資助了,寫博客不容易所以會(huì)給一些內(nèi)容與說明了,下面我們就一起來看2種給WORDPRESS文章添加微信打賞功能實(shí)現(xiàn)方法.
方法一、比較專業(yè)也是比較復(fù)雜了
給WordPress文章添加微信打賞功能,如果你的博文給別人有幫助,也許會(huì)有熱心的讀者給你打賞,首先在WordPress主題的functions.php末尾添加如下代碼.
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);
這個(gè)函數(shù)的作用是:如果是文章頁(yè)并且不是手機(jī)訪問,在文章末尾添加一段html代碼.
在主題的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>
在模板文章的頁(yè)面如footer.php中添加如下js:
document.getElementById('gave').onmouseover = function() {
document.getElementById('wechatCode').style.display = 'block';
}
document.getElementById('gave').onmouseout = function() {
document.getElementById('wechatCode').style.display = 'none';
}
</script>
這樣就OK了。
別忘了把微信支付二維碼替換成自己的哦。
其實(shí)更好的方式是做成WordPress插件的形式，沒時(shí)間折騰，有空可以構(gòu)想一下用插件實(shí)現(xiàn)，這樣可以方便大家直接安裝了。
方法二、超級(jí)簡(jiǎn)單就像文章下面所說沒技術(shù)就這樣來設(shè)置。
本人技術(shù)有限，沒有做虎嗅那種按鈕形式。我是直接在WordPress模板中添加代碼，一勞永逸，這樣就不用每次寫文章都要粘貼復(fù)制一遍代碼。本文的同時(shí)顯示微信支付和支付寶的二維碼，虎嗅只顯示一種支付碼，相信不是所有人都用微信支付或支付寶吧，所以多一種選擇多一個(gè)收入渠道。不過這適用于像我這種全站只是我一個(gè)人寫文章的。樣式參考文章正文內(nèi)容下方。
方法:
1.修改相應(yīng)風(fēng)格模板的single.php 文件
2.找到
代碼 1 <!-- END .entry-content -->
在上行添加如下代碼:
3.修改后保存上傳即可,當(dāng)然你也可以根據(jù)你的喜好選擇將此段代碼放置到何處.
希望本文所述對(duì)大家基于wordpress的程序設(shè)計(jì)有所幫助。
相關(guān)文章
WordPress之給文章內(nèi)容中間插入廣告的實(shí)現(xiàn)方法
這篇文章主要介紹了WordPress之給文章內(nèi)容中間插入廣告的實(shí)現(xiàn)方法,需要的朋友可以參考下2016-08-23WordPress 自定義文章列表列的實(shí)現(xiàn)方法
這篇文章主要介紹了WordPress 自定義文章列表列的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-01-15- 這篇文章主要為大家介紹了WordPress給文章圖片自動(dòng)添加鏈接的方法,以實(shí)例形式分析了自動(dòng)給圖片添加鏈接以及給關(guān)鍵字添加鏈接的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-27
WordPress實(shí)現(xiàn)搜索結(jié)果包括自定義文章類型內(nèi)容的方法
這篇文章主要為大家介紹了WordPress實(shí)現(xiàn)搜索結(jié)果包括自定義文章類型內(nèi)容的方法,通過自定義函數(shù)的設(shè)置來實(shí)現(xiàn)WordPress搜索結(jié)果包括自定義文章類型,是非常實(shí)用的技巧,需要的2014-12-26WordPress自動(dòng)給文章添加nofollow屬性的實(shí)現(xiàn)方法
這篇文章主要為大家介紹了WordPress自動(dòng)給文章添加nofollow屬性的實(shí)現(xiàn)方法,可通過Nofollow for external link 插件實(shí)現(xiàn)文章頁(yè)自動(dòng)添加nofollow屬性的功能,是非常實(shí)用的技巧2014-12-25WordPress后臺(tái)顯示相關(guān)用戶文章相關(guān)聯(lián)評(píng)論的方法
這篇文章主要為大家介紹了WordPress后臺(tái)顯示相關(guān)用戶文章相關(guān)聯(lián)評(píng)論的方法,通過增加自定義函數(shù)SQL調(diào)用來實(shí)現(xiàn)顯示相關(guān)評(píng)論的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-25Wordpress實(shí)現(xiàn)文章支持和反對(duì)功能的方法
這篇文章主要為大家介紹了Wordpress實(shí)現(xiàn)文章支持和反對(duì)功能的方法,通過添加自定義函數(shù)實(shí)現(xiàn)文章的支持和反對(duì)功能,是比較典型的WordPress二次開發(fā)技巧,具有一定的參考借鑒價(jià)2014-12-24- 這篇文章主要為大家介紹了wordpress給文章生成二維碼的方法,涉及google接口的調(diào)用技巧以及本地緩存的應(yīng)用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-23
- 這篇文章主要為大家介紹了WordPress獲取文章內(nèi)容摘要的方法,通過較為簡(jiǎn)單的自定義函數(shù)實(shí)現(xiàn)這一功能,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-20
- 這篇文章主要為大家介紹了WordPress獲取指定分類文章數(shù)量的方法,通過自定義函數(shù)實(shí)現(xiàn)該功能,并總結(jié)了幾個(gè)相應(yīng)的調(diào)用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-19