当前位置:
首页 > wordpress插件 > wordpress免插件实现支付宝微信的打赏支付功能

wordpress免插件实现支付宝微信的打赏支付功能

支付宝微信支付打赏插件最近很火,也是个人站长必备的插件。之前分享过一篇wordpress微信打赏功能插件WordPress微信打赏插件,为你的文章添加微信打赏功能。现在分享篇不用插件纯代码来实现微信支付宝的支付打赏功能。

第一步,将如下代码添加至主题的function.php ,记得在 “?>”前添加即可。

function orwei_ds_alipay_wechat(){ //注意更换为你的支付宝或微信收款二维码,二维码获取请自行百度
 echo '<section class="to-tip"><div class="inner"><div class="top-tip-shap"><a>赏<span class="code"><img alt="" src="http://www.orwei.com/wp-content/uploads/alipay-dashang-orwei.jpg" alt="wordpress免插件实现支付宝微信的打赏支付功能"><b>支付宝 扫一扫</b></span></a></div></div></section>';
}

第二步,添加如下样式至主题的style.css ,开始部分对移动端做了隐藏消除,考虑到ios不支持hover伪类(还可以自由发挥添加链接点击方式)

@media (max-width: 800px) {
 .to-tip {display:none !important}
}
.to-tip {
 background:#fff;
 text-align:center
}
.to-tip .inner {
 display:inline-block;
 margin-bottom:40px;
}
.to-tip .top-tip-shap {
 border-radius:100%
}
.to-tip a {
 display:block;
 width:60px;
 height:60px;
 border:1px solid #eee;
 border-radius:100%;
 line-height:58px;
 color:#999;
 font-size:24px;
 background:#fff;
 position:relative
}
.to-tip a:hover .code {
 display:block
}
.to-tip div {
 color:#666;
 margin-top:4px
}
.to-tip .code {
 position:absolute;
 padding:20px;
 border:1px solid #e6e6e6;
 background-color:#fff;
 line-height:14px;
 width:160px;
 height:170px;
 top:-200px;
 left:50%;
 -webkit-transform:translate3d(-50%, 0, 0);
 transform:translate3d(-50%, 0, 0);
 display:none
}
.to-tip .code:before,.to-tip .code:after {
 position:absolute;
 content:"";
 border:10px solid transparent
}
.to-tip .code:before {
 border-top-color:#e6e6e6;
 left:50%;
 margin-left:-10px;
 bottom:-20px
}
.to-tip .code:after {
 border-top-color:#fff;
 left:50%;
 margin-left:-10px;
 bottom:-19px
}
.to-tip .code img {
 width:120px;
 height:120px
}
.to-tip .code b {
 color:#333;
 font-size:12px;
 font-weight:normal
}

第三步,调用函数,一般添加至single.php,具体位置请自行参考。

<?php echo orwei_ds_alipay_wechat();?>

网友评论3

  1. 地板
    网赚博客:

    很实用,多谢分享啊

    2016-04-06 下午2:05
  2. 板凳
    mobanhou.com:

    挺火的,我的博客http://www.mobanhou.com 里面也用上了,谢谢大神 :oops:

    2016-07-12 下午10:45
  3. 沙发
    拉乐:

    不就是把收款图直接挂网站上吗。卵用。

    2017-01-02 下午4:12

发表评论

您必须 [ 登录 ] 才能发表留言!

切换注册

登录

忘记密码 ?

切换登录

注册