WORDPRESS文章中微信打赏功能的2种实现方法
WORDPRESS文章中微信打赏功能的2种实现方法
发布时间:2016-12-23 来源:查字典编辑
摘要:本文实例讲述了WORDPRESS文章中微信打赏功能的2种实现方法。分享给大家供大家参考,具体如下:打赏功能功能就是给我们一些资助了,写博客不...

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

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

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

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

//如果是文章页并且不是手机访问,在文章末尾添加一段html代码

function add_pay($content) {

$pay = <<<PAY

<div >

<a href="javascript:;" id="gave">打赏</a>

<div id="wechatCode">

<img src="http://www.jb51.netwp-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);

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

在上行添加如下代码:

<div><strong>用<span>微信</span> OR <span>支付宝</span> 扫描二维码</strong></div> <div><strong>为本文作者 <span>打个赏</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><span>金额随意 快来“打”我呀~</span></div>

3.修改后保存上传即可,当然你也可以根据你的喜好选择将此段代码放置到何处.

希望本文所述对大家基于wordpress的程序设计有所帮助。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新WordPress学习
热门WordPress学习
CMS教程子分类