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

芝麻传媒 發表於 2023-12-21 00:00:00

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

本文实例讲述了WORDPRESS文章中微信打赏功能的2种实现方法。分享给大家供大家参考，具体如下：

打赏功能功能就是给我们一些资助了,写博客不容易所以会给一些内容与说明了,下面我们就一起来看2种给WORDPRESS文章添加微信打赏功能实现方法.

方法一、比较专业也是比较复杂了

给WordPress文章添加微信打赏功能,如果你的博文给别人有帮助,也许会有热心的读者给你打赏,首先在WordPress主题的functions.php末尾添加如下代码.
<blockquote>
<ol>
<li>
//如果是文章页并且不是手机访问，在文章末尾添加一段html代码 
</li>
<li>
function add_pay($content) { 
</li>
<li>
$pay = <<<PAY 
</li>
<li>
<div class="gave" > 
</li>
<li>
<a href="javascript：;" id="gave">打赏</a> 
</li>
<li>
<div class="code" id="wechatCode" style="display: none"> 
</li>
<li>
<img src="/uploads/2015/10/pay.jpg" alt=""> 
</li>
<li>
<div><img src="m/wp-content/uploads/2015/10/ico-wechat.jpg" alt="微信logo" class="ico-wechat">微信扫一扫，打赏作者吧～</i></div> 
</li>
<li>
</div> 
</li>
<li>
</div> 
</li>
<li>
PAY; 
</li>
<li>
if(is_single() && !wp_is_mobile()){ 
</li>
<li>
$content .= $pay; 
</li>
<li>
} 
</li>
<li>
return $content; 
</li>
<li>
} 
</li>
<li>
add_filter( 'the_content', 'add_pay',10); 
</li>
</ol>
</blockquote>

这个函数的作用是:如果是文章页并且不是手机访问,在文章末尾添加一段html代码.

在主题的css文件添加以下样式: 

<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<div style="margin: 0px; padding: 0px; outline: none; float: right; line-height: 25.2px; font-size: 14px;">
复制代码
</div>
代码如下:</div>
<div id="phpcode7" style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
<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></div>



在模板文章的页面如footer.php中添加如下js: 

<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<div style="margin: 0px; padding: 0px; outline: none; float: right; line-height: 25.2px; font-size: 14px;">
复制代码
</div>
代码如下:</div>
<div id="phpcode8" style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
<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></div>



这样就OK了。

别忘了把微信支付二维码替换成自己的哦。

其实更好的方式是做成WordPress插件的形式，没时间折腾，有空可以构想一下用插件实现，这样可以方便大家直接安装了。

方法二、超级简单就像文章下面所说没技术就这样来设置。

本人技术有限，没有做虎嗅那种按钮形式。我是直接在WordPress模板中添加代码，一劳永逸，这样就不用每次写文章都要粘贴复制一遍代码。本文的同时显示微信支付和支付宝的二维码，虎嗅只显示一种支付码，相信不是所有人都用微信支付或支付宝吧，所以多一种选择多一个收入渠道。不过这适用于像我这种全站只是我一个人写文章的。样式参考文章正文内容下方。

方法:

1.修改相应风格模板的single.php 文件

2.找到

代码 1 

在上行添加如下代码:
<blockquote>
<ol>
<li>
<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> 
</li>
</ol>
</blockquote>
 3.修改后保存上传即可,当然你也可以根据你的喜好选择将此段代码放置到何处.



希望本文所述对大家基于wordpress的程序设计有所帮助。

頁: [1]

琼殿技术论坛's Archiver

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