A-A+
wordpress怎么添加微信打赏功能
给自己的wordpress添加一个打赏的功能是很简单的,微信里面有一个付钱码,我们把付钱码给保存下来,放到自己的站点就行了,通常都是放在文章的底部,这样在用户读完文章之后,觉得对自己的用处很大,或许就会给这篇文章打赏了。
我记得很早的时候,我的blog添加过这样的打赏功能,只可惜一个打赏也没收到,囧,所以对于小blog来说的话,添加打赏基本上不会收到打赏,不过这里本着研究的精神,还是看看怎么给自己的wordpress添加怎么一个打赏功能吧。
方法一:比较专业,操作起来稍显复杂一些
打开万能的function,添加一个function函数,如下所示:
- //如果是文章页并且不是手机访问,在文章末尾添加一段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> //www.xiariboke.net
- </div>
- PAY;
- if(is_single() && !wp_is_mobile()){
- $content .= $pay;
- }
- return $content;
- }
- add_filter( 'the_content', 'add_pay',10);
好了,然后我们再在CSS文件里面再加添控制的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;
- bottombottom: 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>
好了,这样wp添加微信的打赏功能就已经做好了,不过这个方法有一定的弊端,就是有的wp主题模板,可能根本就没有footer 底部模板,或者底部模板跟上面的对应不上等等问题,所以我们只需要在我们的文章页底部添加即可,基本大同小异了。
方法二:同时添加微信和支付宝打赏功能
修改相应的文章页面,基本上都是single.php文件,找到END .entry-content 之类的代码,在下面添加如下的代码:
- <!-- START .pay by www.xiariboke.net --> <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.net -->
好了,记得把代码中的微信二维码图片和支付宝二维码地址替换成自己的。
这两种方法都是修改代码,我们还可以用最简单的方法就是使用wp万能的插件,是再简单不过了,不过不想要太多插件的朋友就可以使用这种修改代码的方式了,我们还可以自己ps一张打赏图片,然后找到文章模板,简单自定义一下CSS,排版一下放到文章页下面,主要看自己主题什么格式了。
就是加张图片而已,看哪顺眼就放哪
很方便!
我博客主题自带这个功能。或者能直接放广告位实现。然而并不会有人打赏。