现在支付宝和微信打赏都智能通过扫描二维码方式了,如何创建支付宝收款码:如何创建支付宝收款码
下面分享一个不是本主题正在用的,但是是一个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="https://dedewp.com/wp-content/uploads/mxydashang-200x200.png"><b>支付宝 扫一扫</b></span></a></div></div></section>'; }
2、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: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 }
3、调用
在single.php文章内容结尾处(一般是<?php the_content(); ?>后面)调用下面代码即可。
<?php echo orwei_ds_alipay_wechat();?>
4、效果
图没了
5、自用xiu主题的样式
其实是套用了右上角微信那个css,自己审查元素一下就可以看明白了,不会的就用上面的吧,也挺简单的。