分享何先生新版 Wordpress 打赏功能

重要:本文最后更新于,某些文章具有时效性,若有错误或失效,请在下方留言

之前何先生就分享过一篇类似的文章了,感兴趣的可以点下面链接查看。

https://umrhe.com/wx-alipay-ds.html

这次换了一种新样式,比以前更清爽了,也废话不多说了 ,直接上代码。

和之前一样,也是全部代码都写在了一个文件,方便不太会折腾的同学:

<?php if (_hui('qrimg')) { ?>
<style type="text/css">
.hide_box {
	z-index:999;
	filter:alpha(opacity=50);
	background:#666;
	opacity:0.5;
	-moz-opacity:0.5;
	left:0;
	top:0;
	height:99%;
	width:100%;
	position:fixed;
	display:none;
}
.shang_box {
	width:540px;
	height:540px;
	padding:10px;
	background-color:#fff;
	border-radius:10px;
	position:fixed;
	z-index:1000;
	left:50%;
	top:50%;
	margin-left:-280px;
	margin-top:-280px;
	border:1px dotted #dedede;
	display:none;
}
.shang_box img {
	border:none;
	border-width:0;
}
.shang_close { 
	position:absolute;
	top:15px;
	right:20px;
	font:400 24px/24px Arial;
	width:20px;
	height:20px;
	text-align:center;
	padding:0;
	cursor:pointer;
	background:transparent;
	border:0;
	-webkit-appearance:none;
	font-weight:700;
	line-height:20px;
	opacity:.6;filter:alpha(opacity=20) 
}

.shang_tit {
	width:100%;
	height:75px;
	text-align:center;
	line-height:66px;
	color:#a3a3a3;
	font-size:16px;
	font-family:'Microsoft YaHei';
	margin-top:7px;
	margin-right:2px;
}
.shang_tit p {
	color:#a3a3a3;
	text-align:center;
	font-size:16px;
}
.shang_payimg {
	width:180px;
	padding:5px;
	border:6px solid #EA5F00;
	margin:0 auto;
	border-radius:3px;
	height:180px;
}
.shang_payimg img {
	display:block;
	text-align:center;
	width:160px;
	height:160px;
}
.pay_explain {
	text-align:center;
	margin:10px auto;
	font-size:12px;
	color:#545454;
}
.radiobox {
	width:16px;
	height:16px;
	background:url('/wp-content/themes/dux/img/radio2.jpg');
	display:block;
	float:left;
	margin-top:5px;
	margin-right:14px;
}
.checked .radiobox {
	background:url('/wp-content/themes/dux/img/radio1.jpg');
}
.shang_payselect {
	text-align:center;
	margin:0 auto;
	margin-top:40px;
	cursor:pointer;
	height:60px;
	width:280px;
}
.shang_payselect .pay_item {
	display:inline-block;
	margin-right:10px;
	float:left;
}
.shang_info {
	clear:both;
}
.shang_info p,.shang_info a {
	color:#C3C3C3;
	text-align:center;
	font-size:12px;
	text-decoration:none;
	line-height:2em;
}
.shang_logo {
    display: block;
    text-align: center;
    margin: 20px auto;
}

@-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>
<div class="hide_box outbox"> </div>
<div class="shang_box animated flipInY"><i class="shang_close outbox animated fadeInUpBig" title="关闭">×</i> <img class="shang_logo animated fadeInUpBig" src="/wp-content/themes/dux/img/logo.png" alt="umrhe" />
<div class="shang_tit">
<p>感谢您的支持,我们会一直保持!</p>
</div>
<div class="shang_payimg"><img class="animated zoomIn" title="扫一扫" src="/wp-content/themes/dux/img/alipayimg.png" alt="扫码支持" /></div>
<div class="pay_explain">请土豪扫码随意打赏</div>
<div class="shang_payselect">
<div class="pay_item checked" data-id="alipay"><span class="pay_logo"> <img class="animated fadeInDown" src="/wp-content/themes/dux/img/alipay.jpg" alt="支付宝" /></span></div>
<div class="pay_item" data-id="weipay"><span class="pay_logo"> <img class="animated fadeInUp" src="/wp-content/themes/dux/img/wechat.jpg" alt="微信" /></span></div>
</div>
<div class="shang_info">
<p>打开<span id="shang_pay_txt">支付宝</span>扫一扫,即可进行扫码打赏哦</p>
<p>分享从这里开始,精彩与您同在</p>
</div>
</div>
<script>
$(function() {
	 $(".outbox").bind("click",function(){
    		$(".hide_box").fadeToggle();
    		$(".shang_box").fadeToggle();
	  });
	$(".pay_item").bind("click",function(){
		$(this).addClass('checked').siblings('.pay_item').removeClass('checked');
        	var dataid = $(this).attr('data-id');
        	$(".shang_payimg img").attr("src", "/wp-content/themes/dux/img/" + dataid + "img.png");
        	$("#shang_pay_txt").text(dataid == "alipay" ? "支付宝" : "微信");
	  });
});
</script>
<!--?php } ?-->

其中

<?php if (_hui('qrimg')) { ?>和 <?php } ?>

是我在 dux 主题添加的后台设置,你们可以直接删除掉。

/wp-content/themes/dux/img/图片文件路径改为你自己的,只改这一段,其它不要动。

然后就是上传图片:

https://umrhe.com/wp-content/themes/dux/img/radio1.jpg
https://umrhe.com/wp-content/themes/dux/img/radio2.jpg
https://umrhe.com/wp-content/themes/dux/img/alipay.jpg
https://umrhe.com/wp-content/themes/dux/img/wechat.jpg
下载后保存到 img 图片文件夹(注意:图片名字不能改),如果你的主题图片文件夹不是 img,比如叫 image 传进去之后还需要修改上面代码的 img 为 image 。

最后还需要你的两张二维码图片,名字分别改为 支付宝:alipayimg.png 和微信: weipay.png 。(必须!)

然后把修改后的代码保存为 dashang.php 文件保存至主题的任意文件夹,比如何先生用的是 DUX 主题,我在我的主题新建了一个文件夹用于存放自己 DIY 的文件/dux/inc/dashang.php,你也可以跟我一样在主题新建个文件夹,然后把 dashang.php 放进去就行了。

因为何先生使用了 JQ 代码,使用之前请确保你的主题加载了 JQ 库,如果你不知道有没有加载,你就直接在以上代码的< script>标签之前添加以下代码:

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>

然后我们在需要调用的地方添加一下代码,比如 single.php

<div>如果觉得我的文章对您有用,土豪您可以打赏 Biebb 一包红塔山 T.T,和我一样的穷逼,请随意打赏或点赞哟!</div> 
<?php get_template_part( 'inc/dashang' ); ?>
<span class="pay">
    <a class="outbox" style="color: #fff;" title="打赏,支持一下" rel="nofollow">打赏我</a>
</span>

Over。

展开阅读更多
转载请注明出处。
何先生 » 分享何先生新版 Wordpress 打赏功能
Loading...

发表评论

表情
图片 链接 代码

22 评论

  1. 博主,按你的步骤做了 但是没效果出来呢 只有文字出来了

提供最优质的资源集合

立即查看 了解详情