![图片[1]-分享何先生新版 WordPress 打赏功能-何先生](https://images.hexsen.com/i/wp-content/uploads/2019/12/f6cd61f9a1daa.jpg)
之前何先生就分享过一篇类似的文章了，感兴趣的可以点下面链接查看。
https://www.hexsen.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="hexsen" />
<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://www.hexsen.com/wp-content/themes/dux/img/radio1.jpghttps://www.hexsen.com/wp-content/themes/dux/img/radio2.jpghttps://www.hexsen.com/wp-content/themes/dux/img/alipay.jpghttps://www.hexsen.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。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![表情[wozuimei]-何先生](https://www.hexsen.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
- 最新
- 最热
只看作者