WordPress文章中微信打赏功能的2种实现方法
作者:来源:wordpress发表于:2020-06-17 21:33:49
本文实例讲述了wordpress文章中微信打赏功能的2种实现方法。分享给大家供大家参考,具体如下:
打赏功能功能就是给我们一些资助了,写博客不容易所以会给一些内容与说明了,下面我们就一起来看2种给wordpress文章添加微信打赏功能实现方法.
方法一、比较专业也是比较复杂了
给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.找到
<!-- END .entry-content -->
在上行添加如下代码:
<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>
3.修改后保存上传即可,当然你也可以根据你的喜好选择将此段代码放置到何处.
相关文章
-
无相关信息
最新推荐
- 宝塔面板FTP链接服务器发回了不可路由地址
- 阿里云ecs安装宝塔面板失败原因?以及安装步骤?
- 织梦手机端-识别跳转
- html如何在一个form表单中实现多个submit
- thinkphp无限分类原理和实现代码
- thinkphp6 请求(request)变量
- 帝国CMS自定义列表SQL调用方法
- 帝国CMS自定义列表的使用实例
- 帝国cms自定义列表限制某个栏目显示
- PHP中利用for循环判断一个数是不是回文数
- PHP中判断一个数是否为素数的方法
- PHP中break,continue,exit的使用与区别
- 测试PHP连接MYSQL成功与否的代码
- PHP编程求最大公约数与最小公倍数的方法示例
- PHP获取数组中单列值的方法
- PHP使用一个for循环将N*N的二维数组的所有值置1实现方法
- HTML5+css3:3D旋转木马效果相册
- HTML,CSS,font-family:中文字体和英文名称对照表
- HTML使用栅格布局实现六种筛子样式的代码详解
- 修改CSS样式实现网页变灰色/黑白代码的几个方法整理
最新更新
- 黄庭坚《水调歌头·游览》我欲穿花寻路 直入白云深处
- 黄庭坚《品令·茶词》恰如灯下 故人万里 归来对影
- 杜荀鹤《溪兴》山雨溪风卷钓丝 瓦瓯篷底独斟时
- 储光羲《张谷田舍》一径入寒竹 小桥穿野花
- 赵嘏《寒塘》晓发梳临水 寒塘坐见秋
- 蔡确《夏日登车盖亭》纸屏石枕竹方床 手倦抛书午梦长
- 李峤《书》河图八卦出 洛范九畴初
- 刘长卿《饯别王十一南游》长江一帆远 落日五湖春
- 韦庄《章台夜思》芳草已云暮 故人殊未来
- 卢纶《宿澄上人院》竹窗闻远水 月出似溪中
- 孟浩然《留别王侍御维》只应守寂寞 还掩故园扉
- 苏轼《南乡子·送述古》归路晚风清 一枕初寒梦不成
- 王维《木兰柴》秋山敛馀照 飞鸟逐前侣
- 王维《栾家濑》跳波自相溅 白鹭惊复下
- 苏轼《少年游·润州作代人寄远》对酒卷帘邀明月 风露透窗纱
- 苏轼《行香子·过七里濑》一叶舟轻 双桨鸿惊 水天清 影湛波平
- 王维《汉江临泛》江流天地外 山色有无中
- 柳宗元《溪居》晓耕翻露草 夜榜响溪石
- 杜牧《赠宣州元处士》蓬蒿三亩居 宽于一天下
- 项鸿祚《清平乐·池上纳凉》水天清话 院静人销夏