WordPress

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

2月 19, 2017

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

小懂君的修改：

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

    修改为

    if(is_single()){

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

  2. 由于该插件只支持微信打赏，那我们想要同时支持支付宝打赏，怎么办呢？也很简单，找到文件 wechat-reward.php 的第52-58行，也就是class名为"gave"的div容器里的所有内容，代码如下 
    
            打赏

    将以上代码修改为

    
            打赏

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

    margin-left: -110px;

    修改为

    margin-left: -200px;

    然后第33行

    width: 180px;

    修改为

    width: 360px;

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

    background: #f20050 none repeat scroll 0 0;

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

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

支付宝扫一扫

原插件下载地址

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