正文:
本文将介绍两种在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教程)文章底部添加打赏按钮功能
汇站网 WordPress教程 (wordpress教程)文章底部添加打赏按钮功能 https://www.huizhanii.com/33179.html


相关文章
- WordPress禁用自动生成缩略图和多尺寸图片的方法(经过亲测可行) 2023-09-27
- WordPress网站速度优化技巧(珍藏代码版)让您的网站速度提升100% 2023-09-27
- 在WordPress中添加复制版权提示 2023-09-24
- 解决 WordPress 启用 CDN 后无法获取用户真实 IP 的方法 2023-09-24
- 解决 Windows 无法使用代理的问题的可能方法 2023-09-24
- WordPress利用jQuery代码绕过防盗链限制 2023-09-23
- WordPress 如何改变JPEG图片的压缩质量 2023-09-22
- 禁止WordPress订阅用户登陆后访问后台和跳转到指定页面 2023-09-22
- 纯代码自动为WordPress文章添加已使用过的标签 2023-09-21
- 纯代码生成WordPress网站地图使用XML格式创建一个sitemap.xml 2023-09-21
打卡签到成功!每天打卡,遇见美好生活
成功了