发布价值信息
Wordpress、Software、VPN。。

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

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

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

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

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

<?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="关闭">&times;</i>
						<img class="shang_logo animated fadeInUpBig" src="/wp-content/themes/dux/img/logo.png" alt="mrhee">
                                <div class="shang_tit">
                                    <p>
                                        感谢您的支持,我们会一直保持!</p>
                                </div>
                                <div class="shang_payimg">
                                    <img src="/wp-content/themes/dux/img/alipayimg.png" class="animated zoomIn" alt="扫码支持" title="扫一扫" />
                                </div>
                                <div class="pay_explain">请土豪扫码随意打赏</div>
                                <div class="shang_payselect">
                                    <div class="pay_item checked" data-id="alipay">
                                        <span class="radiobox"></span><span class="pay_logo">
					<img src="/wp-content/themes/dux/img/alipay.jpg" class="animated fadeInDown" alt="支付宝" /></span>
                                    </div>
                                    <div class="pay_item" data-id="weipay">
                                        <span class="radiobox"></span><span class="pay_logo">
					<img src="/wp-content/themes/dux/img/wechat.jpg" class="animated fadeInUp" 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://mrhee.com/wp-content/themes/dux/img/radio1.jpg
https://mrhee.com/wp-content/themes/dux/img/radio2.jpg
https://mrhee.com/wp-content/themes/dux/img/alipay.jpg
https://mrhee.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 rel="nofollow" style="color: #fff" class="outbox" title="打赏,支持一下">打赏我</a>
  </span>

Over。

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

支付宝扫一扫打赏

微信扫一扫打赏

×
打赏作者
未经允许不得转载:何先生 » 分享何先生新版 WordPress 打赏功能
网站维护离不开您的支持,您可以点赞和赞助本站,谢谢
×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

赞助本站
分享到: 更多 (0)

评论 20

  • QQ号(可选)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 沙发

    写的非常详细 :wink:

    小萝博客
    0
    5个月前 (02-16)回复 Google Chrome 55.0.2883.87| Windows 7 x64| 广东省珠海市 电信
    • @小萝博客 欢迎来访,能看懂就好 :mrgreen: ,不懂得地方可以随时留言,

      何先生
      管理员
      5个月前 (02-16)回复 Google Chrome 56.0.2924.87| Windows 10 x64| 四川省成都市 电信
  2. 板凳

    这个很高大上啊

    雅兮网
    2
    5个月前 (02-17)回复 Google Chrome 45.0.2454.101| Windows 7 x64| 广东省珠海市 电信
    • @雅兮网 还行,比之前的好看了,你可以试试呀,虽然没什么人打赏,哈哈

      何先生
      管理员
      5个月前 (02-17)回复 Google Chrome 56.0.2924.87| Windows 10 x64| 四川省成都市 电信
      • @何先生 很有兴趣挂上去,不过对打赏真的是失望,几乎没有

        雅兮网
        2
        5个月前 (02-17)回复 Google Chrome 45.0.2454.101| Windows 7 x64| 广东省珠海市 电信
  3. 地板

    专业,支持支持

    企业咨询
    0
    5个月前 (02-18)回复 Firefox 51.0| Windows 7 x64| 广东省深圳市 电信
  4. 4楼

    很复杂啊

    徒步旅行
    3
    5个月前 (02-18)回复 Google Chrome 21.0.1180.89| Windows 7 x64| 福建省 联通3G统一出口
    • @徒步旅行 不复杂呀。这都够简化的了。。。只需要三步就能搞定的

      何先生
      管理员
      5个月前 (02-19)回复 Google Chrome 56.0.2924.87| Windows 10 x64| 四川省成都市 电信
  5. 5楼

    网站速度不错,在哪里买的

    QQ游客
    0
    5个月前 (02-19)回复 Google Chrome 37.0.0.0| Android 6.0| 广东省东莞市 电信
    • @QQ游客 现在用的垃圾服务器,cloudatcost ,之前用的Vultr VPS这个vps还不错,也挺便宜的。

      何先生
      管理员
      5个月前 (02-19)回复 Google Chrome 56.0.2924.87| Windows 10 x64| 四川省成都市 电信
  6. 6楼

    mark 感谢分享

    菊部
    1
    5个月前 (02-26)回复 Google Chrome 56.0.2924.87| Windows 7 x64| 湖北省武汉市 电信ADSL
  7. 7楼

    我的网站在接入备案,这几天暂时访问不了咯。特此通知啦。

    iEdon
    2
    5个月前 (02-27)回复 Google Chrome 55.0.2883.75| Windows 10 x64| 上海市 乾万网络电信真如数据中心
    • @iEdon 好的 :razz: ,怎么想要备案了,

      何先生
      管理员
      5个月前 (02-27)回复 Google Chrome 56.0.2924.87| Windows 10 x64| 美国
      • @何先生 什么啊,我15年就备案了。昨天提交修改信息。然后今天早上九点就通过了

        iEdon
        2
        5个月前 (02-28)回复 Google Chrome 55.0.2883.75| Windows 10 x64| 上海市 乾万网络电信真如数据中心
  8. 8楼

    这个赞助本站效果很酷炫啊

    BanYuner
    2
    4个月前 (03-12)回复 Google Chrome 56.0.2924.87| Windows 10 x64| 北美地区
    • @BanYuner 和你 一样,哈哈喜欢用一些css特效,加上去虽然好看,但是加载了不少css代码,也可以删除这些特效代码

      何先生
      管理员
      4个月前 (03-12)回复 Google Chrome 56.0.2924.87| Windows 10 x64| 四川省成都市 电信
  9. 9楼

    灰常赞,已经使用上了~ :wink:

    龙笑天
    1
    2个月前 (05-24)回复 Firefox 28.0| Windows 7 x64| 广东省深圳市 电信
出本站二次开发 DUX 主题。邮箱admin#mrhee.com(#换成@)。