非插件实现网站打赏功能

2022年12 月10日 / 网站源码 / 没有评论 / 2,404次

百度了很久，想在这个Kubrick制作的wordpress经典默认主题default1.72上添加分享和打赏的功能，使用了网上那个集合了点赞、分享、打赏、海报功能的插件，但是不知道为什么，估计是和这个原始主题冲突或者和我添加的其他功能冲突，所以安装上去后点击分享等按钮都没有弹出效果。最后在张戈（zhang.ge）上找到了《分享张戈博客自用的仿百度打赏功能》，虽然没有分享和点赞以及海报功能，但是勉强使用吧。以下分享下自己的美化版，以供自己收藏。

一、建立js代码：

  1. /*!
  2.  * 仿百度打赏的博客打赏组件
  3.  * Date: 2016-09-10 11:00
  4.  * https://zhang.ge/5110.html
  5.  * (c) 2013-2016 张戈博客保留所有权利.
  6.  *
  7.  * 给博客添加模仿百度打赏的打赏组件
  8.  * 张戈博客基于百度打赏的原创功能，引用或转载请保留版权申明，谢谢合作！
  9.  */
  11. (function($){
  12.     var id = Date.now();
  13.     if($("#STYLE_"+id).size()<1){
  14.         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;padding:10px 0;color:#666;margin:20px auto;width:90%}#dsRewardBtn:hover{background:#569ad5;-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;-o-transition: all .4s ease-in-out;}#dsRewardBtn {-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;-o-transition: all .4s ease-in-out;padding: 0;margin: auto;background: #4482b8;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:#4482b8;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:278px;height:355px;top:50%;left:50%;box-shadow: 0 1px 9px #000, 0 0 1px #000, 0 0 1px #000;margin:-190px 0 0 -140px}.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:center;color: white;}.ds-payment-way label{cursor:pointer;font-weight:400;display:inline-block;font-size:12px;margin: 0 2px 0 2px;padding:0}.ds-payment-way input[type=radio]{vertical-align:middle;margin:-2px 1px 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:500;background:#fff;height:15px;line-height:15px;margin-top:-12px}#qrCode_0 .qrcode-tip{color: #3bd154;}#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:#1976ff}#qrCode_1 .qrcode-tip{color: #ff5722;}.wx_qrcode_container{text-align:center}.wx_qrcode_container h2{font-size:17px}.wx_qrcode_container p{font-size:14px}.ds-reward-stl{border-radius: 100%;background: #4482b8;text-align: center;padding: 3px;color: #666;margin:20px auto;width: 50px;}#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>");
  15.     }
  16.     function write(){
  17.         var content = "<div class=\"ds-dialog\" id='PAY_"+id+"'>"
  18.         +"   <div class=\"ds-dialog-bg\" onclick=\"PaymentUtils.hide();\"></div>"
  19.         +"   <div class=\"ds-dialog-content ds-dialog-pc \">"
  20.         +"    <i class=\"ds-close-dialog\">&times;</i>"
  21.         +"    <h5><i class=\"zm zm-xuanshang\" style=\"margin-right: 0px; font-weight: normal;font-size: 1.2em!important; color: #ff0000;\"></i>选择打赏方式：</h5>"
  22.         +"    <div class=\"ds-payment-way\">"
  23.         +"     <label for=\"wechat\" id=\"wepay\" style=\"border-radius: 3px;padding: 3px 5px 3px 2px;background: #3bd154;\"><input type=\"radio\" id=\"wechat\" class=\"reward-radio\" value=\"0\" checked=\"checked\" name=\"reward-way\" /><span class=\"weixin\"><i class=\"zm zm-weixinzhifu\" style=\"color: #fff;margin-right: 1px;font-size: 13px!important;\"></i>微信</span></label>"
  24.         + "     <label for=\"qqqb\" id=\"qqpay\" style=\"border-radius: 3px;padding: 3px 5px 3px 2px;color: white;background: #ff5722;\"><input type=\"radio\" id=\"qqqb\" class=\"reward-radio\" value=\"1\" name=\"reward-way\" /><span class=\"qqzhifu\"><i class=\"zm zm-QQ\" style=\"margin-right: 0px; font-size: 13px!important; color: #ffffff;\"></i>QQ钱包</span></label>"
  25.         +"     <label for=\"alipay\" id=\"zhifubao\" style=\"border-radius: 3px;padding: 3px 4px 3px 2px;background: #1976ff;\"><input type=\"radio\" id=\"alipay\" class=\"reward-radio\" value=\"2\" name=\"reward-way\" /><span class=\"zhifubao\"><i class=\"zm zm-alipay\" style=\"margin-right: 1px; font-size: 13px!important; color: #fff;\"></i>支付宝</span></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 #3bd154\">"
  30.         + "       <img  class=\"qrcode-img qrCode_0\" id=\"qrCode_0\" src=\"https://long.ge/wp-content/themes/default.1.7.2/images/wepay.svg\" />"
  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 #ff5722;\">"
  37.         + "       <img  class=\"qrcode-img qrCode_1\" id=\"qrCode_1\" src=\"https://long.ge/wp-content/themes/default.1.7.2/images/qqpay.svg\" />"
  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 #1976ff\">"
  43.         + "       <img  class=\"qrcode-img qrCode_2\" id=\"qrCode_2\" src=\"https://long.ge/wp-content/themes/default.1.7.2/images/alipay.svg\" />"
  44.         + "      </div>"
  45.         + "      <p class=\"qrcode-tip\">打赏</p>"
  46.         + "     </div>"
  47.         + "    </div>"
  48.         + "   </div>"
  49.         + "  </div> ";
  50.         $("body").append(content);
  51.     }
  52. $(function(){
  53.     write();
  54.     var $pay = $("#PAY_"+id).hide();
  55.     $pay.find(".ds-payment-way").bind("click",function(){
  56.                 $pay.find(".qrcode-img").hide();
  57.         $pay.find(".qrCode_"+$pay.find("input[name=reward-way]:checked").val()).show();
  58.       });
  59.      $pay.find(".ds-close-dialog").bind("click",function(){
  60.           $pay.hide();
  61.      });
  62.   });
  63.   var PaymentUtils = window['PaymentUtils']={};
  64.   PaymentUtils.show=function(){
  65.       $("#PAY_"+id).show();
  66.   }
  67.   PaymentUtils.hide=function(){
  68.       $("#PAY_"+id).hide();
  69.   }
  70. })(jQuery);

建议复制以上代码，将代码中的如下地址替换你对应的付款二维码图片，然后保存为 js 文件，比如share.js，并且上传到主题目录下，比如放在主题新建文件夹share下。

二、添加打赏按钮代码

  1. <div class="ds-reward-stl">
  2.   <button id="dsRewardBtn" onclick="PaymentUtils.show();">赏</button>
  3. </div>
  4. <!-- 下面的 js 地址修改和上一步保存的 js 地址一致 -->
  5. <script type="text/javascript" src="http://xxx.com/wp-content/themes/xxxx/share/.js"></script>

不建议js加在<header>里，因为这不是全局js，要不然会拖慢其他页面速度。
三、在主题文章页面添加美化代码：

  1. <style type='text/css'>
  2. input[type="radio"] {
  3.     opacity: 0;
  4.     width: 0;
  5.     height: 0;
  6. }
  7. .weixin::before {
  8.     display: inline-flex;
  9.     width: 13px;
  10.     height: 13px;
  11.     padding: 1px;
  12.     margin-top: -1px;
  13.     margin-right: 2px;
  14.     border-radius: 50%;
  15.     background-color: white;
  16.     border: 1.5px solid #fff;
  17.     -webkit-box-sizing: border-box;
  18.     box-sizing: border-box;
  19.     content: "";
  20. }
  21. input[type="radio"]:checked + .weixin::before {
  22.     margin-right: 2px;
  23.     background-color: white;
  24.     border: 1.5px solid #d9d9d9;
  25.     background-clip: content-box;
  26.     border-color: white;
  27.     padding: 1px;
  28.     margin-top: -1px;
  29. }
  30. .qqzhifu::before {
  31.     display: inline-flex;
  32.     width: 13px;
  33.     height: 13px;
  34.     margin-right: 2px;
  35.     border-radius: 50%;
  36.     background-color: white;
  37.     border: 1.5px solid #fff;
  38.     -webkit-box-sizing: border-box;
  39.     box-sizing: border-box;
  40.     content: "";
  41.     padding: 1px;
  42.     margin-top: -1px;
  43. }
  44. input[type="radio"]:checked + .qqzhifu::before {
  45.     margin-right: 2px;
  46.     background-color: white;
  47.     border: 1.5px solid #d9d9d9;
  48.     background-clip: content-box;
  49.     border-color: white;
  50.     padding: 1px;
  51.     margin-top: -1px;
  52. }
  53. .zhifubao::before {
  54.     display: inline-flex;
  55.     width: 13px;
  56.     height: 13px;
  57.     margin-right: 2px;
  58.     border-radius: 50%;
  59.     background-color: white;
  60.     border: 1.5px solid #fff;
  61.     -webkit-box-sizing: border-box;
  62.     box-sizing: border-box;
  63.     content: "";
  64.     padding: 1px;
  65.     margin-top: -1px;
  66. }
  67. input[type="radio"]:checked + .zhifubao::before {
  68.     margin-right: 2px;
  69.     background-color: white;
  70.     border: 1.5px solid #d9d9d9;
  71.     background-clip: content-box;
  72.     border-color: white;
  73.     padding: 1px;
  74.     margin-top: -1px;
  75. }
  76. </style>

以上代码是替换原始input中单选按钮radio颜色，以达到美化效果。

另外，以上打赏功能可以使用到任何网站，不一定是wordpress哦！

备注：打赏里的小图标我是使用了阿里云图标库里面的，所以可以自行去注册替换。

以上三步完工。效果如下：

打赏按钮效果

打赏界面效果

关键词:

时间：2022年12 月10日，星期六，下午4:07。
通过 RSS 2.0 订阅源关注。

«
»

提交评论

同类文章