评论框添加图片背景特效:
插入子主题style.css里面
/*评论背景图开始*/.com-form-textarea textarea {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://www.atbkw.cn/wp-content/uploads/aotian/qita/pinglu.png) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}.com-form-textarea textarea:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}/*评论背景图结束*/
b2美化之等级自定义颜色:
代码写入子主题style.css
/*等级颜色开始*/
.lv-icon.b2-vip0 b {
color: #ffdbb1 !important;
background: linear-gradient(90.34deg, #393f68 0.27%, #24263c 99.7%);
padding: 0 5px;
border-radius: 3px;
}
.lv-icon.b2-vip1 b {
color: #ffdbb1 !important;
background: linear-gradient(90.34deg, #393f68 0.27%, #24263c 99.7%);
padding: 0 5px;
border-radius: 3px;
}
.lv-icon.b2-vip2 b {
color: #ffdbb1 !important;
background: linear-gradient(90.34deg, #393f68 0.27%, #24263c 99.7%);
padding: 0 5px;
border-radius: 3px;
}
.lv-icon.b2-vip3 b {
color: #ffdbb1 !important;
background: linear-gradient(90.34deg, #393f68 0.27%, #24263c 99.7%);
padding: 0 5px;
border-radius: 3px;
}
.user-w-lv {
display: flex;
height: 22px;
flex-wrap: wrap;
}
/*用户等级*/
.b2-lv0 i {
background-color: #81d742!important;
color: #ffffff!important;
}
.b2-lv1 i {
background-color: #ff3a55!important;
color: #ffffff!important;
}
.b2-lv2 i {
background-color: #9d87d2!important;
color: #ffffff!important;
}
.b2-lv3 i {
background-color: #5ca0ff!important;
color: #ffffff!important;
}
.b2-lv4 i {
background-color: #1677ff!important;
color: #ffffff!important;
}
.b2-lv5 i {
background-color: #385ee5!important;
color: #ffffff!important;
}
.b2-lv6 i {
background-color: #19b955!important;
color: #ffffff!important;
}
.comment-author .user-title{
font-size: 13px;
margin-left:10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
width:50%;
-webkit-animation: shake 3s infinite;
animation: shake 3s infinite;
color:#ff9900;
}
@-webkit-keyframes shake{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}@keyframes shake{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
/*等级颜色结束*/
文章版权和下载声明

<fieldset style="border: 8px dashed; background: #ffffff; padding: 10px; border-radius: 5px; line-height: 1.5em; color: #595959;" data-mce-style="border: 2px dashed; background: #ffffff; padding: 10px; border-radius: 5px; line-height: 1.5em; color: #595959;">
<legend style="color: #ffffff; width: 30%; text-align: center; background-color: #e8b235; border-radius: 5px;" align="center" data-mce-style="color: #ffffff; width: 30%; text-align: center; background-color: #e8b235; border-radius: 8px;">重要声明</legend>
<fieldset style="border: 1px dashed #e8b235; padding: 10px; border-radius: 5px; line-height: 2em; font-size: 12px; color: #bdbdbd; text-align: center;" data-mce-style="border: 1px dashed #e8b235; padding: 10px; border-radius: 5px; line-height: 2em; font-size: 12px; color: #bdbdbd; text-align: center;">
<p style="font-size: 12px; text-align: center;" data-mce-style="font-size: 12px; text-align: center;"><span style="color: #000000;" data-mce-style="color: #000000;">本站资源大多来自网络,如有侵犯你的权益请联系管理员剑去了无痕,</span><span style="color: #000000;" data-mce-style="color: #000000;">QQ</span><span style="color: #ff6600;" data-mce-style="color: #ff6600;">8747260</span> <span style="color: #000000;" data-mce-style="color: #000000;">我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!</span></p>
<hr>
<p style="font-size: 12px; text-align: center;" data-mce-style="font-size: 12px; text-align: center;"><span style="color: #000000;" data-mce-style="color: #000000;">如果遇到</span><span style="color: #ff0000;" data-mce-style="color: #ff0000;">付费</span><span style="color: #000000;" data-mce-style="color: #000000;">才可</span><span style="color: #33cccc;" data-mce-style="color: #33cccc;">观看</span><span style="color: #000000;" data-mce-style="color: #000000;">的文章,建议升级</span><span style="color: #ff0000;" data-mce-style="color: #ff0000;">终身VIP。</span><span style="color: #000000;" data-mce-style="color: #000000;">全站所有资源</span><span style="color: #ff0000;" data-mce-style="color: #ff0000;">“<span style="color: #3366ff;" data-mce-style="color: #3366ff;">任意下免费看</span>”。</span><span style="color: #ff9900;" data-mce-style="color: #ff9900;">本站资源少部分采用</span><span style="color: #00ccff;" data-mce-style="color: #00ccff;">7z压缩,</span><span style="color: #33cccc;" data-mce-style="color: #33cccc;">为防止有人压缩软件不支持7z格式</span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;">,7z</span><span style="color: #000000;" data-mce-style="color: #000000;">解压,建议下载</span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;"><em>7-zip</em></span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;">,zip、rar</span><span style="color: #000000;" data-mce-style="color: #000000;">解压,建议下载</span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;"><em>WinRAR</em></span><span style="color: #000000;" data-mce-style="color: #000000;">。</span></p>
</fieldset>
</fieldset>
仿尤点设计首页大图加六格代码分享
b2美化之首页四格
头部自定义HTML
<script type="text/javascript" src="//at.alicdn.com/t/font_3187889_jk0nugfzkgd.js"></script>
首页模块自定义HTML
<div class="home-first">
<div class="aibkcontainer hide_sm">
<div class="row">
<div class="col-1-4">
<div class="hf-widget hf-widget-1 hf-widget-
software">
<h3 class="hf-widget-title"> <svg class="libs1"
aria-hidden="true"><use xlink:href="#bd-tishifuhao"></use></svg>副业赚钱<span>网络
兼职副业赚钱项目教程</span>
</h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li><a href="/xmszzq/dsmh"
target=_blank><svg class="lib sixin" aria-hidden="true"><use xlink:href="#bd-
yinliugongju"></use></svg><span>电商卖货</span></a></li>
<li><a href="/xmszzq/dspbx"
target=_blank><svg class="lib" aria-hidden="true"><use xlink:href="#bd-
zhibo"></use></svg><span>视频变现</span></a></li>
<li><a href="/xmszzq/ylbx"
target=_blank><svg class="lib" aria-hidden="true"><use xlink:href="#bd-
xiangmusuohuotisheng"></use></svg><span>引流变现</span></a></li>
<li><a href="/xmszzq/sczqxm"
target=_blank><svg class="lib" aria-hidden="true"><use xlink:href="#bd-
cunqianguan-copy"></use></svg><span>实操赚钱</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-1-4">
<div class="hf-widget hf-widget-2">
<h3 class="hf-widget-title"> <svg class="libs1"
aria-hidden="true"><use xlink:href="#bd-tishifuhao"></use></svg>热门推荐<span>最受
大家欢迎的链接</span> </h3>
<div class="hf-widget-content">
<div class="no-scroll hf-tags">
<a class="style_orange" href="#"
target="_blank"><span>链接一</span></a>
<a class="" href="#"
target="_blank"><span>链接二</span></a>
<a class="style_orange" href="#" target="_blank"><span>链接三</span></a>
<a class="" href="#"
target="_blank"><span>链接四</span></a>
</div>
</div>
</div>
</div>
<div class="col-1-4">
<div class="hf-widget hf-widget-1 hf-widget-hot-
cats">
<h3 class="hf-widget-title"><svg class="libs1"
aria-hidden="true"><use xlink:href="#bd-tishifuhao"></use></svg>知识学习<span>全网
知识课程学习+代理</span> </h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li><a href="/jfdhkc"
target="_blank"><svg class="lib" aria-hidden="true"><use xlink:href="#bd-
kepujiaoyu"></use></svg><span>积分课程</span></a></li>
<li><a href="/cydd"
target="_blank"><svg class="lib" aria-hidden="true"><use xlink:href="#bd-
chuangyequ"></use></svg><span>创业导读</span></a></li>
<li><a href="/vips"
target="_blank"><svg class="lib" aria-hidden="true"><use xlink:href="#bd-ic-
vip"></use></svg><span>VIP会员</span></a></li>
<li><a href="/vips"
target="_blank"><svg class="lib" aria-hidden="true"><use xlink:href="#bd-
hezuo"></use></svg><span>网站合作</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-1-4">
<div class="hf-widget hf-widget-4">
<h3 class="hf-widget-title"> <svg class="libs1"
aria-hidden="true"><use xlink:href="#bd-tishifuhao"></use></svg>网站公告<span>发布
最新的活动信息</span>
</h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li><h3><a href="/vips"
target="_blank"> <i class="icon-time"></i> <span>赞助贵宾会员限时优惠</span><em>点
击查看详情</em></a></h3></li>
<li><h3><a href="/vips"
target="_blank"> <i class="icon-time"></i> <span>现在开通终身会员只需要128元
</span></a></h3></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
子主题style.css
/*首页四格开始*/
.libs1 {
width: 1.3em;
height: 1.3em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
margin-right: 3px;
}
.libs {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.lib {
width: 3em;
height: 3em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
@media screen and (max-width: 768px){
.home-first .hf-widget-4 .hf-widget-content ul li{padding-left:12px;}
}
.home-first {
margin-bottom: 0px
}
.home-first .sixin{
width: 2.8em;
}
.home-first .tese{
width: 1.1em;
}
@media (min-width:1024px) {
.home-first {
/*background: #fcfcfc*/
}
}
.home-first .aibkcontainer {
padding-top: 0
}
.home-first .vitara_slide_in {
margin-top: 15px;
margin-bottom: 15px;
border-radius: 3px
}
@media (min-width:1024px) {
.home-first .vitara_slide_in {
margin-top: 0;
margin-bottom: 0
}
}
.home-first .h-images {
box-sizing: content-box;
margin: 0;
padding: 0
}
.home-first .h-images:after,.home-first .h-images:before {
clear: both;
display: block;
visibility: none;
height: 0;
content: "";
line-height: 0
}
.home-first .h-images:after {
display: block;
margin: 0 -15px;
height: 0;
border-bottom: 15px solid #f2f2f2;
content: ''
}
@media (min-width:768px) {
.home-first .h-images:after {
display: none
}
}
@media (min-width:768px) {
.home-first .h-images {
display: box;
display: -ms-flexbox;
display: flex;
width: 100%;
justify-content: space-between
}
}
@media (min-width:1024px) {
.home-first .h-images {
width: 25%
}
}
.home-first .h-images .item-tuwen {
float: left;
padding: 0 6.5px;
width: 50%
}
@media (min-width:1024px) {
.home-first .h-images .item-tuwen {
float: none
}
}
@media (min-width:1024px) {
.home-first .h-images {
display: block;
box-sizing: border-box;
padding: 0 7.3333px
}
.home-first .h-images .item-tuwen {
padding: 0;
width: auto
}
}
.home-first .item-tuwen {
margin-bottom: 15px
}
@media (min-width:768px) {
.home-first .item-tuwen {
margin-bottom: 13px
}
}
.home-first .item-tuwen a {
position: relative;
display: block;
overflow: hidden;
border-radius: 3px
}
.home-first .item-tuwen a .thumb {
padding-top: 57%;
transition: all .2s;
transform-origin: center
}
.home-first .item-tuwen a strong {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: block;
padding: .4em .8em .6em;
background-image: linear-gradient(to bottom,rgba(0,0,0,.2) 0,rgba(0,0,0,.6) 100%);
background-repeat: repeat-x;
box-shadow: 0 -7px 15px rgba(0,0,0,.2);
color: #fff;
letter-spacing: .5px;
font-weight: 700;
font-size: 9pt;
line-height: 1.3
}
@media (min-width:768px) {
.home-first .item-tuwen a strong {
letter-spacing: 1px;
font-size: 14px;
line-height: 1.4
}
}
.home-first .hf-widget {
box-sizing: border-box;
margin-bottom: 15px;
padding: 14px 17px 0;
border: 1px solid #f2f2f2;
background: #fff;
box-shadow: 8px 8px 9pt rgba(255, 255, 255, 0);
border-radius: 20px;
}
@media (min-width:768px) {
.home-first .hf-widget {
overflow: hidden;
height: 135px
}
}
@media (min-width:1024px) {
.home-first .hf-widget {
margin-bottom: 0
}
}
.home-first .hf-widget [class*=" icon-"]:before,.home-first .hf-widget [class^=icon-]:before {
margin: 0
}
.home-first .hf-widget .hf-widget-title {
margin-bottom: 14px;
padding: 0 0 10px;
border-bottom: 1px solid #f2f2f2;
color: #383838;
letter-spacing: 1px;
font-weight: 700;
font-size: 15px;
line-height: 20px
}
.home-first .hf-widget .hf-widget-title a {
color: #383838
}
.home-first .hf-widget .hf-widget-title>i {
margin-right: 2px;
color: #2882c5
}
.home-first .hf-widget .hf-widget-title span {
margin-left: 10px;
color: #a7a7a7;
font-weight: 400;
font-size: 9pt;
line-height: 20px
}
@media (min-width:1024px) {
.home-first .hf-widget .hf-widget-title span {
display: none
}
}
@media (min-width:1330px) {
.home-first .hf-widget .hf-widget-title span {
display: inline
}
}
.home-first .hf-widget .hf-widget-title .pages {
float: right;
padding-top: 2px
}
.home-first .hf-widget .hf-widget-title .pages .next,.home-first .hf-widget .hf-widget-title .pages .prev {
float: left;
margin: 0;
padding: 0 2px;
height: 1pc;
border: 0px solid #eee;
color: #ccc;
font-size: 15px;
line-height: 15px;
cursor: pointer
}
.home-first .hf-widget .hf-widget-title .pages .next:hover,.home-first .hf-widget .hf-widget-title .pages .prev:hover {
color: #2882c5
}
.home-first .hf-widget .hf-widget-title .pages .prev {
border-right: none
}
.home-first .hf-widget .hf-tags {
margin-bottom: -10px
}
@media (min-width:768px) {
.home-first .hf-widget .hf-tags {
overflow: hidden;
height: 4pc
}
}
.home-first .hf-widget .hf-tags a {
display: inline-block;
margin: 0 5px 10px;
padding: 0 5px;
height: 22px;
border-radius: 20px;
background: #f9f9f9;
color: #888;
white-space: nowrap;
font-size: 9pt;
line-height: 22px;
word-break: break-all
}
.home-first .hf-widget .hf-tags a.style_orange,.home-first .hf-widget .hf-tags a:hover {
background: #2882c5;
color: #fff
}
.home-first .hf-widget-4 .hf-widget-title {
margin-bottom: 19px
}
.home-first .hf-widget-4 .hf-widget-content {
color: #888;
font-size: 14px
}
.home-first .hf-widget-4 .hf-widget-content a {
color: #888
}
.home-first .hf-widget-4 .hf-widget-content a:hover {
color: #2882c5
}
.home-first .hf-widget-4 .hf-widget-content h3 {
overflow: hidden;
height: 22px;
font-weight: 400;
font-size: 13px;
line-height: 22px
}
.home-first .hf-widget-4 .hf-widget-content em {
float: right;
padding: 0 5px;
height: 22px;
border-radius: 20px;
background: #e3f0f8;
color: #2882c5;
font-style: normal;
font-size: 9pt;
line-height: 22px
}
.home-first .hf-widget-4 .hf-widget-content ul {
background: #fff
}
.home-first .hf-widget-4 .hf-widget-content ul li {
margin-bottom: 5px
}
.home-first .hf-widget-4 .hf-widget-content ul li:last-child {
margin-bottom: 0
}
.home-first .hf-widget-1 .hf-widget-content a {
color: #888
}
.home-first .hf-widget-1 .hf-widget-content a:hover {
color: #2882c5
}
.home-first .hf-widget-1 .hf-widget-content li {
float: left;
box-sizing: border-box;
padding: 0 10px;
width: 25%;
text-align: center;
font-size: 9pt
}
.home-first .hf-widget-1 .hf-widget-content li .thumb {
margin: 0 auto 4px;
padding-top: 36px;
width: 36px
}
.home-first .hf-widget-1 .hf-widget-content li span {
display: block;
overflow: hidden;
height: 1pc;
line-height: 1pc
}
.home-first .hf-widget-1 .hf-widget-content .scroll-h {
margin: 0 -10px
}
.home-first .scroll-h {
position: relative;
overflow: hidden;
height: 56px
}
.home-first .scroll-h ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: all .2s
}
.home-first .scroll-h ul:after,.home-first .scroll-h ul:before {
clear: both;
display: block;
visibility: none;
height: 0;
content: "";
line-height: 0
}
.home-first .scroll-h .holdon {
position: absolute;
top: 0;
left: 100%
}
.home-first .scroll-h .holdon-prev {
left: -100%
}
.home-first .hf-widget-hot-cats .hhicon {
display: inline-block;
margin-bottom: 5px;
width: 36px;
height: 36px;
border-radius: 100%;
background: #fff5f0;
color: #2882c5;
text-align: center;
font-size: 20px;
line-height: 36px
}
.home-first .hf-widget-hot-cats .scroll-h li a {
display: block
}
.home-first .hf-widget-hot-cats .scroll-h li a:hover .hhicon {
background: #2882c5;
color: #fff
}
.home-first .thumb {
position: relative;
display: block;
overflow: hidden;
padding-top: 66.7%;
width: 100%;
height: 0;
background-color: transparent;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all .2s
}
.home-first i {
font-weight: 300
}
@media screen and (max-width:720px) {
.home-first .hf-widget-1 .hf-widget-content .scroll-h,.home-first .hf-widget-content {
margin: 1pc -10px
}
}
.aibkcontainer {
position: relative;
overflow: hidden;
margin: 0 auto;
width: 100%
}
@media (min-width:768px) {
.aibkcontainer {
overflow: visible;
max-width: 8in
}
}
@media (min-width: 1024px){
.aibkcontainer {
max-width: 100%;
}
}
@media (min-width: 1024px){
.container {
max-width: 1300px;
}
}
.aibkcontainer:after,.aibkcontainer:before {
clear: both;
display: block;
visibility: none;
height: 0;
content: "";
line-height: 0
}
.aibkcontainer .row {
margin: 0 -7.3333px
}
.aibkcontainer .col-1-4,.aibkcontainer .col-2-4,.aibkcontainer .col-3-4 {
float: left;
box-sizing: border-box;
padding: 0 7.3333px;
width: 100%
}
@media (min-width:768px) {
.aibkcontainer .col-1-4 {
width: 50%
}
}
@media (min-width:1024px) {
.aibkcontainer .col-1-4 {
width: 25%
}
}
@media (min-width:768px) {
.aibkcontainer .col-2-4 {
width: 100%
}
}
@media (min-width:1024px) {
.aibkcontainer .col-2-4 {
padding-right: 8px;
width: 50%
}
}
@media (min-width:768px) {
.aibkcontainer .col-3-4 {
width: 100%
}
}
@media (min-width:1024px) {
.aibkcontainer .col-3-4 {
padding-right: 8.6666px;
width: 75%
}
}
/*首页四格结束*/
WordPress免费图像优化和压缩插件reSmush.it
reSmush.it插件安装启用
在 WordPress后台的插件,新增插件,搜索“reSmush.it”,如下图所示,安装并启用。
如果主机在国内可能安装会不正常,这时候需要直接去 WordPress官网下载,再用 ftp上传到网站插件目录,启用。
reSmush.it插件设置
进入“媒体”>reSmush.it,看到右侧的设置页面。
默认英文语言,使用 Chrome浏览器在线翻译功能可以很好的加深理解和操作便捷。
- 画面质量:优化之后的图片质量,数字越大图片容量越大;
- 上传优化:勾选后在上传时会自动优化;
- CRON上的流程优化:在wp-config.php 添加 DISABLE_WP_CRON并设置为TRUE,插件会自动优化图片。

- 保留EXIF:图片拍摄地、拍摄器材信息、时间、坐标等,大部分网站用不到;
- 不保留备份:插件默认创建原始图片的副本,并且只会对副本进行优化。
reSmush.it插件使用
使用这个插件分为两种情况。
1、新网站勾选“上传优化”就可以了。
2、手动优化。
之前有很多图片未优化,现在打算启用插件来优化图片。点击上图中的“优化所有图片”即可。
3、定期自动优化。
先勾选上图中的“CRON上的流程优化”,然后按照下面步骤操作:
再手动设置定时任务后,插件就会按照设置好的计划定期自动优化图片了。添加办法:在网站根目录编辑 wp-config.php文件,找到 define( 'WP_DEBUG', false ); 在下面一行添加: define( 'DISABLE_WP_CRON',true ); 点击保存即可。
4、注意
批量优化图片对 php和 MySQL占用很大,容易造成 CPU满载、数据库卡顿,建议在网站访问量低的时候再运行,特别是有大量图片(几百数千张)待优化的情况要谨慎。
需要提高 PHP-FPM数量和给 MySQL更大缓存来提速,根据不同服务器的情况这里的设置也是不同的,没有固定的参数,大家需要自行摸索设置。
resmush.it在国内和国外服务器运行速度都还不错,如果你的网站有大量图片待优化,可以试试这款插件。


