本文实例讲述了WORDPRESS文章中微信打赏性能的2种完成办法。分享给大家供大家参考，详细如下：

打赏性能性能就是给咱们一些赞助了,写博客不容易所以会给一些内容与阐明了,上面咱们就一同来看2种给WORDPRESS文章增加微信打赏性能完成办法.

办法一、比拟业余也是比拟复杂了

给WordPress文章增加微信打赏性能,假如你的博文给他人有协助,兴许会有热心的读者给你打赏,首先在WordPress主题的functions.php末尾增加如下代码.

//假如是文章页并且不是手机拜访，在文章末尾增加一段html代码
function add_pay($content) {
$pay = <<<PAY
<p class="gave" >
    <a href="javascript：;" id="gave">打赏</a>
    <p class="code" id="wechatCode" style="display: none">
        <img src="/wp-content/uploads/2015/10/pay.jpg" alt="">
        <p><img src="m/wp-content/uploads/2015/10/ico-wechat.jpg" alt="微信logo" class="ico-wechat">微信扫一扫，打赏作者吧～</i></p>
    </p>
</p>
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.找到

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

在下行增加如下代码:

<p style="text-align: center;"><strong>用<span style="color: #339966;">微信</span> OR <span style="color: #337fe5;">领取宝</span> 扫描二维码</strong></p> <p style="text-align: center;"><strong>为本文作者 <span style="color: #ff6600;">打个赏</span></strong></p> <p 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" /></p> <p style="text-align: center;"><span style="color: #999999;">金额随便 快来“打”我呀～</span></p>

心愿本文所述对大家基于wordpress的顺序设计有所协助。

以上就是安达网络工作室关于《WORDPRESS文章中微信打赏功能的2种实现方法》的一些看法。更多内容请查看本栏目更多内容！