最近网站流量处于上涨态势，那咱也为自己网站加个打赏功能，追一下内容付费的潮流。话不多说，方法如下。
1.functions.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=”你的二维码所在位置”></span></a><p>这篇文章对俺有帮助，打赏犒劳下作者吧〜</p></div></div></section>’;
}
注意，此处只用到一个图片，图片是在ps中，合成了微信二维码和支付宝二维码。
（因文章不能使用带二维码的图片，你可以想像一下，就是两个二维码左右摆放在一排）
2.将此功能添加至文章内容页面single.php，一行代码即可。
<?php echo orwei_ds_alipay_wechat();?>
如参考文章所示，通常此代码是加在<?php the_content(); ?>后面，你也可以选择其他位置。
3.样式，style.css中添加打赏的样式，可以自行修改美化。
@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:75px;
height:75px;
border:1px solid #eee;
border-radius:100%;
line-height:75px;
color:#FFF;
font-size:32px;
font-weight:bold;
background:#ff9800;
pos
}
.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:360px;
height:224px;
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:360px;
height:223px
}
.to-tip .code b {
color:#333;
font-size:12px;
font-weight:normal
}
未经允许不得转载：445IT之家 » wordpress网站加入扫微信和支付宝二维码打赏功能
