插件给 WordPress 站点添加微信&支付宝打赏功能

最近给“表白驿站”添加了微信和支付宝打赏功能, 使用的是 @tangteng 开发的 WordPress 微信打赏插件,可以在每篇文章下面添加一个微信打赏功能,如果读者觉得这篇文章对他有用,可以用微信扫一扫打赏赞助。因为我想同时添加支付宝打赏,所以自己修改了一下代码,集成付宝打赏。QQ截图20170219133954

小懂君的修改:

  1. 插件作者禁用了在手机端访问生效,而我们的访客大部分都是移动用户,要解决这个问题很简单,打开插件下的文件 wechat-reward.php ,将第68行的
    1
    
    if(is_single() && !wp_is_mobile()){

    修改为

    1
    
    if(is_single()){

    这样我们就会在手机端文章页底部看到打赏功能了。

  2. 由于该插件只支持微信打赏,那我们想要同时支持支付宝打赏,怎么办呢?也很简单,找到文件 wechat-reward.php 的第52-58行,也就是class名为”gave”的div容器里的所有内容,代码如下
    1
    2
    3
    4
    5
    6
    7
    
    <div class="gave" >
                <a href="javascript:;" id="gave">打赏</a>
                <div class="code" id="wechatCode" style="display: none">
                    <img src="[wechat-qrpic]" alt="微信扫一扫支付">
                    <div><img src="[wechat-ico]" alt="微信logo" class="ico-wechat">微信扫一扫,打赏作者吧~</i></div>
                </div>
            </div>

    将以上代码修改为

    1
    2
    3
    4
    5
    6
    7
    8
    
    <div class="gave" >
                <a href="javascript:;" id="gave">打赏</a>
                <div class="code" id="wechatCode" style="display: none">
                    <img src="[wechat-qrpic]" alt="微信扫一扫"> &nbsp;&nbsp;&nbsp;
                    <img src="支付宝收款二维码图片链接" alt="支付宝扫一扫"> 
                    <div><img src="[wechat-ico]" alt="微信logo" class="ico-wechat">微信打赏~</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; <img src="https://i.alipayobjects.com/common/favicon/favicon.ico" alt="支付宝logo" width="15px" height="15px">支付宝打赏~</i></div>
                </div>
            </div>

    保存之后进入插件设置页面,添加自己的微信打赏二维码图片链接
    QQ截图20170219141620
    这时候我们回到前台,会发现排版错乱,所以需要修改下css,打开文件 assets/wechat-reward.css,将第30行的

    1
    
    margin-left: -110px;

    修改为

    1
    
    margin-left: -200px;

    然后第33行

    1
    
    width: 180px;

    修改为

    1
    
    width: 360px;

    最后保存即可,如果需要修改打赏按钮颜色可以编辑第38行

    1
    
    background: #f20050 none repeat scroll 0 0;

最终效果:QQ截图20170219144618
到这里教程就结束了,下面附上我修改的插件地址,因为集成了支付宝功能,所以将插件名更改为“wechat-alipay-reward”,

下载后直接在后台上传zip文件或将插件解压到/wp-content/plugins目录即可,添加支付宝收款二维码请编辑 wechat-reward.php 的第56行,将“支付宝收款二维码图片URL”改为你的收款二维码url。

1
<img src="支付宝收款二维码图片URL" alt="支付宝扫一扫">

原插件下载地址

@tangteng 说明:这个功能是借鉴雷锋网有的文章页下方出现的微信打赏图标,把样式和js挪过来了,给WordPress也开发一个这样的功能,于是做了一个WordPress插件。也当是学习WordPress的插件开发。

1 评论

  1. 璞璞 2018年4月1日 at 下午11:44

    百度云无法访问了。。

发表一条评论:

电子邮件地址不会被公开。 必填项已用*标注