（wordpress教程）文章底部添加打赏按钮功能

正文：

本文将介绍两种在 WORDPRESS 文章中实现微信打赏功能的方法，供大家参考：

效果图展示：

打赏功能是为了资助我们的博客写作，因为写博客并不容易，所以有些读者会给予一些赞赏。下面我们一起来看看两种给 WORDPRESS 文章添加微信打赏功能的实现方法。

在 WordPress 主题的functions.php末尾添加以下代码，即可给 WordPress 文章添加微信打赏功能：

//如果是文章页并且不是手机访问，在文章末尾添加一段 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 文件中添加以下JavaScript代码：

<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>

方法二：
另一种实现方法是通过使用插件来给 WordPress 文章添加微信打赏功能。具体步骤如下：

1. 在 WordPress 后台，点击“插件”菜单，然后点击“添加新插件”。
2. 在搜索框中输入“微信打赏”，然后点击搜索按钮。
3. 在搜索结果中找到适合的插件，点击“安装”按钮进行安装。
4. 安装完成后，点击“启用”按钮启用插件。
5. 根据插件的说明，配置微信打赏功能的相关设置。
6. 保存设置后，即可在 WordPress 文章中看到微信打赏功能的显示。

以上是两种给 WORDPRESS 文章添加微信打赏功能的实现方法，希望对大家有所帮助。

转载请注明：汇站网 » （wordpress 教程）文章底部添加打赏按钮功能