給WORDPRESS文章添加微信打賞功能2種方法

2024-09-07 00:52:21

字體：大中小

供稿：網(wǎng)友

打賞功能功能就是給我們一些資助了,寫(xiě)博客不容易所以會(huì)給一些內(nèi)容與說(shuō)明了,下面我們就一起來(lái)看2種給WORDPRESS文章添加微信打賞功能實(shí)現(xiàn)方法.

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

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

//如果是文章頁(yè)并且不是手機(jī)訪問(wèn)，在文章末尾添加一段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> //Vevb.com

</div>

PAY;

if(is_single() && !wp_is_mobile()){

  $content .= $pay;

}

return $content;

}

add_filter( 'the_content', 'add_pay',10);

這個(gè)函數(shù)的作用是:如果是文章頁(yè)并且不是手機(jī)訪問(wèn),在文章末尾添加一段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>

在模板文章的頁(yè)面如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了。

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

其實(shí)更好的方式是做成WordPress插件的形式，沒(méi)時(shí)間折騰，有空可以構(gòu)想一下用插件實(shí)現(xiàn)，這樣可以方便大家直接安裝了。

方法二，超級(jí)簡(jiǎn)單就像文章下面所說(shuō)沒(méi)技術(shù)就這樣來(lái)設(shè)置。

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

方法:

1.修改相應(yīng)風(fēng)格模板的single.php 文件

2.找到

代碼 1

在上行添加如下代碼:

<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;">打個(gè)賞</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;">金額隨意快來(lái)“打”我呀～</span></div>