给自己WordPress加个免费的打赏功能


现在做博客的人不在少数,大部分建立博客也是免费分享并没有收入,但我们建立博客都是需要买服务器运行,所以挣点额外收入补贴还是不错的。
WordPress主题并不是每款都有打赏功能,那么我们要加入这个打赏功能需要加入以下代码;
1、首先找到模板文件single.php,在需要的位置加入以下代码;

<div class="reward">
    <div class="reward-button">赏<span class="reward-code">
		<span class="wechat-code"><img class="wechat-img" src="https://rrzcms.niuqi.net/img/erweima.png"><b>微信</b></span>
		<span class="alipay-code"><img class="alipay-img" src="https://rrzcms.niuqi.net/img/erweima.png"><b>支付宝</b></span>
		</span>
    </div>
	<p class="reward-notice"> 如果文章对您有帮助,欢迎打赏作者!</p>
</div>

2、在首页<style>内容</style>的中间放入以下内容,需要和上一步同一个页面才能生效

/*打赏*/ .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
}

生效之后的截图如下

 
如果不会可以下载文件,根据文件位置进行添加。

给TA打赏
共{{data.count}}人
人已打赏
网站教程

【WordPress教程】学会如何给WordPress文章自动添加tag标签

2020-8-12 9:00:41

网站教程

【织梦模板】织梦CMS家居建材网|找家具网|搞装修装饰网站织梦模板(WAP手机端)

2020-8-12 17:02:57

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索