wordpress自定义打赏

avatar 2017年03月11日21:29:01 11 5973 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
之前逛张戈博客的时候，看到那个打赏的部件，同时也有教程。今天准备试一试，当然由于张戈的那篇文章写的已经很久了，对于begin主题可能会多少有些问题，但是基本是不伤大雅的。可以搬过来用！
交待：本文代码两处代码取自于张戈博客，其他均博主整理

效果图如下：


第一步、新建js文件


新建shang.js到主题文件夹下的js文件夹下（位置无所谓啦，只要你待会儿引入正确即可），代码如下
脚下留心：下面代码中有三处图片路径记得修改哦
  1. /*!
  2.  * 仿百度打赏的博客打赏组件
  3.  * Date: 2016-09-10 11:00
  4.  * http://zhangge.net/5110.html
  5.  * (c) 2013-2016 张戈博客保留所有权利.
  6.  *
  7.  * 给博客添加模仿百度打赏的打赏组件
  8.  * 张戈博客基于百度打赏的原创功能，引用或转载请保留版权申明，谢谢合作！
  9.  */
  10. (function($){
  11.     var id = Date.now();
  12.     if($("#STYLE_"+id).size()<1){
  13.         document.writeln("<style id='STYLE_"+id+"'>@CHARSET \"UTF-8\";*{-webkit-tap-highlight-color:rgba(255,0,0,0)}.box-size{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.ds-hide{display:none}.ds-reward-stl{font-family:\"microsoft yahei\";text-align:center;background:#f1f1f1;padding:10px 0;color:#666;margin:20px auto;width:90%}#dsRewardBtn {padding: 0;margin: 0;position: absolute;background: #7ab951;left: 110px;top: -7px;width: 50px;height: 50px;font-size: 16px;font-weight: 600;line-height: 43px;display: block;border: 4px solid #fff;border-radius: 40px;color: #FFF;}#dsRewardBtn span{display:inline-block;width:50px;height:50px;border-radius:100%;line-height:58px;color:#fff;font:400 25px/50px 'microsoft yahei';background:#FEC22C}#dsRewardBtn:hover{cursor:pointer}.ds-dialog{z-index:9999;width:100%;height:100%;position:fixed;top:0;left:0;border:1px solid #d9d9d9}.ds-dialog .ds-close-dialog{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)}.ds-dialog .ds-close-dialog:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.6;filter:alpha(opacity=40)}.ds-dialog-bg{position:absolute;opacity:.6;filter:alpha(opacity=30);background:#000;z-index:9999;left:0;top:0;width:100%;height:100%}.ds-dialog-content{font-family:'microsoft yahei';font-size:14px;background-color:#FFF;position:fixed;padding:0 20px;z-index:10000;overflow:hidden;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0,0,0,.3);-moz-box-shadow:0 3px 7px rgba(0,0,0,.3);box-shadow:0 3px 7px rgba(0,0,0,.3);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ds-dialog-pc{width:390px;height:380px;top:50%;left:50%;margin:-190px 0 0 -195px}.ds-dialog-wx{width:90%;height:280px;top:50%;margin-top:-140px;margin-left:5%}.ds-dialog-content h5{text-align:left;font-size:15px;font-weight:700;margin:15px 0;color:#555}.ds-payment-way{text-align:left}.ds-payment-way label{cursor:pointer;font-weight:400;display:inline-block;font-size:14px;margin:0 15px 0 0;padding:0}.ds-payment-way input[type=radio]{vertical-align:middle;margin:-2px 5px 0 0}.ds-payment-img{margin:15px 0;text-align:center}p.ds-pay-info{font-size:15px;margin:0 0 10px}.ds-pay-money{font-size:14px;margin-top:10px}.ds-pay-money p{margin:0}.ds-pay-money .ds-pay-money-sum{margin-bottom:4px}.ds-payment-img img{margin:0 auto;width:185px;}.ds-payment-img #qrCode_1{display:none}.ds-payment-img .qrcode-border{margin:0 auto}.ds-payment-img .qrcode-tip{width:48.13px;position:relative;margin:0 auto;font-size:12px;font-weight:700;background:#fff;height:15px;line-height:15px;margin-top:-12px}#qrCode_0 .qrcode-tip{color:#3caf36}#qrCode_3 .qrcode-tip{color:#e10602}.ds-payment-img #qrCode_3{display:none}.ds-payment-img #qrCode_2{display:none}#qrCode_2 .qrcode-tip{color:#eb5f01}#qrCode_1 .qrcode-tip{color:#6699cc}.wx_qrcode_container{text-align:center}.wx_qrcode_container h2{font-size:17px}.wx_qrcode_container p{font-size:14px}.ds-reward-stl{text-align:left;background:#fff;padding:0;color:#666;margin:0;width:0}#dsRewardBtn span{position:absolute;left:115px;top:-7px;background:#7ab951;width:50px;height:50px;font-size:16px;font-weight:600;line-height:43px;border:4px solid #fff;border-radius:40px}.share-s a{margin-top:-25px} .ds-payment-img .qrcode-border{border-radius: 29.97px; width: 236.89px; height: 236.89px; padding: 18.05px; margin-top: 25.53px; } </style>");
  14.     }
  15.     function write(){
  16.         var content = "<div class=\"ds-dialog\" id='PAY_"+id+"'>"
  17.             +"   <div class=\"ds-dialog-bg\" onclick=\"PaymentUtils.hide();\"></div>"
  18.             +"   <div class=\"ds-dialog-content ds-dialog-pc \">"
  19.             +"    <i class=\"ds-close-dialog\">&times;</i>"
  20.             +"    <h5>选择打赏方式：</h5>"
  21.             +"    <div class=\"ds-payment-way\">"
  22.             +"     <label for=\"wechat\"><input type=\"radio\" id=\"wechat\" class=\"reward-radio\" value=\"0\" checked=\"checked\" name=\"reward-way\" />微信红包</label>"
  23.             + "     <label for=\"qqqb\"><input type=\"radio\" id=\"qqqb\" class=\"reward-radio\" value=\"1\" name=\"reward-way\" />QQ钱包</label>"
  24.             +"     <label for=\"alipay\"><input type=\"radio\" id=\"alipay\" class=\"reward-radio\" value=\"2\" name=\"reward-way\" />支付宝</label>"
  26.             + "    </div>"
  27.             + "    <div class=\"ds-payment-img\">"
  28.             + "     <div class=\"qrcode-img qrCode_0\" id=\"qrCode_0\">"
  29.             + "      <div class=\"qrcode-border box-size\" style=\"border: 9.02px solid rgb(60, 175, 54\">"
  30.             + "       <img  class=\"qrcode-img qrCode_0\" id=\"qrCode_0\" src=\"//liuyanzhao.com/wp-content/uploads/2017/03/wechatpay.png\" />"
  31.             + "      </div>"
  32.             + "      <p class=\"qrcode-tip\">打赏</p>"
  33.             + "     </div>"
  35.             + "     <div class=\"qrcode-img qrCode_1\" id=\"qrCode_1\">"
  36.             + "      <div class=\"qrcode-border box-size\" style=\"border: 9.02px solid rgb(102, 153, 204\">"
  37.             + "       <img  class=\"qrcode-img qrCode_1\" id=\"qrCode_1\" src=\"//liuyanzhao.com/wp-content/uploads/2017/03/qqpay.png\" />"
  38.             + "      </div>"
  39.             + "      <p class=\"qrcode-tip\">打赏</p>"
  40.             + "     </div>"
  41.             + "     <div class=\"qrcode-img qrCode_2\" id=\"qrCode_2\">"
  42.             + "      <div class=\"qrcode-border box-size\" style=\"border: 9.02px solid rgb(235, 95, 1\">"
  43.             + "       <img  class=\"qrcode-img qrCode_2\" id=\"qrCode_2\" src=\"//liuyanzhao.com/wp-content/uploads/2017/03/zfbpay.png\" />"
  44.             + "      </div>"
  45.             + "      <p class=\"qrcode-tip\">打赏</p>"
  46.             + "     </div>"
  48.             + "     </div>"
  49.             + "    </div>"
  50.             + "   </div>"
  51.             + "  </div> ";
  52.         $("body").append(content);
  53.     }
  54.     $(function(){
  55.         write();
  56.         var $pay = $("#PAY_"+id).hide();
  57.         $pay.find(".ds-payment-way").bind("click",function(){
  58.             $pay.find(".qrcode-img").hide();
  59.             $pay.find(".qrCode_"+$pay.find("input[name=reward-way]:checked").val()).show();
  60.         });
  61.         $pay.find(".ds-close-dialog").bind("click",function(){
  62.             $pay.hide();
  63.         });
  64.     });
  65.     var PaymentUtils = window['PaymentUtils']={};
  66.     PaymentUtils.show=function(){
  67.         $("#PAY_"+id).show();
  68.     }
  69.     PaymentUtils.hide=function(){
  70.         $("#PAY_"+id).hide();
  71.     }
  72. })(jQuery);

请注意红色加粗部分

第二步、html部分


在你需要显示打赏按钮的位置加以下代码（一般来说，文章页面都是single.php）
  1. <button onclick="PaymentUtils.show();">赏</button>
  2. <script type="text/javascript" src="http://xxx.com/wp-content/themes/begin/js/shang.js"></script>


脚下留心：上面两句代码，第一句是的button可以改成a标签，也就是只需要在你的打赏按钮里加一句onlick就可以啦；第二句中的js文件路径不要错了。



这样我们的效果就已经实现了。

如果你是begin主题的话，只需要把begin/inc/social.php中略作修改（js文件跟上面一样）

注意：新版在 begin/template/ssocial ,其他的没变


1、把下面代码注释掉（或者去掉）

  1. <span class="tipso_style" id="tip-p" data-tipso='
  2.     <span id="shang">
  3.         <span class="shang-main">
  4.             <?php if ( zm_get_option('alipay_h') == '' ) { ?><?php } else { ?><h4><i class="fa fa-heart" aria-hidden="true"></i> <?php echo zm_get_option('alipay_h'); ?></h4><?php } ?>
  5.             <?php if ( zm_get_option('qr_a') == '' ) { ?>
  6.             <?php } else { ?>
  7.                 <span class="shang-img">
  8.                     <img src="<?php echo zm_get_option('qr_a'); ?>" alt="alipay"/>
  9.                     <?php if ( zm_get_option('alipay_z') == '' ) { ?><?php } else { ?><h4><?php echo zm_get_option('alipay_z'); ?></h4><?php } ?>
  10.                 </span>
  11.             <?php } ?>
  13.             <?php if ( zm_get_option('qr_b') == '' ) { ?>
  14.             <?php } else { ?>
  15.                 <span class="shang-img">
  16.                     <img src="<?php echo zm_get_option('qr_b'); ?>" alt="weixin"/>
  17.                     <?php if ( zm_get_option('alipay_w') == '' ) { ?><?php } else { ?><h4><?php echo zm_get_option('alipay_w'); ?></h4><?php } ?>
  18.                 </span>
  19.             <?php } ?>
  20.             <span class="clear"></span>
  21.         </span>
  22.     </span>'>

2、然后把紧接着下面的如下代码注释

  1. <a title="<?php echo zm_get_option('alipay_t'); ?>"><?php echo zm_get_option('alipay_name'); ?></a>

3、加上如下代码

  1. <a onclick="PaymentUtils.show();" style="cursor:pointer">赏</a>
  2. script type="text/javascript" src="http://www.changwuhao.cn/wp-content/themes/begin4.6/js/shang.js"></script>



至此begin适应也完美解决了。如果你跟我一样遇到分享按钮错位的话，很简单，只需要加一点css样式让它回位。因为博主遇到的是分享按钮往上移动了一部分，只需要在分享按钮的span里加一句（<span class="share-s" 后面）
  1. style="margin-top: 25px!important;"

就可以！

为了让大家看的更清晰，我截个图吧（因为版面太小，图片不清晰，可以放大浏览器，或者右键复制图片地址，在新地址栏打开）


总结


1、添加 js 文件及其代码，并修改里面的图片链接

2、引入 js 文件，即  <script type="text/javascript" src="http://xxx.com/wp-content/themes/begin/js/shang.js"></script> 注意修改链接

3、删除之前的打赏代码，添加新的，即注释掉原来那一大段，加上新的一句即可





本文链接：https://liuyanzhao.com/2293.html

转载请务必注明
历史上的今天
三月
11日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：4   待审核评论数：0
  1. avatar CE安全网
    回复 2018年02月06日 20:13:42

    博主的这个打赏点赞分享好啊.还支持https.. 能分享一下吗?

    • avatar 言曌
      回复 2018年02月06日 20:16:59

      没什么用，又没人打赏。

      • avatar CE安全网
        回复 2018年02月06日 20:20:47

        只是好看啊.博主分享一一下吧. 我添加之后有错误哦 = =/ 赏在最左边.. 点了没效果~

  2. avatar 杰伦视频网
    回复 2017年12月22日 21:33:39

    请问下赏字特别小，还没有居中，要怎么修改啊。谢谢了，我小白一个。 http://wx3.sinaimg.cn/large/80927b8fgy1fmpvdfjvhcj20hq026jr6.jpg

  3. avatar 蚁贼君
    回复 2017年07月17日 14:39:57

    不用引用js文件吗？

    • avatar 言曌
      回复 2017年07月17日 15:53:04

      需要的，新建 shang.js ,然后可以在 footer.php 里引入。

  4. avatar 蚁贼君
    回复 2017年07月16日 22:50:58

    4.2版本的怎么修改呀？我修改之后没法用

    • avatar 言曌
      回复 2017年07月17日 09:30:41

      有用的

      • avatar 蚁贼君
        回复 2017年07月17日 09:55:05

        不知道为什么，我实在本地测试的，点击之后没有弹窗，请赐教

        • avatar 言曌
          回复 2017年07月17日 09:56:15

          你给我一张白纸，问我错在哪里，请问我怎么找呢？