有朋自远方来,不亦乐乎。
纯代码添加打赏功能
原创 龙砚庭  发布于 2年前 ( 2016-11-10 ) 阅读: 1,736 次 抢沙发 A+

分享两段简单的代码(两步走),简单实现Wordpress功能。

ps:不想分享太过复杂的教程,因为有些教程还要涉及js部署。个人感觉——不是每个人都懂得怎么去部署js,而且有些极简的主题甚至没有写专门的js文件。

调用代码

<div class="reward">
<div class="reward-button">赏 <span class="reward-code">
<span class="alipay-code"> <img class="alipay-img" src="支付宝收款二维码图片地址"><b>支付宝</b> </span> 
<span class="wechat-code"> <img class="wechat-img" src="微信收款二维码图片地址"><b>微信</b> </span> 
</span>
</div>
<p class="reward-notice">如果文章对您有帮助,欢迎移至上方按钮打赏龙砚庭</p>
</div>

将以上代码扔到single.php(也就是文章内页文件)合适的位置,一般建议放到<?php the_content(); ?>的后面即可。

ps:注意修改代码里面的收款二维码图片,建议图片不要太大,200*200 px就够了。

样式代码

/*打赏*/
.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:#999;border:1px solid #999;border-radius:50%;background:#fdfdfd;}
/*如果要修改按钮的颜色,请自行修改button里面的background、border、color,它们分别代表背景色、描边颜色、字体颜色*/
.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}

以上代码扔到style.css(请根据自身实际情况而定),想要多样性,就自行修改css样式里面的代码。

(ps:打赏按钮的css样式被我精简了,变色、投影、渐变等花俏的样式都被我去除。)

DEMO

 

庭说

其实如果可以,个人是建议将打赏功能扔到侧边栏就好了,因为一般都是PC端用到扫码打赏的几率高,移动端还是简洁一些比较舒服。

老实说,挂这东西就图个‘标配’而已,很少有访客会自觉打赏,但是不扔一个的话,总觉得‘别人有,自己没有的话,多尴尬啊’。

当然,目前我是没有集合这个功能到龙砚庭博客,因为‘然并卵’的存在。

Principle Team
龙砚庭官方QQ群,做真正意义上的社群!
7人已关注

该文章还没有任何评论,你来说两句吧.

发表评论

莫慌,小狮子正在努力加载评论...