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

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

给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 -->
 
在上行添加如下代码

代码 123456  <!-- 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 andypm.com --> 


 

3.修改后保存上传即可。当然你也可以根据你的喜好选择将此段代码放置到何处。

时间: 2024-10-13 14:24:22

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

博客园(cnblogs)右侧添加悬浮打赏功能

博客园(cnblogs)右侧添加悬浮打赏功能 原文地址:http://www.cnblogs.com/yingzi1028/p/6253718.html 小麦苗博客园地址:http://www.cnblogs.com/lhrbest 今天小颖逛博客园时,发现有的园友的博客右侧都有一个:                                                                         看了后,小颖也想给自己的博客里弄一个,所以就百度了一下,在参考:博客

在html中添加script脚本的2种方法和注意事项

在html中添加script脚本有两种方法,直接将javascript代码添加到html中与添加外部js文件,这两种方法都比较常用,大家可以根据自己需要自由选择   在html中添加<script>脚本的方法: 1.可以直接将javascript代码添加到html中 复制代码 代码如下: <script type="text/javascript"> //javascritp代码 </script> 当解释器嵌入<script>代码时,h

百度浏览器怎么添加微信应用功能

  1:点击[菜单]--[我的应用] 2:选择打勾上,就可以看到有上角多了一个微信登陆功能. 3:如果没有微信应用插件,[打开应用中心],输入微信查找,选择适合你的,下载.

纯javascript代码实现计算器功能(三种方法)_javascript技巧

今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 方法一: 具体编写代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

WordPress实现添加前台注册功能

一.添加注册表单 1.首先在当前主题的目录下新建一个php文件,命名为reg-page.php,然后将page.php中的所有代码复制到reg-page.php中: 2.删除reg-page.php开头的所有注释,即 /* 与 */ ,以及它们之间的所有内容: 3.搜索:the_content,可以查找到类似代码:< ?php the_content(); ?>,将这段代码替换成代码一(注意使用UTF-8编码另存为替换原来的reg-page.php) 如果你在reg-page.php中找不到t

WordPress快速添加友情链接功能详解

WordPress 在 3.5 己经隐藏了 我们可以通过下面的代码实现快速添加友情链接:<?php  代码如下 复制代码 /* Plugin Name: WPJAM Blogroll Description: 快速添加友情链接 Version: 0.1 Author: Denis */ add_action('admin_init', 'wpjam_blogroll_settings_api_init'); function wpjam_blogroll_settings_api_init()

WordPress中添加语音搜索功能

 代码如下 复制代码 <input type="text"x-webkit-speech /> 只要在你的input中加上type="text"x-webkit-speech就可以实现语音搜索了哦.

wordpress中添加百度站内搜索的方法

wordpress整合百度站内搜索的效果 先看看部落整合以后的效果,如下图: 可以很明显地看到,这个效果的话,相比用一个二级域名来解析来好得多,而且广告什么的,都还是原来的. 至于操作过程,也是非常简单的,我们只需要布局一小段代码就可以实现这个功能了. 1.首先您需要在wordpress后台新建一个页面,像部落新建的页面,命名为searchbaidu.如下图: 可以看到这个页面里有一些代码,先不用管,后面部落会教你如何获得这些代码. 2.接下来,我们进入百度站内搜索的后台,找到搜索结果页管理,也

wordpress文章发布时区时间延迟8小时解决方法

最近在wordpress博客发表文章时发现,文章发布后,时间显示发表于8小时前.这个很让人纠结.如下图示: 在百度.google中找了很久,终于找到了解决方法.解决方法如下,在wp-includes\functions.php文件里查找下面代码 function current_time( $type, $gmt = 0 ) { switch ( $type ) { case 'mysql': return ( $gmt ) ? gmdate( 'Y-m-d H:i:s' ) : gmdate(