【网站领地原创】告别插件，纯代码实现文章内容页打赏功能！

申明一下，这个打赏功能针对的一为导航主题，其他wordpress主题请留言以便帮助你们！

先上效果图：

具体实现步骤：

1. 1. 在/wp-content/themes/onenav/assets/css/下添加下面2中的CSS样式到bootstrap.min.css最下面
   2. /* 打赏按钮样式 */
.donate-button-container button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.donate-button-container button:hover {
background-color: #45a049;
}
/* 打赏弹窗样式 */
#donate-popup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.donate-popup-content {
background: white;
padding: 20px;
border-radius: 10px;
position: relative;
width: 300px;
}
.close {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
}
.donate-qr-codes div {
text-align: center;
margin-top: 10px;
}
.donate-qr-codes img {
width: 150px;
height: 150px;
}

   3. 添加下面4中的代码到/onenav/inc/functions/io-single-post.php的echo '<div class="text-xs text-muted"><div><span>©</span> '.__('版权声明','i_theme').'</div><div class="posts-copyright">' . $copy . '</div></div>';下面
   4. echo '<!-- 打赏按钮 --><div class="donate-button-container">
      <button onclick="showDonatePopup()">打赏支持</button>
      </div><!-- 打赏弹窗 -->
      <div id="donate-popup" style="display:none;">
      <div class="donate-popup-content">
      <span class="close" onclick="closeDonatePopup()">&times;</span>
      <h3>您的赞助更新的动力</h3>
      <div class="donate-qr-codes">
      <div>
      <h4>微信打赏</h4>
      <img src="https://cdn.jsdelivr.net/gh/zhuxiaoming2001/tuchuang/wzlingdi/202412022206265.png" alt="WeChat QR Code">
      </div>
      <div>
      <h4>支付宝打赏</h4>
      <img src="https://cdn.jsdelivr.net/gh/zhuxiaoming2001/tuchuang/wzlingdi/202412022206984.png" alt="Alipay QR Code">
      </div>
      </div>
      </div>
      </div>';
   5. 在/onenav/footer.php中最下面的</body></html>的前面增加js代码

至此大功告成，去文章看效果吧，如需在除文章以外的地方增加打赏功能，欢迎下面评论。