wordpress网站加入扫微信和支付宝二维码打赏功能

最近网站流量处于上涨态势,那咱也为自己网站加个打赏功能,追一下内容付费的潮流。话不多说,方法如下。

 

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网站加入扫微信和支付宝二维码打赏功能

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏