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

分享一下何先生的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>
    <div class="modal fade" id="pay" 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 type="button" class="close js_reward_close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <div class="mod-article__reward-header">
                                                <span>赞赏作者</span>
                                                <img class="animated fadeIn" src="https://secure.gravatar.com/avatar/9e1b4dad23ca273150d0a8b584704cb3?s=160&d=mm" alt="">
                                                <span><?php bloginfo('name') ?></span>
                                            </div>
                                            <div class="mod-article__reward-main">
                                                <h5>¥ <span class="js_reward_count" id="qrcode_text">支付宝</span></h5>
                                                <img src="https://mrhee.com/wp-content/themes/dux/img/zhifubao.png" class="js_reward_qrcode animated zoomIn" id="qrcode_pic">
						<a type="button" class="js_change_reward" onClick="change_pic()">换个方式支付</a>
                                                <span>扫一扫赞赏</span>
                                                <ul class="js_reward_data ui-d-n">
                                                </ul>
                                            </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://mrhee.com/wp-content/themes/dux/img/zhifubao.png"){
imgObj.src="https://mrhee.com/wp-content/themes/dux/img/weixinzhifu.png";
}else{
imgObj.src="https://mrhee.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">如果觉得我的文章对您有用,土豪您可以打赏Biebb一包红塔山T.T,和我一样的穷逼,请随意打赏或点赞哟!</div>
  <?php get_template_part( 'inc/dashang' ); ?>
  <span class="pay">
    <a data-toggle="modal" data-target="#pay"><i class="fa fa-jpy"></i>&nbsp;打&nbsp;&nbsp;赏</a>
  </span> 

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

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

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

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

支付宝扫一扫打赏

微信扫一扫打赏

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

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

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

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

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

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

评论 44

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

    这个效果非常赞 :roll:

    龙笑天
    1
    8个月前 (11-30)回复 unknow| unknow| 广东省深圳市 电信
  2. 板凳

    不错,这个效果很不错的说!博主是新一代的折腾王子!

    Koolight
    1
    8个月前 (11-30)回复 unknow| unknow| 湖北省 联通
    • @Koolight :mrgreen: 以前做过站,两年前关闭了,现在又没事了,又来博客圈混了。。

      Biebb
      管理员
      8个月前 (12-01)回复 unknow| unknow| 四川省成都市 电信
  3. 地板

    特效非常赞,耳目一新的前端样式

    雅兮网
    2
    8个月前 (12-01)回复 unknow| unknow| 广东省珠海市 电信
  4. 4楼

    这个打赏功能真的很酷炫,非常不错。不过很多打赏功能都是挂上而已,没什么人打赏

    懿古今
    3
    8个月前 (12-01)回复 unknow| unknow| 广西南宁市 /桂林市
    • @懿古今 :mad: 是啊,不过就是折腾着玩的,其实也没想谁真的会赞助,如果真的有些文章帮到了一些朋友,可能会顺手撒一把钱,哈哈意淫一下。

      Biebb
      管理员
      8个月前 (12-01)回复 unknow| unknow| 四川省 电信
  5. 5楼

    装作看得懂的样子来评论下

    企业咨询
    1
    8个月前 (12-01)回复 unknow| unknow| 广东省深圳市 电信
  6. 6楼

    非常炫的打赏效果

    韩娱部落
    0
    8个月前 (12-01)回复 unknow| unknow| 加拿大
  7. 7楼

    样式很好,不过打赏的少

    小萝博客
    1
    8个月前 (12-01)回复 unknow| unknow| 广东省珠海市 电信
  8. 8楼

    贵站的.online域名好少见啊!

    博客博物馆
    2
    8个月前 (12-02)回复 unknow| unknow| 海南省海口市 电信
    • @博客博物馆 双十一没事注册着玩的,以前的域名找不回来了。就随便注册了一个

      Biebb
      管理员
      8个月前 (12-02)回复 unknow| unknow| 四川省 电信
    • @博客博物馆 博客圈确实比较少,但是你的中文域名更少了,,,

      Biebb
      管理员
      8个月前 (12-02)回复 unknow| unknow| 四川省 电信
      • @Biebb 哈哈,确实,问一下这个主题的评论等级和那些浏览器等信息是在哪个文件添加的?

        博客博物馆
        2
        8个月前 (12-02)回复 unknow| unknow| 安徽省合肥市 电信ADSL
        • @博客博物馆 显示浏览器国家等是我自己写的,等级的话是拔知更鸟的并且优化了一下,需要在函数模版和评论列表添加的

          Biebb
          管理员
          8个月前 (12-02)回复 unknow| unknow| 四川省 电信
          • @Biebb 博主这个是大前端的模板吧?我就是不知道这个模板的评论列表在哪个文件,添加在哪个位置,之前找了半天是找到评论列表文件,但是不知道哪个位置

            博客博物馆
            2
            8个月前 (12-02)回复 unknow| unknow| 广东省广州市 铁通
    • @博客博物馆 话说中文域名好麻烦,还的转码。。

      Biebb
      管理员
      8个月前 (12-02)回复 unknow| unknow| 四川省 电信
      • @Biebb 有时候就需要转码,其实在chrome浏览器里直接复制上面的地址就是转码后的了。那个文件我找不到,我以为大前端的主题都一样,我用的是tob 0.3主题,关键是这个插入代码的位置找不到。你这个在什么代码后面插入?

        博客博物馆
        2
        8个月前 (12-02)回复 unknow| unknow| 北京市海淀区 北龙中网(北京)科技有限责任公司
  9. 9楼

    嘿嘿,打赏的多不多的呀。。。

    割样机
    1
    8个月前 (12-02)回复 unknow| unknow| 上海市长宁区 电信
  10. 10楼

    这么多代码呀

    唯历史
    0
    8个月前 (12-02)回复 unknow| unknow| 北京市 联通
出本站二次开发 DUX 主题。邮箱admin#mrhee.com(#换成@)。