分享一下何先生的 wordpress 打赏功能

我只写了适合 dux 主题的代码,因为 dux 自带了一个弹窗插件,顺便改造了一下,如果你的主题不是 dux 可以自己搜索一下弹窗插件稍微修改一下弹出的 html 就可以了。

这个功能你们在本文下方点赞旁就能试用啦,土豪可以随手打赏,哈哈,是不是觉得很赞?

之前在张戈博客看到一篇分享打赏功能的文章,受了启发,我也把本站的打赏分享一下吧,加入了不少特效,也很时尚大气,喜欢炫酷的朋友可以试试哦!

我不是和张戈一样有一大堆道理,俗称废话,哈哈,张戈大大得罪了,开个玩笑,希望莫生气,说这句话是因为很多人只看结果了,我也就少废话了,直接进入正题。

我已经把所有的东西就写进一个文件了:

其中 if (_hui('qrimg'))是我在后台写的开关,你们可以忽略掉。把一下代码保存为 dashang.php 保存在 dux 主题的 pages 文件夹

<!--?php if (_hui('qrimg')) { ?-->
   <style type="text/css">
   <!--
.mod-article__reward {
	margin-top:20px
}
.mod-article__reward .mod-article__reward-title {
	display:block;
	margin-bottom:10px;
	line-height:24px;
	font-size:14px;
	color:#999;
	text-align:center
}
.mod-article__reward .mod-article__reward-btn {
	display:block;
	width:88px;
	height:26px;
	line-height:26px;
	margin:0 auto;
	text-align:center;
	background-color:#ff6a55;
	border:1px solid #ff6a55;
	color:#fff;
	font-size:15px;
	border-radius:4px;
	-webkit-transition:all .2s ease;
	transition:all .2s ease
}
.mod-article__reward .mod-article__reward-btn:hover {
	border:1px solid #ff6a55;
	color:#ff6a55;
	background-color:#fff;
	text-decoration:none
}
.mod-article__reward .mod-article__reward-mask {
	display:none;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.4);
	z-index:10000
}
.mod-article__reward .mod-article__reward-content {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-200px;
	margin-top:-200px;
	width:320px;
	height:auto;
	background-color:#fff;
	border-radius:4px
}
.mod-article__reward .mod-article__reward-content i {
	width:30px;
	height:30px;
	position:absolute;
	right:-15px;
	top:-15px;
	background-color:#eee;
	border-radius:50%;
	cursor:pointer;
	-webkit-transition:all .25s linear;
	transition:all .25s linear
}
.mod-article__reward .mod-article__reward-content i:after,.mod-article__reward .mod-article__reward-content i:before {
	content:"";
	position:absolute;
	width:2px;
	height:20px;
	left:14px;
	bottom:5px;
	background:#ff6a55;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	-webkit-transform:rotate(rotate(45deg)) scale(1) skew(1deg) translate(10px);
	transform:rotate(rotate(45deg)) scale(1) skew(1deg) translate(10px)
}
.mod-article__reward .mod-article__reward-content i:after {
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	-webkit-transform:rotate(rotate(-45deg)) scale(1) skew(1deg) translate(10px);
	transform:rotate(rotate(-45deg)) scale(1) skew(1deg) translate(10px)
}
.mod-article__reward .mod-article__reward-content i:hover {
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
	-webkit-transform:rotate(rotate(180deg)) scale(1) skew(1deg) translate(10px);
	transform:rotate(rotate(180deg)) scale(1) skew(1deg) translate(10px);
	background-color:#fff
}
.mod-article__reward .mod-article__reward-header {
	padding:10px 0;
	background-color:#ff6a55;
	border-top-left-radius:4px;
	border-top-right-radius:4px
}
.mod-article__reward .mod-article__reward-header span {
	display:block;
	color:#fff;
	font-size:14px;
	line-height:24px;
	text-align:center
}
.mod-article__reward .mod-article__reward-header img {
	display:block;
	width:80px;
	height:80px;
	margin:5px auto;
	border-radius:50%;
	border:2px solid hsla(0,0%,100%,.6);
	box-shadow:0 0 5px #fff
}
.mod-article__reward .mod-article__reward-main {
	padding:10px 0;
	text-align:center
}
.mod-article__reward .mod-article__reward-main h5 {
	color:#000;
	font-size:18px
}
.mod-article__reward .mod-article__reward-main h5 span {
	color:#000;
	font-size:24px
}
.mod-article__reward .mod-article__reward-main img {
	width:200px;
	height:200px;
	margin:0 auto;
	display:block
}
.mod-article__reward .mod-article__reward-main a {
	width:64px;
	display:block;
	margin:5px auto;
	color:#39c;
	text-decoration:none
}
.mod-article__reward .mod-article__reward-main span {
	display:inline-block;
	font-size:14px;
	color:#999
}


@-webkit-keyframes flipInY {
	0% {
		-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);
		transform:perspective(400px) rotate3d(0,1,0,90deg);
		opacity:0
	}
	0%,40% {
		-webkit-animation-timing-function:ease-in;
		animation-timing-function:ease-in
	}
	40% {
		-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);
		transform:perspective(400px) rotate3d(0,1,0,-20deg)
	}
	60% {
		-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);
		transform:perspective(400px) rotate3d(0,1,0,10deg);
		opacity:1
	}
	80% {
		-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);
		transform:perspective(400px) rotate3d(0,1,0,-5deg)
	}
	to {
		-webkit-transform:perspective(400px);
		transform:perspective(400px)
	}
}
@keyframes flipInY {
	0% {
		-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);
		transform:perspective(400px) rotate3d(0,1,0,90deg);
		opacity:0
	}
	0%,40% {
		-webkit-animation-timing-function:ease-in;
		animation-timing-function:ease-in
	}
	40% {
		-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);
		transform:perspective(400px) rotate3d(0,1,0,-20deg)
	}
	60% {
		-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);
		transform:perspective(400px) rotate3d(0,1,0,10deg);
		opacity:1
	}
	80% {
		-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);
		transform:perspective(400px) rotate3d(0,1,0,-5deg)
	}
	to {
		-webkit-transform:perspective(400px);
		transform:perspective(400px)
	}
}
.flipInY {
	-webkit-backface-visibility:visible!important;
	backface-visibility:visible!important;
	-webkit-animation-name:flipInY;
	animation-name:flipInY
}

.animated {
	-webkit-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both
}
.animated.infinite {
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite
}
.short {
	-webkit-animation-duration:.6s;
	animation-duration:.6s
}
.animated.hinge {
	-webkit-animation-duration:2s;
	animation-duration:2s
}
@-webkit-keyframes fadeIn {
	0% {
		opacity:0
	}
	to {
		opacity:1
	}
}
@keyframes fadeIn {
	0% {
		opacity:0
	}
	to {
		opacity:1
	}
}
.fadeIn {
	-webkit-animation-name:fadeIn;
	animation-name:fadeIn
}
@-webkit-keyframes fadeInDown {
	0% {
		opacity:0;
		-webkit-transform:translate3d(0,-100%,0);
		transform:translate3d(0,-100%,0)
	}
	to {
		opacity:1;
		-webkit-transform:none;
		transform:none
	}
}
@keyframes fadeInDown {
	0% {
		opacity:0;
		-webkit-transform:translate3d(0,-100%,0);
		transform:translate3d(0,-100%,0)
	}
	to {
		opacity:1;
		-webkit-transform:none;
		transform:none
	}
}
.fadeInDown {
	-webkit-animation-name:fadeInDown;
	animation-name:fadeInDown
}
@-webkit-keyframes fadeInUp {
	0% {
		opacity:0;
		-webkit-transform:translate3d(0,100%,0);
		transform:translate3d(0,100%,0)
	}
	to {
		opacity:1;
		-webkit-transform:none;
		transform:none
	}
}
@keyframes fadeInUp {
	0% {
		opacity:0;
		-webkit-transform:translate3d(0,100%,0);
		transform:translate3d(0,100%,0)
	}
	to {
		opacity:1;
		-webkit-transform:none;
		transform:none
	}
}
.fadeInUp {
	-webkit-animation-name:fadeInUp;
	animation-name:fadeInUp
}
@-webkit-keyframes fadeOut {
	0% {
		opacity:1
	}
	to {
		opacity:0
	}
}
@keyframes fadeOut {
	0% {
		opacity:1
	}
	to {
		opacity:0
	}
}
.fadeOut {
	-webkit-animation-name:fadeOut;
	animation-name:fadeOut
}
@-webkit-keyframes fadeOutDown {
	0% {
		opacity:1
	}
	to {
		opacity:0;
		-webkit-transform:translate3d(0,100%,0);
		transform:translate3d(0,100%,0)
	}
}
@keyframes fadeOutDown {
	0% {
		opacity:1
	}
	to {
		opacity:0;
		-webkit-transform:translate3d(0,100%,0);
		transform:translate3d(0,100%,0)
	}
}
.fadeOutDown {
	-webkit-animation-name:fadeOutDown;
	animation-name:fadeOutDown
}
@-webkit-keyframes fadeOutUp {
	0% {
		opacity:1
	}
	to {
		opacity:0;
		-webkit-transform:translate3d(0,-100%,0);
		transform:translate3d(0,-100%,0)
	}
}
@keyframes fadeOutUp {
	0% {
		opacity:1
	}
	to {
		opacity:0;
		-webkit-transform:translate3d(0,-100%,0);
		transform:translate3d(0,-100%,0)
	}
}
.fadeOutUp {
	-webkit-animation-name:fadeOutUp;
	animation-name:fadeOutUp
}
@-webkit-keyframes zoomIn {
	0% {
		opacity:0;
		-webkit-transform:scale3d(.3,.3,.3);
		transform:scale3d(.3,.3,.3)
	}
	50% {
		opacity:1
	}
}
@keyframes zoomIn {
	0% {
		opacity:0;
		-webkit-transform:scale3d(.3,.3,.3);
		transform:scale3d(.3,.3,.3)
	}
	50% {
		opacity:1
	}
}
.zoomIn {
	-webkit-animation-name:zoomIn;
	animation-name:zoomIn
}
@-webkit-keyframes zoomOut {
	0% {
		opacity:1
	}
	50% {
		-webkit-transform:scale3d(.3,.3,.3);
		transform:scale3d(.3,.3,.3)
	}
	50%,to {
		opacity:0
	}
}
@keyframes zoomOut {
	0% {
		opacity:1
	}
	50% {
		-webkit-transform:scale3d(.3,.3,.3);
		transform:scale3d(.3,.3,.3)
	}
	50%,to {
		opacity:0
	}
}
.zoomOut {
	-webkit-animation-name:zoomOut;
	animation-name:zoomOut
}
@-webkit-keyframes fadeInUpBig {
	0% {
		opacity:0;
		-webkit-transform:translate3d(0,2000px,0);
		transform:translate3d(0,2000px,0)
	}
	to {
		opacity:1;
		-webkit-transform:none;
		transform:none
	}
}
@keyframes fadeInUpBig {
	0% {
		opacity:0;
		-webkit-transform:translate3d(0,2000px,0);
		transform:translate3d(0,2000px,0)
	}
	to {
		opacity:1;
		-webkit-transform:none;
		transform:none
	}
}
.fadeInUpBig {
	-webkit-animation-name:fadeInUpBig;
	animation-name:fadeInUpBig
}
    -->
   </style></pre>
<div id="pay" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="margin-top: 250px;">
<div class="modal-body">
<div class="mod-article__reward js_article_content mod-article__content">
<div class="mod-article__reward-content animated flipInY"><button class="close js_reward_close" type="button" data-dismiss="modal" aria-hidden="true">×</button>
<div class="mod-article__reward-header">赞赏作者 <figure><img class="animated fadeIn" src="https://secure.gravatar.com/avatar/9e1b4dad23ca273150d0a8b584704cb3?s=160&d=mm" alt=""></figure> <!--?php bloginfo('name') ?--></div>
<div class="mod-article__reward-main">
<h5>¥ <span id="qrcode_text" class="js_reward_count">支付宝</span></h5>
<figure><img id="qrcode_pic" class="js_reward_qrcode animated zoomIn" src="https://umrhe.com/wp-content/themes/dux/img/zhifubao.png"></figure> <a class="js_change_reward" type="button">换个方式支付</a> 扫一扫赞赏</div>
</div>
</div>
</div>
</div>
<!-- /.modal-content --></div>
<!-- /.modal-dialog -->
<script>
function change_pic(){
var imgObj = document.getElementById("qrcode_pic");
var label = document.getElementById("qrcode_text").innerHTML;
if(imgObj.getAttribute("src",2)=="https://umrhe.com/wp-content/themes/dux/img/zhifubao.png"){
imgObj.src="https://umrhe.com/wp-content/themes/dux/img/weixinzhifu.png";
}else{
imgObj.src="https://umrhe.com/wp-content/themes/dux/img/zhifubao.png";
}
if(label == ("支付宝")){
    document.getElementById("qrcode_text").innerHTML="微信支付";
}
else{
    document.getElementById("qrcode_text").innerHTML="支付宝";
}
}
</script>
<!--?php } ?-->

然后在 single.php 文件添加一下代码:

<div class="mod-article__reward-title">如果觉得我的文章对您有用,土豪您可以打赏</div>
  <!--?php get_template_part( 'inc/dashang' ); ?-->
  <span class="pay">
    <a data-toggle="modal" data-target="#pay"><i class="fa fa-jpy"></i> 打  赏</a>
  </span> 

dashang.php 文件我上传到网盘吧,懒得复制的人下载即可。

记得把其中图片换成你自己的。

添加的位置就自己随便找啦,我也不是一个很会写文章的人,写的很粗糙,如果有什么问题可以邮箱联系我,或者下方留言。

转载请注明出处。
何先生 » 分享一下何先生的 wordpress 打赏功能
Loading...

发表评论

表情
图片 链接 代码

47 评论

  1. 你好,何老师,我用的是dux主题怎么还是弄不起呢?都是按照你说的方法做的,但还是没调用出来,不显示。 就这段代码没调用出来,

  2. dashang.php 这个文件放在哪??我的主题没有pages文件夹,要放哪??

    1. @QQ游客 新建一个文件夹放进去

  3. 请问怎么实现多用户站点赞赏功能,就是每个用户发表一篇文章,底部都有赞赏功能,对象是文章作者

    1. @admit 我写有思路哦,你找找看吧

  4. 真心有点复杂 但是效果看上去很不错

    1. @BanYuner 这个应该难不倒你把。。其实仔细一看就懂,就是css名称复杂了一点

  5. 我的还没这个功能呢?倒是很想添加上,但是自己不会弄。

    1. @动感单车 我的确是有点复杂,张戈哪儿有简单的,可以试试

  6. 这个打赏有点儿帅气

    1. @纯洁博客 可以拔过去用用嘛,不过看你主题自带的你都没放,其实放了也没啥用,,摆设

  7. 感觉没人会给打赏的。。。

  8. 打赏的这个弹出动画挺不错的,可以 :grin:

    1. @憧憬点滴记忆 缺点就是css文件太大了 :cry: ,为了html5装逼,也是值了,嘿嘿

  9. 打赏功能之前做过,几乎没人打赏,所以后来就给去掉了。

    1. @夏日博客 其实摆着也是为了好玩,也没真想谁会那么大方打赏,,除非是那种很火的博客,对网友游实质帮助的内容 :mrgreen:

提供最优质的资源集合

立即查看 了解详情