A-A+

wordpress怎么添加微信打赏功能

2018年03月21日 PHP开源系统 评论 3 条 阅读 0 views 次

给自己的wordpress添加一个打赏的功能是很简单的,微信里面有一个付钱码,我们把付钱码给保存下来,放到自己的站点就行了,通常都是放在文章的底部,这样在用户读完文章之后,觉得对自己的用处很大,或许就会给这篇文章打赏了。

我记得很早的时候,我的blog添加过这样的打赏功能,只可惜一个打赏也没收到,囧,所以对于小blog来说的话,添加打赏基本上不会收到打赏,不过这里本着研究的精神,还是看看怎么给自己的wordpress添加怎么一个打赏功能吧。

方法一:比较专业,操作起来稍显复杂一些

打开万能的function,添加一个function函数,如下所示:

  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> //www.xiariboke.com   
  11. </div>   
  12. PAY;   
  13.    
  14.  if(is_single() && !wp_is_mobile()){   
  15.   $content .= $pay;   
  16.  }   
  17.  return $content;   
  18. }   
  19.    
  20. add_filter( 'the_content', 'add_pay',10);   

好了,然后我们再在CSS文件里面再加添控制的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.         height: 0;   
  14.         left: 50%;   
  15.         margin-left: -7.5px;   
  16.         positionabsolute;   
  17.         top: 100%;   
  18.         width: 0;   
  19.     }   
  20.     .gave .code {   
  21.         background#fff none repeat scroll 0 0;   
  22.         border-radius: 5px;   
  23.         bottombottom: 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.         displayinline-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-width: 100%;   
  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>  

好了,这样wp添加微信的打赏功能就已经做好了,不过这个方法有一定的弊端,就是有的wp主题模板,可能根本就没有footer 底部模板,或者底部模板跟上面的对应不上等等问题,所以我们只需要在我们的文章页底部添加即可,基本大同小异了。

方法二:同时添加微信和支付宝打赏功能

修改相应的文章页面,基本上都是single.php文件,找到END .entry-content 之类的代码,在下面添加如下的代码:

  1. <!-- START .pay by www.xiariboke.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 www.xiariboke.com -->  

好了,记得把代码中的微信二维码图片和支付宝二维码地址替换成自己的。

这两种方法都是修改代码,我们还可以用最简单的方法就是使用wp万能的插件,是再简单不过了,不过不想要太多插件的朋友就可以使用这种修改代码的方式了,我们还可以自己ps一张打赏图片,然后找到文章模板,简单自定义一下CSS,排版一下放到文章页下面,主要看自己主题什么格式了。

标签:

3 条留言  访客:3 条  博主:0 条

  1. 梁兴健

    就是加张图片而已,看哪顺眼就放哪

  2. 米粒博客

    很方便!

  3. 烤德香

    我博客主题自带这个功能。或者能直接放广告位实现。然而并不会有人打赏。

给我留言

Copyright © 夏日博客 保留所有权利.   Theme  Ality 冀ICP备15026943号-3

用户登录