给WORDPRESS文章添加微信打赏功能2种方法
发布:smiling 来源: PHP粉丝网 添加日期:2015-11-11 10:16:58 浏览: 评论:0
打赏功能功能就是给我们一些资助了,写博客不容易所以会给一些内容与说明了,下面我们就一起来看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> //phpfensi.com
- </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 -->
在上行添加如下代码:
- <!-- START .pay by andypm.com --> <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> <!-- END .pay by phpfensi.com -->
3.修改后保存上传即可,当然你也可以根据你的喜好选择将此段代码放置到何处.
Tags: WORDPRESS微信打赏 WORDPRESS文章
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)