7B2模板分类面模板二次优化-顶部分类标题描述以及背景图片

前言

相比上次7b2模板分类页面升级的优化，这次主要的改动是调用了分类的描述以及特色图片。也就是后台添加了分类描述和特色图片以后可以在顶部显示。但是缺点就是筛选模块就没法再二次调用了（第一版新增了筛选分类小图标ICON，具体可以看上篇教程），毕竟相对于大部分企业占而言，每个页面有个特色图片设置还是很有用的。如果执意想在菜单栏上有个漂亮的小图标，建议使用 i 标签并调用7B2的默认font字体图标。

CSS部分

首先是重写的了页面的结构，把分类标题和分类描述提出来，并为之添加上背景图。建议的尺寸是最低180px，宽度最好是全宽度，图片主题色调则根据网站自身来调整。为了能更好的显示标题和描述，还给这层Div添加了after伪类，懂CSS的同学可以自己调整高度和伪类颜色。筛选分类这块同样用到了CSS函数var，也可以替换成自己想用的原色，如果想跟作者一样，可以自己定义函数。

PHP模板文件

中间尝试使用子主题的制作方式，发现此路不通，所以还是只能修改原模板的钩子函数。修改文件路径为B2/Modules/Archive.php，如需次版本建议大家删除前一篇写的CSS代码。

/*分类页面新增结构*/
.cate-header-img{
    height: 180px;
    text-align: center;
    color: #fff;
    padding-top: 32px;
    background-repeat: no-repeat;
    background-size: 100%; 
}

.cate-header-img::after{
    content: '';
    width: 100%;
    z-index: 1;
    height: 180px;
    top:68px;
    position: absolute;
    background-color: rgba(0,0,0,.35);
    left: 0;
}
.cate-header-img h2,
.cate-header-img p{ 
    position: relative;
    z-index: 2; 
    color:#fff;
}
.cate-header-img h2{
    font-size: 36px;
}

.categorypage-new.tax-header .tax-info{
    justify-content: flex-start;
}

/*分类页面筛选项目优化*/
.tax-fliter-cat{
    margin-top:-36px;
}

.filters-box > ul{
    padding: 24px;
}
 

#filter-top ul li{
    margin:0;
    padding:0;
}

.tax-fliter-cat .filter-items a{
    font-size: 15px;
    font-weight: 400;
    color: #222226;
    background: none; 
    margin-right: 30px;
    border: none;  
    padding: 0;
    margin-bottom: 16px;
    height: 24px;
}
.categorypage-new .filter-name{
    font-size: 15px;
    line-height:24px;
    margin-right:6px;
}
#filter-top ul li:last-child .filter-items a{
    margin-bottom: 0;
}

.filter-items a:hover{
    border:none;
    color: var(--b2color);
}

函数解读

387行新增参数 $description = get_the_archive_description(); 获取分类描述，421行开始对顶部页面结构优化重构。鉴于之前源码放出，有人直接拷贝且挂自己网站售卖的行径，就不往外放源码了。php源码可以联系作者获取，这里仅放出CSS部分。

结尾

码子钩子函数查找都很费功夫，转载或者拷贝，请标明出处，网站广告多少有些影响体验，不仅能为作者创收，也能让作者更有信心走下去，再次感谢大家的捧场。