WoodMart 小工具与侧边栏配置-WP独立站学院

生成摘要

AI 生成，仅供参考

一、认识 WoodMart 的小工具系统

💡 小工具（Widget）是 WordPress 中用于在页面侧边栏、页脚等区域展示内容的模块化组件。WoodMart 在 WordPress 原生小工具基础上，专门为电商场景开发了一系列 WooCommerce 增强小工具，比如属性筛选、价格筛选、AJAX 搜索等。

🚪 1.1 小工具管理入口

WoodMart 8.x 版本跟随 WordPress 的方向，默认使用 Gutenberg（古腾堡）区块编辑器界面来管理小工具。进入路径：

登录 WordPress 后台。
进入 外观 → 小工具（Appearance → Widgets）。
页面左侧列出所有可用小工具，右侧列出所有小工具区域（Widget Area）。

💡 如果你更习惯 WordPress 经典的小工具拖拽界面，可以安装 Classic Widgets 插件（由 WordPress 官方维护）。安装并启用后，小工具管理页面会自动恢复为传统的拖拽式布局。两种界面功能完全一致，选择你顺手的即可。

🧰 1.2 WoodMart 自带小工具一览

WoodMart 在 WordPress 标准小工具（搜索、文本、导航菜单、最近文章等）之外，还提供了一批电商专用小工具，按功能可以分为三组：

筛选与排序：

WOODMART WooCommerce Layered Nav——按产品属性筛选，如颜色、尺寸、品牌等，是商店页最核心的筛选工具。
WOODMART WooCommerce Sort by——产品排序下拉框，支持按价格、人气、最新等排序。
WOODMART Price Filter——价格区间滑块筛选器，支持 AJAX 实时筛选。

搜索：

WOODMART AJAX Search——带实时搜索建议的搜索框，支持产品搜索，结果含缩略图和价格。

内容展示：

WOODMART HTML Block——嵌入一个预先用 HTML Block 制作的内容块。
WOODMART Recent Posts——最近文章列表，可选缩略图和日期。
WOODMART Banner——横幅广告图，支持图片、链接和自定义内容。

📌 上述 WoodMart 自带小工具名称均以大写 WOODMART 开头，在小工具列表中容易辨认。WordPress 和 WooCommerce 原生的小工具（如「搜索」「最近的产品」「导航菜单」）也仍然可用，根据需要选择。

二、侧边栏区域说明

🗂️ 2.1 WoodMart 提供的侧边栏区域

WoodMart 预设了以下小工具区域（Widget Area），每个区域对应页面上的一个固定位置：

Main Widget Area（主侧边栏）：用于博客文章和常规页面，适合放博客分类、最近文章、搜索框。
Shop page widget area（商店页侧边栏）：显示在产品列表左侧或右侧，适合放价格筛选、属性筛选、产品分类。
Single product page widget area（产品详情页侧边栏）：只出现在产品详情页，适合放相关产品推荐、信任徽章、自定义内容。
Shop filters（商店筛选区）：位于面包屑导航和产品网格之间，横向排列，适合放价格筛选、属性筛选。
My Account page sidebar（我的账户侧边栏）：用于订单、下载等账户页面，适合放账户导航类小工具。
Footer columns（页脚列）：页脚区域，适合放快速链接、联系方式、社媒图标。

💡 Shop page widget area（侧边栏）和 Shop filters（筛选区）是两个不同的位置。侧边栏在产品列表的左/右两侧纵向显示；筛选区在产品列表上方横向显示，适合放筛选条件。两者可以单独使用，也可以同时使用，具体取决于你的布局偏好。

🎚️ 2.2 侧边栏位置开关

WoodMart 允许在主题设置中控制侧边栏是否显示以及显示在哪一侧。不同页面类型的侧边栏开关位置不同：

页面类型	设置路径
博客和常规页面（主侧边栏）	WoodMart → 主题设置 → General → Layout
商店/分类/标签页（商店页侧边栏）	WoodMart → 主题设置 → Product archive → Sidebar

✅ 在 General → Layout 中，你可以设置主侧边栏的默认位置：Left（左侧）、Right（右侧）、Without sidebar（不显示侧边栏）。这个设置影响博客文章和常规页面的布局。

✅ 在 Product archive → Sidebar 中，同样有 Left / Right / Without sidebar 三个选项，控制商店页、分类页和标签页的侧边栏位置。

⚠️ 如果在主题设置中选择了「Without sidebar」（不显示侧边栏），即使你在小工具管理页面中往对应区域添加了小工具，前台也不会显示。这是最容易被忽略的一点——侧边栏不显示，先检查主题设置里的位置开关。

三、配置商店页侧边栏

商店页侧边栏是电商站点最核心的侧边栏区域，用户在这里筛选产品、浏览分类。

🔛 3.1 确认侧边栏位置已开启

进入 WoodMart → 主题设置 → 产品档案 → 侧边栏。
确认 Sidebar position 设置为 Left 或 Right（不要选 Without sidebar）。
保存设置。

💰 3.2 添加价格筛选小工具

进入 外观 → 小工具。
在右侧区域列表中找到 Shop page widget area。
在左侧小工具列表中找到 WOODMART Price Filter，点击或拖入该区域。
展开小工具设置，填写标题（如「价格区间」），或留空不显示标题。
点击「更新」保存。

💡 WOODMART Price Filter 会自动读取当前商店页产品的最低和最高价格，生成一个滑动条。用户拖动滑块后，产品列表会通过 AJAX 实时更新，无需刷新页面。

🏷️ 3.3 添加属性筛选小工具

属性筛选（Layered Nav）是让用户按颜色、尺寸、品牌等属性筛选产品的核心工具。

在 Shop page widget area 中添加 WOODMART WooCommerce Layered Nav 小工具。
展开小工具设置：
- Title：填写筛选标题，如「颜色」「尺寸」。
- Filter by：选择要筛选的产品属性。列表中显示的是你在 WooCommerce 中已创建的属性（如 Color、Size、Brand 等）。
- Display type：选择筛选选项的显示样式——List（列表）/ Dropdown（下拉）/ Colors（颜色色块）/ Images（图片标签）。
点击「更新」保存。

⚠️ Filter by 下拉列表中能选择的属性，取决于你之前在 产品 → 属性（Products → Attributes）中创建的全局属性。如果列表为空，说明你还没有创建产品属性。属性创建后，还需要确保至少有一个产品设置了该属性的值，否则筛选选项在前台会显示为空。

💡 颜色属性推荐使用 Colors 显示模式，WoodMart 会用色块替代文字，视觉效果更直观。品牌或图案类属性推荐使用 Images 显示模式，用品牌 Logo 作为筛选标签。

📂 3.4 添加产品分类小工具

在 Shop page widget area 中添加 WOODMART WooCommerce Layered Nav 或 WordPress 原生的 产品分类（Product Categories）小工具。
如果使用产品分类小工具，展开设置：
- Title：填写标题，如「产品分类」。
- Show hierarchy：勾选后显示分类的层级关系（父分类下方缩进显示子分类）。
保存。

↕️ 3.5 调整小工具排列顺序

在 Gutenberg 小工具编辑界面中，直接拖动小工具块可以调整上下顺序。建议的排列顺序从上到下：

搜索框（WOODMART AJAX Search）
产品分类
价格筛选（WOODMART Price Filter）
属性筛选（WOODMART WooCommerce Layered Nav）——每个属性一个小工具

💡 排列原则：用户最常用的筛选条件放最上面。对多数电商站点来说，分类和价格是最常用的，其次是颜色、尺寸等属性。

四、配置商店筛选区（Shop Filters）

⚖️ 4.1 Shop Filters 与侧边栏的区别

👉 Shop filters 区域位于面包屑导航和产品网格之间，是横向排列的筛选区域。它和 Shop page widget area（侧边栏）可以同时使用，也可以只用其中一个。

两者的典型差异：

对比项	Shop page widget area（侧边栏）	Shop filters（筛选区）
位置	产品列表左侧或右侧	产品列表上方
排列方式	纵向堆叠	横向排列
占用空间	持续占用一侧空间	不占用列表空间，但增加页面高度
适合场景	筛选条件多，需要常驻显示	筛选条件少，希望产品列表占满宽度

⚙️ 4.2 配置 Shop Filters

进入 WoodMart → 主题设置 → Product archive → Shop filters，确认筛选区域已开启（未开启时即使添加了小工具，前台也不会显示）。
进入 外观 → 小工具。
在右侧区域列表中找到 Shop filters。
添加你需要的筛选小工具，推荐组合：
- WOODMART Price Filter
- WOODMART WooCommerce Layered Nav（每个属性一个）
保存。

💡 Shop filters 区域中的小工具会自动横向排列。如果添加了太多筛选小工具，超过一行宽度时会自动换行。建议控制在 3-4 个筛选小工具以内，保持页面整洁。

📜 4.3 开启筛选器折叠和滚动功能

WoodMart 在主题设置中提供了一组筛选器显示优化选项：

进入 WoodMart → 主题设置 → Product archive → Widgets。
可用选项如下：

选项	说明
Toggle function for categories widget	开启后产品分类小工具支持折叠/展开操作
Scroll for filters widgets	开启后当筛选小工具内容过多时，区域内出现滚动条而非撑高页面
Height for filters widgets	设置筛选区域的固定高度（配合 Scroll 选项使用），单位 px

💡 推荐做法：开启 Toggle function 让分类可以折叠，减少视觉干扰；如果属性筛选项超过 8 个，开启 Scroll for filters 并设置 Height 为 300 左右，避免侧边栏过长。

五、配置博客和页面侧边栏

博客文章和常规页面使用的是 Main Widget Area（主侧边栏）。

✅ 5.1 确认主侧边栏已开启

进入 WoodMart → 主题设置 → General → Layout。
确认 Sidebar position 设置为 Left 或 Right。
保存设置。

🧱 5.2 添加常用小工具

进入 外观 → 小工具，在 Main Widget Area 中添加以下小工具：

搜索框：

添加 WOODMART AJAX Search 小工具。
设置标题（如「搜索」）或留空。
保存。

💡 WOODMART AJAX Search 比 WordPress 原生搜索小工具更适合电商站点，输入关键词时会实时弹出产品搜索建议，包含产品缩略图和价格。

最近文章：

添加 WOODMART Recent Posts 小工具。
设置标题（如「最新文章」）。
设置显示数量（如 5 篇）。
可选是否显示缩略图和发布日期。
保存。

产品分类导航：

添加 导航菜单（Navigation Menu）小工具。
选择一个预先创建的菜单（如「产品分类菜单」）。
保存。

💡 如果你想在博客侧边栏放一个产品分类导航，最简单的方式是用「导航菜单」小工具加载一个已创建的菜单。这样后续修改分类时只需更新菜单，侧边栏自动同步。

文本或促销内容：

添加文本（Text）小工具或 WOODMART HTML Block 小工具。
文本小工具：直接输入文字或 HTML 代码，适合放一段简介、联系方式等。
HTML Block 小工具：选择一个预先制作的 HTML Block，适合放设计好的横幅广告或促销图。

六、创建自定义侧边栏

WoodMart 内置的侧边栏区域覆盖了商店页、博客、产品详情页和页脚。如果你需要给某个特定页面配置独立的侧边栏内容（比如「关于我们」页面放公司简介和团队照片，博客页面放文章分类），就需要创建自定义侧边栏。

🏗️ 6.1 创建自定义侧边栏

登录 WordPress 后台，在左侧菜单找到 Sidebars（与 WoodMart 同级的独立菜单）。
点击「Add new sidebar」或「添加新侧边栏」按钮。
输入侧边栏名称，如「关于我们侧边栏」。
保存。

⚠️ 创建侧边栏后，它会出现在 外观 → 小工具 页面右侧的区域列表中。如果没看到，刷新小工具管理页面即可。

➕ 6.2 给自定义侧边栏添加小工具

进入 外观 → 小工具。
在右侧区域列表中找到你刚创建的侧边栏（如「关于我们侧边栏」）。
从左侧拖入需要的小工具，配置内容并保存。

🎯 6.3 在页面中指定使用自定义侧边栏

WoodMart 支持在单页/单文章级别指定侧边栏。操作方法：

编辑目标页面（如「关于我们」页面）。
在页面编辑器下方的 WoodMart 页面设置区域中，找到 Sidebar 选项。
从下拉列表中选择你创建的自定义侧边栏（如「关于我们侧边栏」）。
更新页面。

💡 如果你使用 Elementor 编辑页面，WoodMart 的页面设置可能在 Elementor 编辑器的左下角「WoodMart Settings」齿轮图标中。找到 Sidebar 选项，选择对应的自定义侧边栏即可。

⚠️ 自定义侧边栏只有在被分配到具体页面后才会在前台显示。创建后不分配，它只是一个空容器。

七、移动端侧边栏显示规则

📱 7.1 Off-canvas 侧边栏功能

WoodMart 提供了 Off-canvas sidebar（滑出式侧边栏）功能：在移动端等窄屏设备上，侧边栏默认隐藏，用户点击一个筛选按钮后，侧边栏以滑出面板的形式从屏幕边缘弹出。

这个功能可以按设备类型分别开启或关闭：

进入 WoodMart → 主题设置 → Product archive → Sidebar。
找到 Off-canvas sidebar 相关选项。

可选设备范围通常包括：

设备类型	说明
Mobile（移动端）	手机屏幕上启用 Off-canvas 模式
Tablet（平板端）	平板屏幕上启用 Off-canvas 模式
Desktop（桌面端）	桌面端一般不需要开启，侧边栏直接显示即可

💡 推荐配置：Mobile 开启，Tablet 开启，Desktop 不开启。这样桌面端侧边栏正常常驻显示，移动端和平板端自动切换为按钮触发的滑出面板，节省屏幕空间。

🔘 7.2 移动端筛选按钮

开启 Off-canvas 模式后，移动端商店页顶部会自动出现一个筛选按钮（通常显示为「Filter」并带一个漏斗图标）。用户点击后，侧边栏内容从左侧滑出，筛选完成后关闭面板即可。

你不需要手动添加这个筛选按钮，WoodMart 会根据 Off-canvas 设置自动生成。

⚠️ 如果开启 Off-canvas 后移动端没有出现筛选按钮，按顺序检查：

侧边栏位置是否设为 Left 或 Right（Product archive → Sidebar）。

Shop page widget area 中是否至少添加了一个小工具。

清空缓存后重新访问。

🎛️ 7.3 Off-canvas 面板的筛选器显示

在 Off-canvas 面板中，筛选小工具的显示方式与桌面端侧边栏一致。前面在 Product archive → Widgets 中设置的 Toggle function（分类折叠）和 Scroll for filters（滚动筛选）同样适用于移动端面板。

💡 移动端建议开启 Toggle function for categories widget（分类折叠）。手机屏幕空间有限，分类默认折叠可以减少面板高度，用户需要时再点击展开。

八、常见问题排查

🙈 8.1 侧边栏不显示

按顺序检查：

主题设置中侧边栏位置是否为 Left 或 Right（不是 Without sidebar）。
对应的 Widget Area 中是否至少添加了一个小工具。
清空缓存插件和浏览器缓存后刷新页面。
如果是自定义侧边栏，确认是否已分配到目标页面（编辑页面 → WoodMart Settings → Sidebar）。

🕳️ 8.2 属性筛选选项为空

👉 WOODMART WooCommerce Layered Nav 小工具添加后，前台显示的筛选选项为空或只有标题没有选项：

确认已在该小工具的 Filter by 中选择了正确的属性。
确认该属性下至少有一个产品设置了属性值。没有产品使用该属性时，筛选选项自然为空。
确认当前商店页正在浏览的分类下有设置了该属性的产品。如果当前分类的产品都没有设置颜色属性，颜色筛选就不会出现在该分类页的侧边栏中。

💲 8.3 价格筛选范围不正确

WOODMART Price Filter 自动读取产品价格区间。如果显示的价格范围与实际不符：

确认是否有产品的价格为 0 或未设置。价格为 0 的产品会拉低最低价格显示。
确认变体产品（Variable Product）的变体价格是否已正确设置。价格筛选会读取变体的最低和最高价格。
清空 WooCommerce 瞬态缓存（WooCommerce → 状态 → 工具 → 清除瞬态缓存）和站点缓存后重新访问。

🔧 8.4 小工具在移动端错位或消失

确认 Off-canvas sidebar 是否已按设备开启（Product archive → Sidebar）。
确认移动端筛选按钮是否出现。如果没出现，参照第 7.2 节排查步骤处理。
如果使用了页面构建器（如 Elementor）编辑了页面布局，检查页面构建器的响应式设置是否覆盖了 WoodMart 的侧边栏布局。页面构建器的列布局优先级可能高于主题设置。