当前位置:首页 > CMS教程 > WordPress > 列表

给WORDPRESS文章添加微信打赏功能2种方法

发布:smiling 来源: PHP粉丝网  添加日期:2015-11-11 10:16:58 浏览: 评论:0 

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

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

给WordPress文章添加微信打赏功能,如果你的博文给别人有帮助,也许会有热心的读者给你打赏,首先在WordPress主题的functions.php末尾添加如下代码.

  1. //如果是文章页并且不是手机访问,在文章末尾添加一段html代码 
  2. function add_pay($content) { 
  3.  
  4. $pay = <<<PAY 
  5. <div class="gave" > 
  6.     <a href="javascript:;" id="gave">打赏</a> 
  7.     <div class="code" id="wechatCode" style="display: none"
  8.         <img src="/wp-content/uploads/2015/10/pay.jpg" alt=""
  9.         <div><img src="m/wp-content/uploads/2015/10/ico-wechat.jpg" alt="微信logo" class="ico-wechat">微信扫一扫,打赏作者吧~</i></div> 
  10.     </div> //phpfensi.com 
  11. </div> 
  12. PAY; 
  13.  
  14.  if(is_single() && !wp_is_mobile()){ 
  15.   $content .= $pay
  16.  } 
  17.  return $content
  18.  
  19. add_filter( 'the_content''add_pay',10); 

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

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

  1. <style type="text/css"
  2.     .gave { 
  3.         height110px
  4.         positionrelative
  5.         text-aligncenter
  6.     } 
  7.  
  8.     .gave .code::after { 
  9.         border-color#fff transparent transparent
  10.         border-stylesolid
  11.         border-width10px
  12.         content""
  13.         height0
  14.         left: 50%
  15.         margin-left-7.5px
  16.         positionabsolute
  17.         top: 100%
  18.         width0
  19.     } 
  20.     .gave .code { 
  21.         background#fff none repeat scroll 0 0
  22.         border-radius: 5px
  23.         bottom: 100%
  24.         box-shadow: 0 0 15px #e5e5e5
  25.         color#68b3de
  26.         displaynone
  27.         font-size13px
  28.         height160px
  29.         left: 50%
  30.         margin-left-110px
  31.         padding20px
  32.         positionabsolute
  33.         width180px
  34.     } 
  35.     .gave a { 
  36.         background#f06363 none repeat scroll 0 0
  37.         border-radius: 50%
  38.         color#fff !important
  39.         display: inline-block
  40.         font-size18px
  41.         height75px
  42.         line-height75px
  43.         text-aligncenter
  44.         width75px
  45.         text-decorationnone
  46.     } 
  47.  
  48.     .gave .code > img { 
  49.         height124px
  50.         width124px
  51.         bordermedium none
  52.         max-width100%
  53.     } 
  54. </style> 

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

  1. <script type="text/javascript"
  2.     document.getElementById('gave').onmouseover = function() { 
  3.         document.getElementById('wechatCode').style.display = 'block'
  4.     } 
  5.     document.getElementById('gave').onmouseout = function() { 
  6.         document.getElementById('wechatCode').style.display = 'none'
  7.     } 
  8. </script> 

这样就OK了。

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

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

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

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

方法:

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

2.找到

代码 1  <!-- END .entry-content -->

在上行添加如下代码:

  1. <!-- 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文章

分享到: