^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望可以帮到你
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

WordPress免插件集成支付宝微信打赏功能(适合所有主题)

阿里云服务器9.9

现在支付宝和微信打赏都智能通过扫描二维码方式了,如何创建支付宝收款码:如何创建支付宝收款码

下面分享一个不是本主题正在用的,但是是一个 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://dy.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,自己审查元素一下就可以看明白了,不会的就用上面的吧,也挺简单的。

 

历史上的今天:
让小雨知道,这篇文章帮到了你

展开阅读全文

扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来
小雨导购

如有疑问,请前往问答中心反馈!

反馈
  1. 可入眼
    可以不用插件了,学习了!! :cool:
  2. 启航
    不是很懂css怎么用?需要放在哪里?我技术不好
  3. 启航
    博主可以帮我看看我的打赏为什么没有效果吗?http://luzihang.net
    • 陌小雨网站管理员
      @启航 你是按照教程来做的么?
      • zhaochen
        @陌小雨 老哥右上角点击qq跳转聊天,是XIU带的吗
  4. 杰伦视频网
    博主现在的打赏和赞功能是用的插件吗?
  5. 珍惜SEO博客
    签到成功!签到时间:下午5:34:47,陌小雨,你很棒!一起加油哦哦~
  6. 免费资源
    感谢分享 终于找到好用的了

登录

忘记密码 ?

切换登录

注册