走啊走
来学wordpress建站吧

WordPress纯代码实现打赏功能,99%的人还不知道

打赏功能从去年开始火了起来,微博微信陆续的添加了打赏功能。遍地的WORDPRESS的个人站长紧跟风头,纷纷添加打赏功能。虽然真正收到钱的寥寥无几。但是依然无法阻止此功能在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=”输入图像地址” alt=”wordpress免插件实现支付宝微信的打赏支付功能”><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,具体位置请自行参考。

<?php echo orwei_ds_alipay_wechat();?>

转载请注明来源!:我就爱WORDPRESS

微信订阅号:wordpress8—WordPress建站吧 » WordPress纯代码实现打赏功能,99%的人还不知道

评论 抢沙发

#快捷签到点我#

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址


走啊走—【WordPress建站吧,轻松学建站!关注微信订阅号:wordpress8】

wordpress建站安装》联系我们