石家庄做网站,石家庄网站优化,石家庄网络推广,石家庄网络公司
当前位置:主页 > 新闻资讯 > 技术笔记 >

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

发表日期:2019-12-23 14:13文章编辑:WordPress教程浏览次数: 标签: WordPress|技术笔记|    

打赏功能功能就是给我们一些资助了,写博客不容易所以会给一些内容与说明了,下面我们就一起来看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.修改后保存上传即可,当然你也可以根据你的喜好选择将此段代码放置到何处.

如没特殊注明,文章均来自网络!转载请注明来自:https://www.yousouke.com/News/jsbj/669.html

网站设计案例推荐

热门新闻

DEDECMS提示Fatal error错误

Nginx的Gzip压缩配置

织梦DedeCMS定时自动生成首页HTML的实现方法

IIS7下js文件启用Gzip后却不压缩的解决方法

dede织梦教程:列表页、文章页调用所有顶级栏目文章的方法

WordPress 集成百度 Sitemap 实时推送代码

织梦DedeCMS定时自动生成首页HTML的实现方法

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

相关新闻

WordPress多站点不支持timthumb.php解决方法

Dedecms如何显示文章数量的方法

dede出现search.php on line 44 search.php报错

dedecms大量删除文章后,列表页显示错误修复办法

DedeCMS最新文章、相关文章、推荐文章、热点文章、头条

织梦Dedecms tag标签长度限制的修改

推荐新闻

dede简略标题调用标签

织梦CMS文章模型整合下载功能,可判断点数,会员组等下载权限

正确配置 WordPress 邮件SMTP

织梦DEDECMS教程:添加RSS订阅功能

帝国cms怎么实现页面自动生成html

织梦DedeCMS实现{dede:channel}标签增加数字序号的方法

帝国cms灵动标签调用字母所属的信息

帝国cms如何在tags列表页获取当前tag的ID方法

IIS7下js文件启用Gzip后却不压缩的解决方法