有没有用户打赏不重要,此功能不能缺少!
首先,将需要增加打赏功能的页面、模板(比如 single.php 文件)位置添加以下 html 代码
<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 文件里即可
/*打赏*/ .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 }
参考文章:https://defcon.cn/212.html
成都市的