07 分类侧栏：优化后的筛选布局
分类侧边栏改成更接近真实 WooCommerce 商店的筛选体验，桌面端稳定，手机端友好。
本页学习重点
这次优化了什么
- 筛选项改成整行可点击，减少左侧松散和错位感
- 加入数量、已选筛选标签和 Reset 按钮，更接近真实商城体验
- 桌面端侧栏 sticky，手机端自动变成顶部筛选卡片
- 结构更容易替换成 WooCommerce 分类、属性和价格筛选
优化后的分类侧边栏布局
<div class="filter-layout-optimized">
<aside class="filter-panel">
<label class="filter-option">
<input type="checkbox">
<span>Decking</span>
<em class="filter-count">12</em>
</label>
</aside>
<div class="products-area">
<div class="toolbar">...</div>
<div class="grid">...products...</div>
</div>
</div>
本页总结
分类侧栏不要只是简单 checkbox 堆叠。真实商城更需要清晰的分组、整行点击、数量提示、已选标签和移动端适配。