蜗牛789
主机测评与优惠

#WordPress小技巧#纯代码为自己博客添加支付宝/微信打赏功能




提示:如果官网是英文页面,建议使用谷歌浏览器能同步翻译页面。点击下载【谷歌浏览器最新绿色便携版】
注意:部分文章发布时间较长,可能存在未知因素,购买时建议现在本博客搜索商家名称,先充分了解商家动态。
交流:蜗牛粉丝QQ群号1074630828、软文投稿QQ群123345557(进群后投稿每篇5元 原价100元/篇)。
文章目录

很多人的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>

三、效果演示

下面是蜗牛添加成功后的演示效果。如果代码都填写正确后,打赏功能显示错位,请清理下浏览器缓存,蜗牛亲测是没有什么问题的。

About 蜗牛

【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。

赞(33) 打赏
未经允许不得转载:蜗牛789 » #WordPress小技巧#纯代码为自己博客添加支付宝/微信打赏功能
分享到: 更多 (0)


评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏