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="您的二维码图片地址"><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,具体位置请自行参考。
赞赏
微信赞赏
支付宝赞赏