WORDPRESS文章中微信打赏功能的2种实现方法

本文实例讲述了WORDPRESS文章中微信打赏功能的2种实现方法。分享给大家供大家参考，具体如下：X8R办公区 - 实用经验教程分享！

打赏功能功能就是给我们一些资助了,写博客不容易所以会给一些内容与说明了,下面我们就一起来看2种给WORDPRESS文章添加微信打赏功能实现方法.X8R办公区 - 实用经验教程分享！

方法一、比较专业也是比较复杂了X8R办公区 - 实用经验教程分享！

给WORDPRESS文章添加微信打赏功能,如果你的博文给别人有帮助,也许会有热心的读者给你打赏,首先在WORDPRESS主题的functions.php末尾添加如下代码.复制代码代码如下://如果是文章页并且不是手机访问，在文章末尾添加一段html代码function add_pay($content) {$pay = PAYdiv > a href="javascript：;" id="gave">打赏/a> div 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" >微信扫一扫，打赏作者吧～/i>/div> /div>/div>PAY; if(is_single() && !wp_is_mobile()){ $content .= $pay; } return $content;}add_filter( 'the_content', 'add_pay',10);X8R办公区 - 实用经验教程分享！

这个函数的作用是:如果是文章页并且不是手机访问,在文章末尾添加一段html代码.X8R办公区 - 实用经验教程分享！

在主题的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>X8R办公区 - 实用经验教程分享！

在模板文章的页面如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>X8R办公区 - 实用经验教程分享！

这样就OK了。X8R办公区 - 实用经验教程分享！

别忘了把微信支付二维码替换成自己的哦。X8R办公区 - 实用经验教程分享！

其实更好的方式是做成WORDPRESS插件的形式，没时间折腾，有空可以构想一下用插件实现，这样可以方便大家直接安装了。X8R办公区 - 实用经验教程分享！

方法二、超级简单就像文章下面所说没技术就这样来设置。X8R办公区 - 实用经验教程分享！

本人技术有限，没有做虎嗅那种按钮形式。我是直接在WORDPRESS模板中添加代码，一劳永逸，这样就不用每次写文章都要粘贴复制一遍代码。本文的同时显示微信支付和支付宝的二维码，虎嗅只显示一种支付码，相信不是所有人都用微信支付或支付宝吧，所以多一种选择多一个收入渠道。不过这适用于像我这种全站只是我一个人写文章的。样式参考文章正文内容下方。X8R办公区 - 实用经验教程分享！

方法:X8R办公区 - 实用经验教程分享！

1.修改相应风格模板的single.php 文件X8R办公区 - 实用经验教程分享！

2.找到X8R办公区 - 实用经验教程分享！

代码 1 !-- .entry-content -->X8R办公区 - 实用经验教程分享！

在上行添加如下代码:X8R办公区 - 实用经验教程分享！

复制代码代码如下: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 src="微信二维码图片地址" alt="pay_weixin" width="150" height="150" />img src="支付宝二维码地址" alt="pay_weixin" width="150" height="150" />/div> div style="text-align: center;">span style="color: #999999;">金额随意 快来“打”我呀～/span>/div>3.修改后保存上传即可,当然你也可以根据你的喜好选择将此段代码放置到何处.X8R办公区 - 实用经验教程分享！

希望本文所述对大家基于WORDPRESS的程序设计有所帮助。X8R办公区 - 实用经验教程分享！

以上方法由办公区教程网编辑摘抄整理自互联网可供大家参考！X8R办公区 - 实用经验教程分享！