【记录】给WordPress网站crifan.com中文章下方添加捐赠按钮

【背景】

之前就已经加过了一个文本小工具的捐赠：

效果是放在网站所有页面的右上角：

但是很明显：

估计看到的人不多

->捐赠的人更少

一直就想要在每一篇的文章下面添加对应的捐赠按钮的，不过一直没去弄。

现在又看到阮一峰：

我的Google Adsense帐户被关 – 阮一峰的网络日志

都弄了，而且弄出来的效果很好：

淘宝平台人民币的图标

PayPal平台美元图标

简洁明了，看上去就有点击去捐赠的冲动,^_^

所以打算：

1.在每篇文章地下也弄个捐赠

2.也模仿阮一峰，弄个好看的图标。

3.另外再加点文字。

【折腾过程】

1.淘宝平台支付系统，虽然已经弄好了，但是：

一个是少了对应好看的图标

二是点击进去后，没有像阮一峰的那个有合适的说明，所以要去弄上去：

【记录】给crifan的支付宝捐赠页面增加说明文字

2.再去制作淘宝捐赠按钮的图标：

不过突然想起来了：

可以到网上搜想要的图标的，然后最后选了合适的：

用于支付宝捐赠的人民币的图标：

http://www.iconpng.com/icon/60967

和用于PayPal捐赠的美元的图标：

http://www.iconpng.com/icon/60966

暂时就用这套图标吧

3.然后再去添加PayPal的捐赠链接。

【记录】想办法弄出一个允许自己添加图标的PayPal捐赠的支付链接

4.然后再像之前添加版权声明：

【整理】给wordpress的文章添加形如转载请注明，本文链接等版权声明信息

那样，去添加对应的捐赠的域：

算了，直接加到版权声明里面，不单独弄出一个域了。

所以，就可以去把支付宝和PayPal的链接，加上各自图标，放到版权声明内部的下方了。

（1）先去参考：

我的Google Adsense帐户被关 – 阮一峰的网络日志

中的“付费支持”部分的html代码：

待会弄出自己的html：

（2）再去上传对应的捐赠按钮图标：

（3）再去修改自己网站的代码：

把：

变成：

然后看看效果：

虽然是可以工作了，但是，很不好看：

（1）格式不好看

（2）图标不好看

5.所以，再去找找其他的图标去：

http://www.iconpng.com/icon/16818

http://www.iconpng.com/icon/9843

然后再微调一下格式：

变成48×48的png的icon，再改动点代码：

再加粗和红色字体（不用另外麻烦css设置颜色了，直接加代码了。。。）：

效果是：

这样看起来，好看多了。也清爽多了。

6.不过，对于上述的捐赠美元，结果点击后，出现异常：

【已解决】打开PayPal捐赠页面时出错：数据与输入的字符集或默认编码不符。如需更多信息，请联系商家。

7.在解决了上述问题后，就可以最终正常打开PayPal捐赠页面了：

【总结】

至此，终于算是添加捐赠按钮了。

其中涉及的代码是：

此处对于我的wordpress的retina主题，是改动：

wp-content/themes/retina/lib/structure/post.php

添加对应的：

变成为：

即可，正常的显示出来，捐赠部分的内容，可以出现支付宝的人民币和PayPal的美元的捐赠按钮了。

转载请注明：在路上 » 【记录】给WordPress网站crifan.com中文章下方添加捐赠按钮