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/,转载时烦请以链接形式注明原始出处。
声明:我们不销售主机,任何VPS主机均有跑路风险且需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🍄:Netflix 奈飞 YouTube 合租

Gravatar 头像被墙及解决方案

Gravatar 头像真是一言难尽,时而正常时而抽风时而无法访问……就一个 Gravatar 头像,这有啥好强(现代通假字)的呢?(据说是被其它服务连累?) 解决办法 - 调用 ssl/cn 头像链接 历史解决办法:调用 ssl 头像链接——https还是没被墙的,而且速度还不错,直接调用这个最简单了。主题 functions.…
浏览: 96

Gridea 一个静态博客写作客户端 搭建免费静态博客

前几天折腾 Hugo,上手不难,建了个几乎零成本垃圾站,真香!Hugo 本地环境搭建比 Jekyll 简单,而 Gridea 比 Hugo 更简单,甚至,从功能上来说,Gridea 就是 Hugo GUI 版。 Gridea 简介 Gridea,一个静态博客写作客户端,小白也可以 GitHub Pages 搭建静态博客。开源、易用、强大。记录生…

斐讯 K3 路由器上车 简单折腾记录

一年前上过 K1、K2 的车,都安全下车,两个都高价专卖,目前还正常服役中。前阵子看博友 FROYO 双十一连上两趟车,忍不住上了 K3 的车,外加 K2。(2018.8 已翻车) 斐讯 K3 路由器上车 简单折腾记录 K3 上车前特意 Google 做了一下功课,看有没第三方固件可以刷,折腾方不方便,要不要拆机……结…
浏览: 52

斐讯 K3 路由器刷 OpenWRT LEDE 及固件收集下载

K3 上车已四个(多)月了,因为是三星闪存,梅林支持不好,折腾完就闲置。后来看网友说 K3 会漏油,觉得不可思议,就更加不想折腾它,只希望能顺利成功下车(K3)(2018.8 已翻车)。 斐讯 K3 OpenWrt LEDE 梅林固件大全:点击直达!!! 2019 斐讯K3 全版本 免降级、免拆机、免TTL 开启telnet …
浏览: 145
浏览: 61

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