频道导航

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

2018-12-28 wordpress 脚本之家

前端之家收集整理的这篇文章主要介绍了WORDPRESS文章中微信打赏功能的2种实现方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例讲述了wordpress 文章中微信打赏功能的2种实现方法。分享给大家供大家参考，具体如下：

打赏功能功能就是给我们一些资助了,写博客不容易所以会给一些内容与说明了,下面我们就一起来看2种给wordpress 文章添加微信打赏功能实现方法.

方法一、比较专业也是比较复杂了

给wordpress 文章添加微信打赏功能,如果你的博文给别人有帮助,也许会有热心的读者给你打赏,首先在wordpress 主题的functions.PHP末尾添加如下代码.

PHP;toolbar:false">//如果是文章页并且不是手机访问，在文章末尾添加一段HTML代码
function add_pay($content) {
$pay = <<
打赏

微信扫一扫，打赏作者吧～

PAY; if(is_single() && !wp_is_mobile()){ $content .= $pay; } return $content; } add_filter( 'the_content', 'add_pay',10);

这个函数的作用是:如果是文章页并且不是手机访问,在文章末尾添加一段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%;
}
在模板文章的页面如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';
}

这样就OK了。

别忘了把微信支付二维码替换成自己的哦。

其实更好的方式是做成wordpress 插件的形式，没时间折腾，有空可以构想一下用插件实现，这样可以方便大家直接安装了。

方法二、超级简单就像文章下面所说没技术就这样来设置。

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

方法:

1.修改相应风格模板的single.PHP 文件

2.找到代码

在上行添加如下代码: