WoodMart 手机端底部导航（Mobile Bottom Navbar）制作

一、认识手机端底部导航栏

手机端底部导航栏（Mobile Bottom Navbar）是 WoodMart 专为移动设备设计的固定底部导航条。它始终悬浮在屏幕底部，用户无论浏览到页面哪个位置，都能一键触达核心功能入口——类似原生 App 底部的 Tab Bar（标签栏）。

🤔 1.1 为什么要用底部导航

跨境电商独立站的移动端流量通常占比超过 60%。手机屏幕空间有限，顶部菜单（Mobile Menu）需要点击汉堡图标展开才能看到导航链接，用户操作路径较长。底部导航栏把最高频的操作按钮直接放在拇指能够到的位置，显著降低操作成本。

👉 一个典型的移动端购物动线是这样的：用户从首页点底部 Shop 进入商品列表 → 加购后点 Cart 查看购物车 → 结算前点 Wishlist 再看一眼收藏的商品。整个过程全靠底部导航完成，不需要回到顶部展开菜单。

🧩 1.2 可选按钮一览

WoodMart 底部导航栏提供以下可选按钮，可根据需要逐个开启或关闭：

按钮名称	英文标识	功能
首页	Home	跳转站点首页
商店	Shop	跳转商店页面（WooCommerce Shop Page）
博客	Blog	跳转博客列表页
移动菜单	Mobile menu	打开移动端汉堡菜单
对比	Compare	打开产品对比页面（需已启用 Compare 功能）
愿望清单	Wishlist	打开愿望清单页面（需已启用 Wishlist 功能）
购物车	Cart	打开购物车页面或侧边抽屉
我的账户	My Account	跳转用户登录/注册/账户管理页面
侧边栏	Off-canvas sidebar	打开移动端侧边栏（常用于商店页筛选）

📌 除了以上预设按钮，WoodMart 还支持添加自定义按钮（Custom Buttons），可以设置任意标题、链接和图标，这部分在第三节详细说明。

---

二、开启底部导航功能

底部导航栏的配置入口在主题设置（Theme Settings）中，不在 WordPress 原生菜单系统里，也不在 Header Builder 里——它是一个独立的全局移动端设置。

🧭 2.1 进入设置入口

1. 登录 WordPress 后台
2. 在左侧菜单找到 WoodMart（或 Theme Settings），点击进入主题设置面板
3. 在设置面板左侧导航中，找到 General（通用设置）→ 展开 → 找到 Mobile bottom navbar（手机端底部导航栏）

💡 WoodMart 主题设置面板选项非常多。如果你找不到 Mobile bottom navbar，可以用面板顶部的搜索框直接输入 mobile bottom 搜索，能快速定位到对应设置区域。

🔛 2.2 开启底部导航栏

在 Mobile bottom navbar 设置区域中，你会看到以下核心选项：

1. Enable Sticky navbar（启用粘性导航栏）：总开关，设为 On 后底部导航栏才会在移动端显示
2. Navbar labels（导航标签）：控制图标下方的文字标签显示或隐藏——按钮较多、空间紧张时可以隐藏标签只显示图标
3. Select buttons（选择按钮）：勾选要在导航栏中显示的按钮（见第三节）

设置完成后，点击页面右上角的 Save Changes（保存更改）按钮保存。

开启后，使用手机或浏览器开发者工具切换到移动端视图访问站点，就能在屏幕底部看到导航栏了。

⚠️ 底部导航栏只在移动端显示，桌面端不会出现。用电脑浏览器正常访问站点时看不到任何变化是正常的——需要切换到移动端视图才能预览效果。

---

三、配置导航按钮

开启底部导航栏后，接下来要做的是决定”放哪些按钮、每个按钮指向哪里”。

🎛️ 3.1 预设按钮的开启与关闭

在 Mobile bottom navbar 设置区域内，你会看到每个预设按钮的独立开关，根据站点需求逐个决定是否启用即可。原则很简单：电商站点保留 Shop Cart My Account，已启用愿望清单或对比功能才开 Wishlist Compare，导航层级多就加上 Mobile menu——用不到的按钮一律关掉，保持导航栏清爽。

💡 按钮数量建议控制在 4–5 个。超过 5 个会导致每个按钮宽度不足，图标和文字被挤压，影响触控体验。

➕ 3.2 添加自定义按钮

除了预设按钮，WoodMart 支持添加自定义按钮（Custom Buttons）——最多 3 个。这在以下场景非常实用：

• 想把默认 Shop 按钮替换成指向特定分类页的链接
• 需要添加一个”促销活动”入口
• 需要添加一个”联系我们”或”订单查询”入口

添加自定义按钮的步骤：

1. 在 Mobile bottom navbar 设置区域中，找到 Custom Buttons（自定义按钮）部分

2. 新增一个自定义按钮条目，设置三项内容：按钮文字（显示在图标下方的标签）、链接 URL（点击跳转的地址）、图标（从媒体库上传一张图片）
3. 设置完成后，点击 Save Changes 保存

💡 图标建议用简洁的单色 PNG 或 SVG，视觉风格尽量与预设按钮图标保持一致。预设按钮的图标由主题自带图标字体渲染，风格统一，自定义图标太花哨会显得突兀。

⚠️ 3.3 默认按钮的限制与替代方案

这里有一个很多新手会踩的坑：预设按钮的标题和链接不能在设置里直接修改。

比如你想把默认 Shop 按钮的链接从商店首页改成一个特定分类页，或者把标题文字从 Shop 改成 All Products——在主题设置里找不到修改入口，因为预设按钮的链接是系统自动关联的。

✅ 官方推荐的解决方案是：

1. 关闭对应的预设按钮（如关闭默认 Shop）
2. 在 Custom Buttons 中添加一个自定义按钮，设置你想要的标题和链接
3. 上传一个合适的图标

💡 这个方案虽然多了一步操作，但好处是自定义按钮的标题、链接、图标都完全由你控制，灵活度更高。很多站点最终的做法是：保留 Home Cart My Account 三个预设按钮，Shop 和 Wishlist 用自定义按钮替代，以便自由控制链接指向。

---

四、设置显示规则

底部导航栏默认在所有移动端页面显示。但有些页面你可能不想让它出现——比如结账（Checkout）页面，用户此时应该专注于完成支付，不希望底部多一个导航条分散注意力。

🌐 4.1 全部页面显示（默认行为）

如果你不做任何额外设置，底部导航栏会在所有移动端页面显示。这是大多数站点的推荐做法——保持导航的一致性，用户在任何页面都能快速跳转。

🙈 4.2 在特定页面隐藏底部导航栏

WoodMart 的底部导航栏设置本身没有”按页面显示/隐藏”的条件规则选项。要在特定页面隐藏，有以下两种方法：

方法一：使用主题预设（Theme Presets）

这是官方推荐的方式，适合需要针对特定页面关闭底部导航栏的场景：

1. 进入 WoodMart → Theme Settings Presets（主题设置预设）
2. 点击 Add new preset（添加新预设）
3. 在条件（Condition）设置中，选择 Post id（页面 ID），然后选择目标页面（如 Checkout 页面）
4. 在该预设的主题设置中，进入 General → Mobile bottom navbar，将开关设为 Off（关闭）
5. 保存预设

⚠️ 使用此方法需要知道目标页面的 ID。在 WordPress 后台编辑页面时，浏览器地址栏中 post=XX 中的数字就是页面 ID。

方法二：使用 Custom CSS 针对特定页面隐藏

如果只是想在结账页面隐藏底部导航栏，最简单的方式是添加一段 CSS 代码：

1. 进入 WoodMart → Theme Settings → Custom CSS
2. 找到 Custom CSS for mobile（移动端自定义 CSS）区域
3. 添加以下代码：.woocommerce-checkout .wd-toolbar { display: none; }
4. 保存设置

👉 这段代码的作用是：在带有 woocommerce-checkout 类名的页面（即 WooCommerce 结账页面）中，将底部导航栏（.wd-toolbar）隐藏。

💡 如果你想在其他特定页面隐藏，可以用页面 ID 选择器。比如页面 ID 为 42 的页面，代码改为：.page-id-42 .wd-toolbar { display: none; }

---

五、调整图标样式与颜色

底部导航栏的默认样式是白色背景 + 深色图标和文字。如果你的站点品牌色调不同，或者你想让底部导航栏更有辨识度，可以通过以下两种方式自定义样式。

🎨 5.1 通过 Typography 设置图标和文字颜色

WoodMart 的高级排版（Advanced Typography）功能可以针对特定元素设置颜色，底部导航栏的图标和文字也包含在内：

1. 进入 WoodMart → Theme Settings → Typography
2. 展开 Advanced（高级排版）区域
3. 点击 Add（添加）新增一条排版规则
4. 在元素选择下拉框中，找到并选择 .wd-toolbar .wd-tools-element > a（底部导航栏按钮元素）
5. 设置你想要的颜色（Color）、字体大小（Font Size）等属性
6. 保存设置

📌 这是官方推荐的无代码方式，适合只需要调整图标/文字颜色的场景。选择器 .wd-toolbar .wd-tools-element > a 对应的是底部导航栏中每个按钮的链接元素（包含图标和文字）。

🖌️ 5.2 通过 Custom CSS 自定义背景色

底部导航栏的背景颜色没有独立的主题设置选项，需要通过 Custom CSS（自定义 CSS）来修改：

1. 进入 WoodMart → Theme Settings → Custom CSS
2. 找到 Custom CSS for mobile（移动端自定义 CSS）区域
3. 添加以下代码来修改背景色：div.wd-toolbar { background-color: #1a1a1a; }
4. 将 #1a1a1a 替换为你想要的背景颜色值
5. 保存设置

以下是一组常用的自定义 CSS 代码，你可以根据需要组合使用：

• 修改背景色：div.wd-toolbar { background-color: #1a1a1a; }
• 修改图标和文字颜色：.wd-toolbar .wd-tools-element > a { color: #ffffff; }
• 同时设置背景和文字（深色背景 + 白色图标组合）：
  
  div.wd-toolbar { background-color: #1a1a1a; } 和 .wd-toolbar .wd-tools-element > a { color: #ffffff; }

💡 颜色值使用十六进制色值（Hex Color），如 #1a1a1a（深灰黑）、#ffffff（纯白）、#e60000（红色）等。你可以用任何取色工具获取品牌色值后填入。

⚠️ 5.3 CSS 选择器版本差异

需要注意的是，WoodMart 不同版本中底部导航栏的 CSS 类名有变化：

版本范围	背景选择器	图标/文字选择器
WoodMart 6.x 及更早（7.0 之前）	.woodmart-toolbar	.woodmart-toolbar .wd-tools-element > a
WoodMart 7.x / 8.x（含 8.5.5）	.wd-toolbar 或 div.wd-toolbar	.wd-toolbar .wd-tools-element > a

本教程基于 WoodMart 8.5.5，使用 .wd-toolbar 选择器。如果你之前用的是旧版本教程中的 .woodmart-toolbar，升级到 7.0 及以上版本后会失效，需要更换为新选择器。

💡 如果不确定你的版本用哪个选择器生效，可以在浏览器开发者工具（F12）中切到移动端视图，检查底部导航栏的 HTML 结构，看实际渲染的 class 名是 wd-toolbar 还是 woodmart-toolbar，以此为准。

🔧 5.4 其他样式微调

除了颜色之外，你可能还想调整底部导航栏的其他视觉细节：

• 按钮间距：通过给 .wd-toolbar .wd-tools-element 添加 padding 或 margin 来调整按钮之间的间距
• 图标大小：在 Typography → Advanced 中选择 .wd-toolbar .wd-tools-element 后，可以设置图标相关的字体大小
• 激活状态颜色：当前页面对应的按钮如果有高亮状态，可以通过 .wd-toolbar .wd-tools-element > a:hover 或 .wd-toolbar .wd-tools-element > a:active 设置不同颜色