摘要：打賞功能從去年開(kāi)始火了起來(lái)，微博微信陸續(xù)的添加了打賞功能。遍地的wordpress的個(gè)人站長(zhǎng)緊跟風(fēng)頭，紛紛添加打賞功能。...
打賞功能從去年開(kāi)始火了起來(lái)，微博微信陸續(xù)的添加了打賞功能。遍地的wordpress的個(gè)人站長(zhǎng)緊跟風(fēng)頭，紛紛添加打賞功能。雖然真正收到錢的寥寥無(wú)幾。但是依然無(wú)法阻止此功能在wordpress程序中的漫延。
各種搜索引擎中可以檢索到很多關(guān)于wordpress打賞的插件，當(dāng)然這不是我們講的重點(diǎn)，我們要達(dá)到的是摒棄插件，用純代碼來(lái)實(shí)現(xiàn)打賞功能
第一步，將如下代碼添加至主題的function.php ，記得在 “?>”前添加即可。
|
1 |
function orwei_ds_alipay_wechat(){ //注意更換為你的支付寶或微信收款二維碼，二維碼獲取請(qǐng)自行百度 echo '<section class="to-tip"><div class="inner"><div class="top-tip-shap"><a>賞<span class="code"><img alt="" src="輸入圖像地址" alt="wordpress免插件實(shí)現(xiàn)支付寶微信的打賞支付功能"><b>支付寶 掃一掃</b></span></a></div></div></section>'; } |
第二步，添加如下樣式至主題的style.css ，開(kāi)始部分對(duì)移動(dòng)端做了隱藏消除，考慮到ios不支持hover偽類（還可以自由發(fā)揮添加鏈接點(diǎn)擊方式）
|
1 |
@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 } |
第三步，調(diào)用函數(shù)，一般添加至single.php，具體位置請(qǐng)自行參考。
|
1 |
<?php echo orwei_ds_alipay_wechat();?> |
