• 网站认证
  • 教程:4,777|
  • 话题:3738|
  • 评论:45|
  • 会员:176|
  • 注册
  • 查看作者
  • 给自己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://www.niuqi.net/img/erweima.png"><b>微信</b></span>
    		<span class="alipay-code"><img class="alipay-img" src="https://www.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
    }

    生效之后的截图如下

     

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

  • 0
  • 0
  • 0
  • 82
  • 请登录之后再进行评论

    登录
  • 做任务
  • 实时动态
  • 偏好设置
  • 自定义-1
  • 单栏布局 侧栏位置: