A-A+

添加微信/支付宝打赏二维码,网络乞讨开始

2016年09月11日 建站之旅

前天三好公民偶见某知名网站的文章底部添加有打赏按钮,访客可以通过微信或支付宝扫码向作者进行捐助。既然三好公民眼中的高大上网站也可以这么做,那自己再放不下身段倒显得过于矫情了,于是三好公民也考虑为自己的网站添加打赏二维码。

先是在《WordPress大学》找到了由 @tangteng 开发的 WordPress 微信打赏插件,但是三好公民不想使用插件,于是又找到了《陌小雨博客》的《WordPress免插件集成支付宝微信打赏功能》。在把该文提供的代码部署到自己的网站,并做了简单的修改之后,效果还是比较满意的。但是后来在手机上查看网站时,发现样式都丢失了。三好公民怀疑是自适应主题的缘故,但是翻看了一遍主题文件也没弄明白怎么办,所以决定弃用陌小雨提供的代码,干脆摒弃鼠标移动到打赏按钮弹出二维码图片的特效,直接把二维码图片显示出来。效果如图:

添加微信/支付宝打赏二维码,网络乞讨开始

这样就简单了,只需要把二维码图片放到文章底部就可以了。三好公民先是把微信和支付宝的收款二维码合成一张图片,并把文字说明添加到图片上,这样代码可以简洁一些。但后来在手机上查看网站时觉得手机用户如果也想扫码打赏,那么需要先把二维码图片保存到手机上,然后在扫码时选择扫描本机图片,再找到保存的二维码图片才能扫码。这样一来,两张二维码合成的一张图片是无法扫码的。所以三好公民又把微信和支付宝的二维码图片独立地添加到文章底部,说明文字也独立地添加在图片下面。这样一来,代码就复杂了许多。虽然这是最基础的代码没有什么技术含量,但是三好公民还是把代码贴出来,需要的朋友可直接拿去用的(二维码图片的大小做成120px)。

1
2
3
4
5
<div style="margin:10px auto; width:280px; height:160px; border:1px solid #ccc;">
<div style="float:left; margin:10px 10px 0;"><img src="微信二维码图片地址"><div style="text-align:center; font-size:16px;">微信扫码</div></div>
<div style="float:right; margin:10px 10px 0;"><img src="支付宝二维码图片地址"><div style="text-align:center;font-size:16px;">支付宝扫码</div></div>
</div>
<div style="text-align:center; font-size:18px; color:#FF0000;">如本文对你有所帮助,请打赏支持!</div>

就这样,三好公民的网络乞讨正式开始……

微信扫码
支付宝扫码
请打赏,这是对本文作者最实在的帮助和鼓励!

给我留言