WordPress小技巧 纯代码为自己博客添加支付宝/微信打赏功能
 |  |  |  |
| 【性价之王】 | 【线路之王】 | 【价格之王】 | 【配置之王】 |
| 【免费之王】 | 【香港首推】 | 【梯子之王】 | 【独服之王】 |
很多人的WordPress博客在文章尾部都有打赏功能，让读者可以直接通过扫描微信、支付宝二维码进行赞助，毕竟维护博客，编写博文需要花费不少的精力，大多数朋友和蜗牛一样都是利用自己业余时间对博客进行管理与维护（如果大家觉得蜗牛789文章能起到一定帮助作用，也欢迎对蜗牛进行打赏，目前大家可以通过支付宝扫红包活动对蜗牛进行打赏，无需自己掏腰包#每日#支付宝扫码最高领取99元红包 可用于店面消费或捐赠蜗牛）。
在此文章中蜗牛为大家分享一个纯代码为自己WordPress博客添加支付宝打、微信打赏功能的方法，不但美观而且实用，适合所有WordPress主题。此方法并非蜗牛原创，转自@老蒋，而老蒋也是根据WPDAXUE博客的打赏功能提取的。
一、添加CSS样式方法很简单，我们只需找到主题CSS文件，把下面代码添加进去即可。一般把代码放到“main.css”文件，当然我们需要注意是否与现有的CSS命令有冲突，如果有则需要自己修改。
.reward{padding:5px 0}.reward .reward-notice{font-size:14px;line-height:14px;margin:15px auto;text-align:center}.reward .reward-button{font-size:28px;line-height:58px;position:relative;display:block;width:60px;height:60px;margin:0 auto;padding:0;-webkit-user-select:none;text-align:center;vertical-align:middle;color:#fff;border:1px solid #f1b60e;border-radius:50%;background:#fccd60;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fccd60),color-stop(100%,#fbae12),color-stop(100%,#2989d8),color-stop(100%,#207cca));background:-webkit-linear-gradient(top,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%);background:linear-gradient(to bottom,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%)}.reward .reward-code{position:absolute;top:-220px;left:50%;display:none;width:350px;height:200px;margin-left:-175px;padding:15px;border:1px solid #e6e6e6;background:#fff;box-shadow:0 1px 1px 1px #efefef}.reward .reward-button:hover .reward-code{display:block}.reward .reward-code span{display:inline-block;width:150px;height:150px}.reward .reward-code span.alipay-code{float:left}.reward .reward-code span.alipay-code a{padding:0}.reward .reward-code span.wechat-code{float:right}.reward .reward-code img{display:inline-block;float:left;width:150px;height:150px;margin:0 auto;border:0}.reward .reward-code b{font-size:14px;line-height:26px;display:block;margin:0;text-align:center;color:#666}.reward .reward-code b.notice{line-height:2rem;margin-top:-1rem;color:#999}.reward .reward-code:after,.reward .reward-code:before{position:absolute;content:\'\';border:10px solid transparent}.reward .reward-code:after{bottom:-19px;left:50%;margin-left:-10px;border-top-color:#fff}.reward .reward-code:before{bottom:-20px;left:50%;margin-left:-10px;border-top-color:#e6e6e6}二、添加调用代码然后到主题的文章页，一般是“single.php”文件添加调用代码，具体添加到什么位置，大家根据自己需要测试。测试前最好先备份一份“single.php”文件。记得把“支付宝收款二维码地址200*200PX”、“微信收款二维码地址200*200PX”改成你的微信、支付宝收款二维码地址。
<div class=\"reward\"><div class=\"reward-button\">赏 <span class=\"reward-code\"> <span class=\"alipay-code\"> <img class=\"alipay-img\" src=\"支付宝收款二维码地址200*200PX\"><b>支付宝扫码打赏</b> </span> <span class=\"wechat-code\"> <img class=\"wechat-img\" src=\"微信收款二维码地址200*200PX\"><b>微信打赏</b> </span> </span></div><p class=\"reward-notice\">如果文章对您有帮助，欢迎移至上方按钮打赏蜗牛</p></div>三、效果演示下面是蜗牛添加成功后的演示效果。如果代码都填写正确后，打赏功能显示错位，请清理下浏览器缓存，蜗牛亲测是没有什么问题的。
[wordpress]历史优惠活动内容
猜你可能想看的VPS
- 促销 标准互联→圣何塞 CN2 GIA 年付 300 元 洛杉矶 CN2全球[VPS测评]
- 补货通知 HostDare→CN2 GIA 线路 VPS 最低$34.4全球[VPS测评]
- 一个坐标上面有 NS 和辕辙是什么成语？全球[VPS测评]
- Call to undefined function openssl_s全球[VPS测评]
- 价格高-Akkocloud:月付 120 元 1G 内存 德国原全球[VPS测评]
- JQuery 自动调整 textarea 内容高度全球[VPS测评]
- 超便宜 PacificRack→1 核 512M 内存 10G 硬盘 5全球[VPS测评]
- 补货 CloudCone→年付$15 1 核 512M 内存 10G 硬全球[VPS测评]
- 无忧云￥36.12 月 1 核 1G 内存 50G 硬盘 1Mbps 深香港VPS[主机]
- 2020 年最新日本 VPS 服务器商家介绍及推荐日本VPS[主机]
- 腾讯→我的医保 免费领取 3 个现金红包 秒到微信零钱全球[VPS测评]
- raksmart→美国不限流量服务器（物理机） 100M 带宽~$61 美国VPS[主机]
- 搬瓦工新增日本大阪软银机房 DC6 CN2 GIA-E 可转入日本机房日本VPS[主机]
- WordPress响应式主题Frontier，体积只有278 KB全球[VPS测评]
- Time4VPS立陶宛抗诉无视版权 大硬盘存储VPS，256G硬盘，2T全球[VPS测评]
- DMIT洛杉矶新上sPro方案自带Cloudflare防御/CN2GIA全球[VPS测评]
- 昱格云 1核心 1024M内存 10G SSD 1000G单向流量 10全球[VPS测评]
- 漂亮的Css3响应侧边栏菜单,动画风格侧边栏导航菜单样式全球[VPS测评]
- 中概股扫描网传拼多多正筹备跨境电商平台首站登陆美国美国VPS[主机]
- 为什么要拥有一台VPS？全球[VPS测评]
- 74块钱一年的云服务器可以用来做什么？全球[VPS测评]
- 跨境电商周报丨拼多多布局跨境电商平台；Shopify将推出新平台支持网红全球[VPS测评]
- 快速云：云计算分类和云计算的特点全球[VPS测评]
- 56云服务器怎么样?56云免备案香港云服务器价格多少钱?香港VPS[主机]
- 磐逸云：全场8折优惠,1核1G香港套餐月付24元,日本NNT线路套餐,月日本VPS[主机]
- 云米科技：香港/美国/日本等海外免备案vps云服务器,最低13元/月日本VPS[主机]
- 跨境电商周报丨拼多多布局跨境电商平台；Shopify将推出新平台支持网红全球[VPS测评]
- Ceraus：香港CN2云服务器,香港GIA VPS去程移动回程路线,月香港VPS[主机]
- 速云互联：香港GT大带宽vps/香港CN2云服务器/洛杉矶200G高防v香港VPS[主机]
- 云基：香港/洛杉矶CN2 GIA服务器促销,3750元/月起;欧洲大盘鸡香港VPS[主机]
转载请注明原文地址:http://140.238.13.167:12355/read-149759.html