本站之前一直在使用有赏「You Shang」这款WordPress打赏插件，此插件能为WordPress站点增加微信、支付宝打赏/赞赏功能，通过JS实现，博主发现加载略慢，今天分享一篇免插件实现WordPress打赏功能教程。
有没有用户打赏不重要，此功能不能缺少！Demo可查看本站的，哈哈，上干货！
首先，将需要增加打赏功能的页面、模板（比如 single.php 文件）位置添加以下 html 代码
|
1 2 3 4 5 6 7 8 |
<div class="reward"> <div class="reward-button">赏<span class="reward-code"> <span class="wechat-code"><img class="wechat-img" src="https://defcon.cn/wp-content/uploads/2019/04/weixinpay.jpg"><b>微信</b></span> <span class="alipay-code"><img class="alipay-img" src="https://defcon.cn/wp-content/uploads/2019/04/alipay.jpg"><b>支付宝</b></span> </span> </div> <p class="reward-notice"> 如果文章对您有帮助，欢迎打赏作者!</p> </div> |
然后，将 CSS 代码放到本主题的 style.css 文件里即可
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
/*打赏*/ .reward { padding: 0; margin: -30px 0 30px 0; } .reward .reward-notice { font-size: 14px; line-height: 14px; margin: 15px auto; text-align: center } .reward .reward-button { font-size: 33px; line-height: 40px; position: relative; display: block; width: 45px; height: 45px; 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: -200px; left: 50%; display: none; width: 326px; height: 170px; margin-left: -174px; padding: 10px; background: #05af4e; box-shadow: 0 5px 20px rgba(0,0,0,.5); } .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: right } .reward .reward-code span.alipay-code a { padding: 0 } .reward .reward-code span.wechat-code { float:left } .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: 30px; display: block; margin: 0; text-align: center; color: #fff } .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 } |
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
喜欢就支持以下吧
