• 售前

  • 售后

热门帖子
入门百科

WORDPRESS文章中微信打赏功能的2种实现方法

[复制链接]
123456848 显示全部楼层 发表于 2021-8-15 20:32:44 |阅读模式 打印 上一主题 下一主题
本文实例讲述了WORDPRESS文章中微信打赏功能的2种实现方法。分享给各人供各人参考,具体如下:
打赏功能功能就是给我们一些资助了,写博客不容易以是会给一些内容与分析了,下面我们就一起来看2种给WORDPRESS文章添加微信打赏功能实现方法.
方法一、比较专业也是比较复杂了
给WordPress文章添加微信打赏功能,假如你的博文给别人有资助,也许会有热心的读者给你打赏,起首在WordPress主题的functions.php末尾添加如下代码.

复制代码代码如下://假如是文章页而且不是手机访问,在文章末尾添加一段html代码
function add_pay($content) {
$pay = <<<PAY
<div class="gave" >
    <a href="javascript:;" id="gave">打赏</a>
    <div class="code" id="wechatCode" style="display: none">
        <img src="/wp-content/uploads/2015/10/pay.jpg" alt="">
        <div><img src="m/wp-content/uploads/2015/10/ico-wechat.jpg" alt="微信logo" class="ico-wechat">微信扫一扫,打赏作者吧~</i></div>
    </div>
</div>
PAY;
if(is_single() && !wp_is_mobile()){
  $content .= $pay;
}
return $content;
}
add_filter( 'the_content', 'add_pay',10);
这个函数的作用是:假如是文章页而且不是手机访问,在文章末尾添加一段html代码.
在主题的css文件添加以下样式:

复制代码代码如下:<style type="text/css">
    .gave {
        height: 110px;
        position: relative;
        text-align: center;
    }
    .gave .code::after {
        border-color: #fff transparent transparent;
        border-style: solid;
        border-width: 10px;
        content: "";
        height: 0;
        left: 50%;
        margin-left: -7.5px;
        position: absolute;
        top: 100%;
        width: 0;
    }
    .gave .code {
        background: #fff none repeat scroll 0 0;
        border-radius: 5px;
        bottom: 100%;
        box-shadow: 0 0 15px #e5e5e5;
        color: #68b3de;
        display: none;
        font-size: 13px;
        height: 160px;
        left: 50%;
        margin-left: -110px;
        padding: 20px;
        position: absolute;
        width: 180px;
    }
    .gave a {
        background: #f06363 none repeat scroll 0 0;
        border-radius: 50%;
        color: #fff !important;
        display: inline-block;
        font-size: 18px;
        height: 75px;
        line-height: 75px;
        text-align: center;
        width: 75px;
        text-decoration: none;
    }
    .gave .code > img {
        height: 124px;
        width: 124px;
        border: medium none;
        max-width: 100%;
    }
</style>
在模板文章的页面如footer.php中添加如下js:

复制代码代码如下:<script type="text/javascript">
    document.getElementById('gave').onmouseover = function() {
        document.getElementById('wechatCode').style.display = 'block';
    }
    document.getElementById('gave').onmouseout = function() {
        document.getElementById('wechatCode').style.display = 'none';
    }
</script>
这样就OK了。
别忘了把微信支付二维码更换成自己的哦。
其实更好的方式是做成WordPress插件的情势,没时间折腾,有空可以构想一下用插件实现,这样可以方便各人直接安装了。
方法二、超等简单就像文章下面所说没技能就这样来设置。
本人技能有限,没有做虎嗅那种按钮情势。我是直接在WordPress模板中添加代码,一劳永逸,这样就不消每次写文章都要粘贴复制一遍代码。本文的同时显示微信支付和支付宝的二维码,虎嗅只显示一种支付码,信任不是全部人都用微信支付或支付宝吧,以是多一种选择多一个收入渠道。不过这实用于像我这种全站只是我一个人写文章的。样式参考文章正文内容下方。
方法:
1.修改相应风格模板的single.php 文件
2.找到
代码 1  <!-- END .entry-content -->
在上行添加如下代码:

复制代码代码如下:<div style="text-align: center;"><strong>用<span style="color: #339966;">微信</span> OR <span style="color: #337fe5;">支付宝</span> 扫描二维码</strong></div> <div style="text-align: center;"><strong>为本文作者 <span style="color: #ff6600;">打个赏</span></strong></div> <div align="center"><img class="wp-image-558 size-thumbnail" src="微信二维码图片所在" alt="pay_weixin" width="150" height="150" /><img class="wp-image-558 size-thumbnail" src="支付宝二维码所在" alt="pay_weixin" width="150" height="150" /></div> <div style="text-align: center;"><span style="color: #999999;">金额随意 快来“打”我呀~</span></div>
3.修改后保存上传即可,固然你也可以根据你的喜欢选择将此段代码放置到那边.
渴望本文所述对各人基于wordpress的程序计划有所资助。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作