(wordpress教程)文章底部添加打赏按钮功能 - 汇站网

(wordpress教程)文章底部添加打赏按钮功能

2023-09-19 0 280

正文:

本文将介绍两种在 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 教程)文章底部添加打赏按钮功能

收藏 (0)

微信扫一扫

支付宝扫一扫

点赞 (0)

感谢您的来访,获取更多精彩资源请收藏本站。

本站声明

本资源仅用于个人学习和研究使用,禁止用于任何商业环境!

 1.  本网站名称:汇站网
 2.  本站永久网址:https://www.huizhanii.com/
 3.  本站所有资源来源于网友投稿和高价购买,所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习,本站不提供任何技术服务!
 4.  未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,下载者不得用于违反国家法律,否则发生的一切法律后果自行承担!
 5.  为尊重作者版权,请在下载24小时内删除!请购买原版授权作品,支持你喜欢的作者,谢谢!
 6.  若资源侵犯了您的合法权益, 请持您的版权证书和相关原作品信息来信通知我们请来信     通知我们我们会及时删除,给您带来的不便,我们深表歉意!
 7.  如下载链接失效、广告或者压缩包问题请联系站长处理!
 8.  如果你也有好源码或者教程,可以发布到网站,分享有金币奖励和额外收入!
 9.  本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
 10.  因源码具有可复制性,一经赞助 ,不得以任何形式退款。
 11.  更多详情请点击查看

汇站网 WordPress教程 (wordpress教程)文章底部添加打赏按钮功能 https://www.huizhanii.com/33179.html

汇站

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
2 条评论
  随机评论 表情开关按钮图片
表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情
登录后评论
2023年9月19日 09:51

打卡签到成功!每天打卡,遇见美好生活 :twisted:

2023年9月19日 09:52

成功了 :wink:

联系官方客服

为您解决烦忧 - 24小时在线 专业服务

(汇站网)一个专注站长资源的平台网站,提供最新的网站模板和整站源码,内容包含各类精品网页模板,企业网站模板,网站模板,DIV+CSS模板,织梦模板,帝国cms模板,discuz模板,wordpress模板,个人博客论坛模板,上千种免费网页模板下载尽在汇站网.找源码上汇站.huizhanii.com