WordPress 博客简单添加微信/支付宝打赏功能

这东西对我来说其实也是为了折腾而折腾,不过,万一中奖了呢?万一真有读者想给我些蚊子肉呢?万一……这个小功能之前曾经有过,主题自带也有,不过不大喜欢那个样式。

前阵子还试过直接在每篇文末硬生生的贴了三块牛皮癣上去,没几天自己都看不过眼就撤掉了。昨天周末无意中搜到了复制粘贴就能实现的“大众化”样子的打赏功能,于是就搬过来用上了。

以下主要代码源自:老蒋部落 - http://www.itbulu.com/wp-shang.html

效果图

html 代码

根据需要,将需要插入打赏功能的页面、模板(比如 content.php 文件)添加下面的 html 代码。▼展开

<div class="reward">
<div class="reward-button">
<span class="reward-code"><span class="alipay-code"><img class="alipay-img" src="支付宝二维码图片路径(200*200px)"><b>支付宝扫码打赏</b></span><span class="wechat-code"><img class="wechat-img" src="微信二维码图片路径(200*200px)"><b>微信打赏</b></span></span>
</div>
<p class="reward-notice">
如果文章对您有帮助,欢迎移至上方按钮打赏作者
</p>
</div>

css 代码(参考)

将 css 代码放到主题的 style.css 文件中即可,可根据实际修改。▼展开

.reward {
padding: 5px 0
}

.reward .reward-notice {
font-size: 14px;
line-height: 14px;
margin: 15px auto;
text-align: center
}

.reward .reward-button {
font-size: 28px;
line-height: 58px;
position: relative;
display: block;
width: 60px;
height: 60px;
margin: 0 auto;
padding: 0;
-webkit-user-select: none;
text-align: center;
vertical-align: middle;
color: #fff;
border: 1px solid #f1b60e;
border-radius: 50%;
background: #fccd60;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fccd60),color-stop(100%,#fbae12),color-stop(100%,#2989d8),color-stop(100%,#207cca));
background: -webkit-linear-gradient(top,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%);
background: linear-gradient(to bottom,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%)
}

.reward .reward-code {
position: absolute;
top: -220px;
left: 50%;
display: none;
width: 350px;
height: 200px;
margin-left: -175px;
padding: 15px;
border: 1px solid #e6e6e6;
background: #fff;
box-shadow: 0 1px 1px 1px #efefef
}

.reward .reward-button:hover .reward-code {
display: block
}

.reward .reward-code span {
display: inline-block;
width: 150px;
height: 150px
}

.reward .reward-code span.alipay-code {
float: left
}

.reward .reward-code span.alipay-code a {
padding: 0
}

.reward .reward-code span.wechat-code {
float: right
}

.reward .reward-code img {
display: inline-block;
float: left;
width: 150px;
height: 150px;
margin: 0 auto;
border: 0
}

.reward .reward-code b {
font-size: 14px;
line-height: 26px;
display: block;
margin: 0;
text-align: center;
color: #666
}

.reward .reward-code b.notice {
line-height: 2rem;
margin-top: -1rem;
color: #999
}

.reward .reward-code:after,.reward .reward-code:before {
position: absolute;
content: '';
border: 10px solid transparent
}

.reward .reward-code:after {
bottom: -19px;
left: 50%;
margin-left: -10px;
border-top-color: #fff
}

.reward .reward-code:before {
bottom: -20px;
left: 50%;
margin-left: -10px;
border-top-color: #e6e6e6
}

js 代码

在 PC 端,添加完 html 和 css 代码就完事了。但是,在移动端,触摸屏,没有 hover 事件,赏字就弹不出二维码了。所以得加个代码,改成点击弹出。

参考代码▼展开

(判断代码源自:What is the best way to detect a mobile device in jQuery?

// 赏
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {
$(".reward-button").click(function(){
$(".reward-code").fadeToggle("fast");
return false;
})
}

除非注明,沙唐桔文章均为原创,本文地址 https://cyhour.com/448/,转载时必须以链接形式注明原始出处。
声明:我们不销售主机,选主机需合法使用。任何主机需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🔞:Netflix 奈飞 YouTube 合租免费节点Telegram 频道

优化 WordPress 评论回复通知邮件

用上 G Suite 后,域名邮箱自然也托管到 Google,Gmail 配合 Gmail SMTP 插件使用,还行。更改后回复评论提交速度巨慢,肯定与这个评论回复通知邮件有关。 原本使用 VPS Postfix 直接发送,虽然基本上会进垃圾邮件,但是回复评论提交速度很快。再次尝试使用 wp_schedule_single_event 延迟发送评论…

使用 rclone 将 Google Drive 文件同步至 OneDrive

前几天上了博友「灵尘居」的 Office 365 车,1T OneDrive 到手,手机照片一直喂 Google AI,挺方便的,以前还会同步一份到家里的垃圾西数 NAS,不过并不太自动,后来就懒得弄了。 Google 虽然是大厂,但是数据只有一份,还是怕怕,多一个备份不是坏事。苹果 iCloud 不错,但是贼贵,况且我只有一个…
浏览: 76

尼康 D7100 中文使用说明书 高清 PDF 电子版免费下载

尼康 D7100 说明书是一份介绍详细尼康 D7100 单反官方教程,推荐购买了 D7100 单反博友下载保存参考,以便随时查看一些常用按键操作和使用技巧。 尼康 D7100 简介 尼康 D7100 搭载先进的对象捕捉性能和成像性能,能够忠实还原拍摄细节。高密度的 51 点自动对焦系统准确捕捉目标对象并进行跟踪,…

全网热门公共 BitTorrent Tracker 列表合集 加速BT下载

BT 下载速度取决于其他下载同一资源的用户上传速度。做种「指上传文件数据给其他 BT 用户的行为」用户越多,你的下载速度越快!如果资源没人提供上传,就会完全没有下载速度,而做种用户靠 Peer、DHT、Tracker 获得。 Tracker 是什么? BT 下载的文件都是其他用户上传给你的。 BT 下载速度…
浏览: 36

Comments:48

  1. 曾经想加,想想还是算了,我的博客每天没几个人看,加了也没什么意义。

    2016.11.14 10:47 # 回复
    1楼
  2. 已打赏0.01

    2016.11.14 16:42 # 回复
    2楼
  3. 赏你一丈红,哈哈。

    2016.11.14 17:13 # 回复
    3楼
    • @河石子 度娘说:一丈红主要在后宫中用来惩罚犯错的妃嫔宫人,取两寸厚五尺长的板子责打女犯腰部以下的位置,不计数目打到筋骨皆断,血肉模糊为止,远远看去,鲜红一片,故曰“一丈红”。
      —————————–
      石子兄也太狠了吧,哈~

      2016.11.14 17:56 # 回复
  4. 对于内容非常有用的还是会赏的吧

    2016.11.14 19:17 # 回复
    4楼
  5. 哈哈,不敢想。

    2016.11.14 23:50 # 回复
    5楼
  6. 如果能直接调用微信就好了

    2016.11.15 11:37 # 回复
    6楼
  7. 居然修改了css,全局灰了

    2016.11.15 12:43 # 回复
    7楼
  8. 有收入了没?

    2016.11.15 17:49 # 回复
    8楼
  9. 我也加了一个,纯粹就是好玩,也没指望有人打赏~

    2016.11.15 19:44 # 回复
    9楼
  10. 未打赏,哈哈

    2016.11.16 02:04 # 回复
    10楼
  11. 这玩意不错,改天我也去弄一个试试

    2016.11.18 09:15 # 回复
    11楼
  12. 这是活生生的剥削

    2016.11.18 13:13 # 回复
    12楼
  13. 正在申请某站长平台的打赏功能,还没有下来。

    2016.11.18 17:46 # 回复
    13楼
    • @法律派 为啥要申请它的?直接挂个支付宝或者微信的二维码不就好了?

      2016.11.18 17:48 # 回复
      • @老杨 我看了一下,你博文中提到的那个方法感觉有点复杂,要在css’中添加代码,还要作相应修改。我那个博客css是外部调用的,不好修改。

        2016.11.19 09:07 # 回复
  14. 嘿嘿我的 typecho 也有!

    2016.11.19 21:30 # 回复
    14楼
  15. 支持,但我自己就懒得折腾了。

    2016.11.20 19:27 # 回复
    15楼
  16. 我也挂了,但从不曾有人主动打赏过,我还准备取消了。

    2016.11.20 22:57 # 回复
    16楼
  17. 我是新手,请教个问题,电脑端我已经搞定,就是手机端还不行,请教下那个js代码应该添加到哪个文件?谢谢

    2017.06.06 19:05 # 回复
    17楼
  18. 请问博主,这个js代码应该添加到哪个js文件中?

    2017.09.17 14:51 # 回复
    18楼

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息