免插件实现WordPress打赏功能

有没有用户打赏不重要，此功能不能缺少！

首先，将需要增加打赏功能的页面、模板（比如 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