最近網(wǎng)站流量處于上漲態(tài)勢(shì)，那咱也為自己網(wǎng)站加個(gè)打賞功能，追一下內(nèi)容付費(fèi)的潮流。話不多說，方法如下。

 

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>這篇文章對(duì)俺有幫助，打賞犒勞下作者吧?</p></div></div></section>’;

}

注意，此處只用到一個(gè)圖片，圖片是在ps中，合成了微信二維碼和支付寶二維碼。

（因文章不能使用帶二維碼的圖片，你可以想像一下，就是兩個(gè)二維碼左右擺放在一排）

2.將此功能添加至文章內(nèi)容頁(yè)面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

}