wordpress添加文章打赏按钮

本文实例讲述了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的程序设计有所帮助。

未经允许不得转载：阿布家园 » wordpress添加文章打赏按钮