想要让你的网站导航看起来更专业、分类更清晰?WoodMart 主题内置强大的菜单管理功能,支持创建多级下拉菜单,适合电商站、品牌官网或内容型平台。只需要简单配置,就能实现类似那种“悬停即展开”的多级导航效果。
![图片[1]-用 WoodMart 创建多级下拉菜单导航的完整教程](https://www.361sale.com/wp-content/uploads/2025/06/20250620154513640-image.png)
一、前提条件
在开始之前,确保网站满足以下条件:
- WordPress 已安装并可正常运行
- 已启用 WoodMart 主题(建议使用最新版)
- 已安装并激活 WoodMart Core 插件(系统会自动提示安装)
![图片[2]-用 WoodMart 创建多级下拉菜单导航的完整教程](https://www.361sale.com/wp-content/uploads/2025/06/20250620154810519-image.png)
二、创建菜单结构
步骤如下:
- 进入后台,点击「外观」>「菜单」
![图片[3]-用 WoodMart 创建多级下拉菜单导航的完整教程](https://www.361sale.com/wp-content/uploads/2025/06/20250620155135400-image.png)
- 新建一个菜单并命名(如 Main Menu)
![图片[4]-用 WoodMart 创建多级下拉菜单导航的完整教程](https://www.361sale.com/wp-content/uploads/2025/06/20250620155233869-image.png)
- 在左侧勾选页面、分类或自定义链接,点击「添加至菜单」
![图片[5]-用 WoodMart 创建多级下拉菜单导航的完整教程](https://www.361sale.com/wp-content/uploads/2025/06/20250620155530561-image.png)
- 拖动菜单项,设置层级结构:
- 一级菜单直接显示在导航栏
- 将二级或三级菜单项稍微往右拖动,形成嵌套结构
例如:
商城(一级)
├── 男装(第二级)
│ ├── T恤(第三级)
│ └── 夹克(第三级)
├── 女装
└── 配件
![图片[6]-用 WoodMart 创建多级下拉菜单导航的完整教程](https://www.361sale.com/wp-content/uploads/2025/06/20250620155933573-image.png)
- 勾选「将此菜单设为主菜单」
![图片[7]-用 WoodMart 创建多级下拉菜单导航的完整教程](https://www.361sale.com/wp-content/uploads/2025/06/20250620160043233-image.png)
- 点击保存
三、启用 WoodMart 下拉菜单样式
WoodMart 提供多种菜单布局方式,可以让多级菜单更美观有序。
设置方法:
- 点击其中的 菜单组件
- 在弹出的设置窗口中可以设置:
- Dropdown type(下拉类型) 包含
Default、Full Width等
![图片[8]-用 WoodMart 创建多级下拉菜单导航的完整教程](https://www.361sale.com/wp-content/uploads/2025/06/20250620163221314-image.png)
四、给菜单项添加图标或标签(可选)
想让菜单更吸睛,你可以为某些菜单项添加图标或文字标识。
操作步骤:
- 在菜单编辑界面,点击每个菜单项右侧的下拉箭头
- 可填写:
- 自定义 CSS 类(用于添加图标)
- 描述(可显示副标题)
![图片[9]-用 WoodMart 创建多级下拉菜单导航的完整教程](https://www.361sale.com/wp-content/uploads/2025/06/20250620165027850-image.png)
- 若未看到这些字段,点击页面右上角的「显示选项」,勾选所有可见属性
配合 Font Awesome 或 WoodMart 自带图标,可以展示如“热销”、“新品”等标识。
![图片[10]-用 WoodMart 创建多级下拉菜单导航的完整教程](https://www.361sale.com/wp-content/uploads/2025/06/20250620164258274-image.png)
五、移动端优化建议
六、常见问题与解决方法
| 问题 | 解决方式 |
|---|---|
| 菜单不显示多级结构 | 检查是否拖动出错,或未启用下拉 菜单样式 |
| 子菜单无法点击 | 检查是否有脚本冲突,可尝试关闭部分 插件测试 |
| 图标不显示 | 检查图标类名是否正确,并确保启用了 Font Awesome |
| Mega Menu 内容错乱 | 检查列数设置是否过多,或使用了不兼容 的小部件 |
结语
用 WoodMart 创建多级下拉菜单,能帮助访客快速找到目标页面,提高浏览效率和转化率。建议初学者从基础菜单入手,再逐步探索 Mega Menu 等高级功能。如果想打造一个功能完整、结构清晰、移动友好的网站导航,WoodMart 提供的工具已经足够强大。
| 联系我们 | |
|---|---|
| 教程看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
客服微信
|
| ① 电话:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| ③ 邮件:[email protected] | |
| ④ 工作时间:周一至周五,9:30-18:30,节假日休息 | |
THE END























![表情[wozuimei]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

暂无评论内容