WoodMart 菜单系统：基础菜单与锚点设置

一、认识 WoodMart 的菜单系统

💡 WoodMart 在 WordPress 原生菜单功能基础上做了扩展，增加了下拉样式选择、HTML Block 嵌入、AJAX 加载、菜单图标、标签文字等功能。但无论扩展多强，菜单的创建和管理仍然在 WordPress 标准的 外观 → 菜单 里完成。

📋 1.1 菜单的两种位置

WoodMart 提供两个菜单位置（Menu Location）：

位置	说明
Main Menu（主菜单）	显示在页眉导航区域，是站点的主导航
Mobile Menu（移动菜单）	移动端展开后显示的菜单

💡 同一个菜单可以同时分配到这两个位置。大多数站点只需要创建一个菜单，同时勾选两个位置即可。

📋 1.2 WoodMart 扩展的菜单字段

点击任意菜单项右侧的下拉箭头展开后，除了 WordPress 原生的「导航标签」「链接目标」「CSS 类」之外，你还会看到 WoodMart 新增的字段：

字段	说明
Design（设计）	下拉样式：Default（默认）/ Full Width（全宽）/ Full Height（全高）/ Set sizes（自定义尺寸）/ Aside（侧边）
HTML Block for the dropdown	选择一个 HTML Block 作为下拉内容（Design 设为 Default 以外的样式时出现）
Load HTML dropdown with AJAX	开启后下拉内容按需 AJAX 加载，减少初始页面体积
Dropdown color scheme	下拉区域的配色方案：Dark（深色文字浅色背景）/ Light（浅色文字深色背景）
Open on mouse event	触发方式：Hover（悬停）/ Click（点击）
Label text	菜单项旁的小标签文字，如「New」「Hot」
Label color	标签颜色
Image / Icon	菜单项前方显示的图标或图片
Page anchor	启用页面内锚点导航

📌 本篇重点讲基础菜单创建、菜单项添加、图标与标签设置、锚点功能。Design 设为 Full Width 或 Set sizes 配合 HTML Block 实现的超级菜单（Mega Menu）属于进阶内容，会在第七课详细讲解。

---

二、创建第一个菜单

🚪 2.1 进入菜单管理页面

1. 登录 WordPress 后台。
2. 进入 外观 → 菜单。
3. 如果已有演示数据导入的菜单，左侧会显示现有菜单。点击「创建新菜单」可以新建。

✏️ 2.2 创建并命名菜单

1. 点击「创建新菜单」链接。
2. 输入菜单名称，如「主菜单」。
3. 点击「创建菜单」按钮。

📍 2.3 设置菜单位置

菜单创建完成后，在页面底部的「菜单设置」区域：

1. 勾选 Main Menu（主菜单）。
2. 如果希望同一个菜单也用于移动端，勾选 Mobile Menu（移动菜单）。
3. 点击「保存菜单」。

---

三、添加菜单项

菜单项可以是页面、文章、自定义链接、产品分类等。左侧「添加菜单项」区域列出了所有可添加的内容类型。

💡 如果左侧没有显示你需要的面板（如「页面」「产品分类」），点击页面右上角的「显示选项」，勾选对应的类型即可。

📄 3.1 添加页面

1. 在左侧「页面」区域，勾选你要添加的页面（首页、商店、关于我们、联系我们等）。
2. 点击「添加到菜单」。
3. 页面会出现在右侧的菜单结构中。

🏷️ 3.2 添加产品分类

1. 点击页面右上角「显示选项」，确认已勾选「产品分类」（Product categories）。
2. 在左侧「产品分类」区域，勾选你要添加的分类。
3. 点击「添加到菜单」。
4. 分类会以分类页链接的形式出现在菜单结构中，WordPress 自动生成并维护链接。

💡 产品分类的链接格式通常是 你的域名/product-category/分类别名/。注意左侧的「分类」区域是文章分类，不是产品分类，两者是不同的面板，不要找错位置。

🔗 3.3 添加自定义链接

自定义链接用于添加站外链接或站内特定地址：

1. 在左侧「自定义链接」区域。
2. 在 URL 框中输入链接地址（如 https://example.com/blog）。
3. 在链接文本框中输入显示名称（如「博客」）。
4. 点击「添加到菜单」。

🔗 3.4 添加文章分类

1. 在左侧「分类」区域找到文章分类。
2. 勾选需要的分类，点击「添加到菜单」。

---

四、调整菜单层级与排序

📐 4.1 拖拽排序

在右侧的菜单结构区域，直接拖动菜单项可以调整顺序。拖到左边的项目显示在前面，拖到右边的显示在后面。

📂 4.2 创建子菜单（下拉菜单）

将一个菜单项拖动到另一个菜单项的下方，然后稍微向右缩进，它就变成了子菜单项。

⚠️ 建议菜单层级不超过三级。层级太深，用户在移动端需要多次点击才能到达目标页面，体验不好。

🗑️ 4.3 删除菜单项

1. 点击菜单项右侧的下拉箭头展开。
2. 点击「移除」。
3. 点击「保存菜单」。

---

五、菜单图标与标签设置

🎨 5.1 添加菜单图标

WoodMart 支持为每个菜单项添加图标或图片：

1. 在菜单编辑页面，点击菜单项右侧的下拉箭头展开。
2. 找到 Image 字段。
3. 可以上传一张图片（推荐 SVG 或 PNG 格式，尺寸 16×16 或 20×20），或在 Icon name 字段输入 Font Awesome 图标类名（如 fas fa-home）。
4. 在 Use image as 下拉框中选择将图片显示为图标（Icon）还是下拉背景（Background）。

💡 Font Awesome 图标类名可以从 Font Awesome 官网查找。例如：首页用 fas fa-home，商店用 fas fa-shopping-bag，联系我们用 fas fa-envelope。

🏷️ 5.2 添加标签文字

标签文字是显示在菜单项旁边的小提示，常用于标识新品、热销等：

1. 展开菜单项设置。
2. 在 Label text 字段输入标签文字，如「New」「Hot」「Sale」。
3. 在 Label color 字段选择标签颜色。
4. 保存菜单。

💡 标签文字不宜过多。如果每个菜单项都加标签，反而失去了突出重点的作用。建议只在 1-2 个最重要的菜单项上加标签。

---

六、锚点链接与页面内跳转

锚点（Anchor）是一种页面内跳转技术：用户点击导航中的某个链接后，页面不会跳转到新页面，而是平滑滚动到当前页面的指定位置。

🎯 6.1 什么是锚点，什么时候用

适用场景：

• 单页网站（One Page Site）：首页有多个区块（关于我们、服务、案例、联系方式），导航菜单直接跳到对应区块。
• 长页面：比如「关于我们」页面有公司简介、团队、历史三个区块，菜单可以直接跳到团队区块。

⚙️ 6.2 在菜单中启用锚点

1. 在菜单编辑页面，展开需要设置锚点的菜单项。
2. 找到 Page anchor 字段，勾选启用。
3. 将该菜单项的链接设为锚点格式：https://你的域名/页面地址/#锚点ID

例如，首页有一个「团队介绍」区块，区块的 CSS ID 是 team，那么菜单链接设为：https://你的域名/#team

如果锚点在「关于我们」页面上，链接则为：https://你的域名/about-us/#team

🏗️ 6.3 给页面区块添加锚点 ID

锚点跳转的目标区块需要有对应的 CSS ID。操作方法取决于你使用的页面构建器：

使用 Elementor：

1. 编辑页面时，选中需要跳转的 Section 或 Container。
2. 在左侧设置面板中，进入「高级」标签页。
3. 在 CSS ID 字段中输入 ID，如 team。
4. 注意：不要加 # 前缀，只填 team。

使用 WPBakery：

1. 编辑 Row 的属性。
2. 在 Row ID 字段中输入 team（同样不加 #）。

使用 Gutenberg 区块：

1. 选中区块，在右侧设置面板中找到「高级」。
2. 在 HTML 锚点 字段输入 team。

✅ 6.4 测试锚点跳转

1. 保存菜单和页面。
2. 打开前端页面，点击导航中设置了锚点的菜单项。
3. 页面应自动滚动到目标区块位置。

⚠️ 如果跳转后位置偏上或偏下，通常是因为页眉是固定（Sticky）的，遮挡了目标区块的顶部。解决方法：在目标区块上方加一些内边距（Padding），或使用 CSS scroll-margin-top 属性调整滚动停留位置。例如在 Elementor 的高级设置中，添加内联 CSS：selector { scroll-margin-top: 80px; }（80px 替换为你的页眉高度）。

---

七、在 Header Builder 中显示菜单

菜单创建好之后，需要在页眉构建器（Header Builder）中放置菜单元素，才能在前台显示。

🧩 7.1 添加主菜单元素

1. 进入 WoodMart → Header Builder。
2. 在页眉的主区域（Header Main）中，找到现有的菜单元素，或点击「+」添加一个 Main Menu 元素。
3. 如果有多个菜单，在菜单元素的设置中选择你要显示的菜单。
4. 保存页眉。

🧩 7.2 添加底部菜单（Footer Menu）

底部菜单不使用 Header Builder 的菜单元素，而是通过页脚区域的小工具（Widget）或 HTML Block 实现。这会在第六课「页脚制作与调用」中详细讲解。

💡 如果你只是创建了一个底部链接菜单（如「关于我们」「隐私政策」「退换货政策」等），暂时可以通过 WordPress 小工具放到页脚区域：进入 外观 → 小工具，找到页脚对应的 Widget Area，添加「导航菜单」小工具，选择你创建的底部菜单。

---

八、移动端菜单说明

📱 8.1 移动端菜单自动适配

WoodMart 的响应式设计会自动将主菜单在移动端折叠为汉堡菜单（Hamburger Menu）。用户点击汉堡图标后，菜单以滑出面板的形式展开。

你不需要为移动端单独创建菜单。只要菜单分配到了 Mobile Menu 位置，它就会在移动端的汉堡菜单中显示。

⚙️ 8.2 移动端菜单设置

进入 WoodMart → 主题设置 → General，可以找到移动端导航相关选项：

选项	说明
Mobile navigation	开启/关闭移动端导航
Show dropdown in mobile menu	子菜单是否在移动端展开显示

💡 移动端建议菜单层级尽量浅。桌面端的三级下拉在手机上需要多次点击展开，体验不佳。如果菜单项很多，考虑将不重要的项移到底部菜单。

---

九、菜单管理常见问题

❓ 9.1 菜单保存后扩展字段丢失

如果保存菜单后发现 WoodMart 的扩展字段（Design、Label text 等）被重置为空，可能是因为菜单项数量过多导致 PHP max_input_vars 限制。解决方法：

1. 在宝塔面板中找到 PHP 设置。
2. 将 max_input_vars 从默认值（通常 1000）改为 10000（与第一课的服务器配置建议一致）。
3. 重启 PHP 服务。

❓ 9.2 菜单不显示在页面上

按顺序检查：

1. 菜单是否已分配到 Main Menu 位置（外观 → 菜单 → 菜单设置 → 勾选 Main Menu）。
2. Header Builder 中是否有 Main Menu 元素（WoodMart → Header Builder → 确认主区域有菜单元素）。
3. 清空缓存插件和浏览器缓存后刷新。

❓ 9.3 锚点跳转后位置被页眉遮挡

这是固定页眉（Sticky Header）常见问题。在目标区块添加 scroll-margin-top CSS 属性，值设为页眉高度（通常 80–120px）。具体方法见第 6.4 节。

❓ 9.4 点击菜单项显示 404

检查菜单项的链接是否正确：

• 页面类型的菜单项，链接应自动生成，一般不会出错。
• 自定义链接类型的菜单项，手动检查 URL 拼写是否正确。
• 产品分类的链接，确认分类别名（Slug）没有被修改过。如果修改了分类别名，需要重新添加菜单项或手动更新链接。