设为首页 - 加入收藏 - 网站地图 SecYe安全 Www.SecYe.Com - 国内网络信息安全IT技术门户网
当前位置:SecYe > 网站运营 > 建站心得 > 正文

给wordpress增加一个文章赞赏功能 免插件

时间:2017-01-12 09:56 来源:本站整理 作者:SecYe安全 阅读:

最近一直想换主题,可是没啥主题可以换的,索性自己改吧,一点一点改,改到我喜欢为止。

然后我就开始看别人博客,哪个功能还看就偷哪个过来,这不,觉得WP大学的赞赏挺好看的,但是又不想去使用插件。

所以就有了这么一个文章,嗯,很简单,也是加一段css跟一个div即可。

演示可以在本博客的文章页查看。

首先在文章页面(通常都是single.php)里面加一段代码,如下(里面的二维码url需要修改为自己的url)

添加位置在文章的结尾就行,通常都是在<footer class=”article-footer”> 的上面。

<div class="reward"><div class="reward-button">赏 <span class="reward-code"> <span class="alipay-code"> <img class="alipay-img wdp-appear" src="http://www.secye.com/alipay.png"><b>支付宝扫码打赏</b> </span> <span class="wechat-code"> <img class="wechat-img wdp-appear" src="http://www.secye.com/tenpay.jpg"><b>微信打赏</b></span> </span></div><p class="reward-notice">如果文章对你有帮助,欢迎点击上方按钮打赏作者</p></div>

 

加完之后就在Style.css文件添加一段代码就行了,然后就可以使用了。

.reward {
 padding: 5px 0
}

.reward .reward-notice {
 font-size: 14px;
 line-height: 14px;
 margin: 15px auto;
 text-align: center
}

.reward .reward-button {
 font-size: 28px;
 line-height: 58px;
 position: relative;
 display: block;
 width: 60px;
 height: 60px;
 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: -220px;
 left: 50%;
 display: none;
 width: 350px;
 height: 200px;
 margin-left: -175px;
 padding: 15px;
 border: 1px solid #e6e6e6;
 background: #fff;
 box-shadow: 0 1px 1px 1px #efefef
}

.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: left
}

.reward .reward-code span.alipay-code a {
 padding: 0
}

.reward .reward-code span.wechat-code {
 float: right
}

.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: 26px;
 display: block;
 margin: 0;
 text-align: center;
 color: #666
}

.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
}

 

如果你css厉害的话,当然可以自己修改样式,仅供参考。

添加完之后就可以使用了,图片演示如下:

本文来源:SecYe安全网[http://www.secye.com] (责任编辑:SecYe安全)

点击复制链接 与好友分享!

顶一下
(0)
0%
踩一下
(0)
0%