分享一下何先生的 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" ></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://www.hexsen.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://www.hexsen.com/wp-content/themes/dux/img/zhifubao.png"){
imgObj.src="https://www.hexsen.com/wp-content/themes/dux/img/weixinzhifu.png";
}else{
imgObj.src="https://www.hexsen.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 文件我上传到网盘吧，懒得复制的人下载即可。

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

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

文章版权归作者所有，未经允许请勿转载。

THE END

Wordpress教程
# Wordpress教程

评论共47条

友好交流，请勿发纯表情，请勿灌水，违者封号喔

提交

只看作者

- 徐三SEO0
  你好，何老师，我用的是dux主题怎么还是弄不起呢？都是按照你说的方法做的，但还是没调用出来，不显示。就这段代码没调用出来，
  6年前回复 IPV4：中国重庆电信-
- QQ游客0
  dashang.php 这个文件放在哪？？我的主题没有pages文件夹，要放哪？？
  7年前回复 IPV4：中国山东聊城市电信-
- - 何先生作者0
    新建一个文件夹放进去
    7年前@QQ游客回复 cloudflare-
- admit0
  请问怎么实现多用户站点赞赏功能，就是每个用户发表一篇文章，底部都有赞赏功能，对象是文章作者
  7年前回复 IPV4：中国安徽阜阳市电信-
- - 何先生作者0
    我写有思路哦，你找找看吧
    7年前@admit回复 cloudflare-
- BanYuner0
  真心有点复杂但是效果看上去很不错
  8年前回复 IPV4：中国湖北武汉市电信-
- - 何先生作者0
    这个应该难不倒你把。。其实仔细一看就懂，就是css名称复杂了一点
    8年前@BanYuner回复 cloudflare-
- 动感单车0
  我的还没这个功能呢？倒是很想添加上，但是自己不会弄。
  8年前回复 IPV4：中国广西桂林市电信-
- - 何先生作者0
    我的确是有点复杂，张戈哪儿有简单的，可以试试
    8年前@动感单车回复 cloudflare-
- 纯洁博客0
  这个打赏有点儿帅气
  8年前回复 IPV4：中国重庆电信-
- - 何先生作者0
    可以拔过去用用嘛，不过看你主题自带的你都没放，其实放了也没啥用，，摆设
    8年前@纯洁博客回复 cloudflare-
- 电脑打样机0
  感觉没人会给打赏的。。。
  8年前回复 IPV4：中国上海电信-
- 憧憬点滴记忆0
  打赏的这个弹出动画挺不错的，可以 😀
  8年前回复 IPV4：中国四川成都市电信-
- - 何先生作者0
    缺点就是css文件太大了 😥 ，为了html5装逼，也是值了，嘿嘿
    8年前@憧憬点滴记忆回复 cloudflare-
- 夏日博客0
  打赏功能之前做过，几乎没人打赏，所以后来就给去掉了。
  8年前回复 IPV4：中国北京移动-
- - 何先生作者0
    其实摆着也是为了好玩，也没真想谁会那么大方打赏，，除非是那种很火的博客，对网友游实质帮助的内容
    8年前@夏日博客回复 cloudflare-
- 唯历史0
  这么多代码呀
  8年前回复 IPV4：中国北京联通-
- - 何先生作者0
    因为写了特效所以css比较多一点
    8年前@唯历史回复 cloudflare-