7B2默认分类页面优化-添加背景图片和ICON

在7B2的默认模板分类页面，个人感觉用户体验不是很友好。胖哒的构想应该是顶部有可以自主设置的背景图再加上分类名称或者描述，筛选分类一栏能看到个性化ICON，并给分类加上一个面包屑导航，确认完需求以后开始动手。

效果图对比

旧版无修改页面展示效果

改版后

修改教程

首先要找到分类的所在PHP模板文件。本站第一版分类页面升级- 7B2模板分类面模板二次优化-顶部分类标题描述以及背景图片。已经有了详细说明。但是有个小缺陷，就是分类的特色图片和分类的ICON没有单独设置项目。后经过一下午的参数对比测试，发现实现起来也是比较简单的。只需要在后台新增个参数即可，并在前端输出。样式上只要有一定功底写起来还是很方便的。这里的背景图看着是虚化效果，其实他并未进行CSS优化，原图就是虚化背景，如果想做成虚化的背景结构，则可以参考优设网的分类页面DIV结构根据自己的需求修改即可。

因最近伸手党比较多，所以PHP和CSS文件付费下载。里面也包含了详细的具体的钩子函数设置和教程。网站暂只支持支付宝PC端支付。

思路拓展

既然可以给分类设置不同的背景图或者ICON，当然也可以选择给专题页和商品页面也加上，只要你学会了怎么添加钩子函数一切想法都可以实现。钩子函数里面的 $shop，$collection，$document，$newsflashes对应了各自的后台页面设置，添加类型也可以根据原有的B2后台设置做一些个性化的功能。如果想设置成和优设网一样的ICON，则可以将array函数 ‘type’     => ‘text’,然后使用B2的iconfont。

结语

所下载到的php文件可以直接覆盖原模板文件，也可以做为子主题，只需要在funtions.php文件新增修改的几个文件即可。代码示例：

/*分类页面顶部筛选样式修改*/
require_once( get_stylesheet_directory(). '/Modules/Templates/Archive.php' );

下载地址

源码及教程文件