一文搞懂WordPress添加子菜单，不会代码也能搞定

自己不会代码想做网站，又想在后台管理菜单时添加子菜单？别急，这篇文章就是为你们量身打造的。不管是做企业官网、商城还是外贸站，WordPress的菜单管理都是一个常见需求，而添加子菜单更是经常遇到的痛点。本文一文搞懂WordPress添加子菜单的全过程，手把手教你在不写代码的情况下，也能实现自定义菜单结构，让网站管理更清晰。

需求分析：为什么需要添加子菜单？

WordPress默认的菜单系统已经很强大，但有时候你可能会发现，菜单项太多，显得杂乱无章。比如你在后台创建了“产品”菜单，但下边还有“产品详情”“产品分类”“客户评价”等子项，这时候你就需要为“产品”菜单添加子菜单，使后台结构更清晰、管理更方便。

适用场景

• 企业官网后台需要对产品、服务、关于我们等多个板块进行分级管理；
• 使用自定义主题或插件后，原有菜单结构不满足需求；
• 多人协作开发时，希望把功能模块分类到子菜单中，提高可读性。

技术选型建议

如果你不会代码，使用WordPress自带的菜单编辑器已经足够应对大部分需求。但若你希望实现更高级的菜单管理（比如添加隐藏菜单、按用户角色显示不同子菜单等），就需要借助插件或自定义代码。对于零基础用户，推荐使用Admin Menu Editor插件，它无需代码即可实现菜单结构的自由拖拽和层级管理。

环境准备：你的WordPress站点是否已就绪？

在动手操作之前，先确认以下几点：

• 你有一个可用的WordPress网站（建议使用最新版本，目前为6.4+）；
• 你已经登录了WordPress后台，拥有管理员权限；
• 你的服务器环境支持PHP 7.4或以上版本；
• 你的网站已开启调试模式（可帮助你查看代码错误）。

服务器环境推荐

如果你是新手，建议在阿里云、腾讯云或华为云上部署WordPress，这些平台都提供一键安装WordPress的镜像，方便快速搭建。

核心步骤：WordPress添加子菜单的三种方式

添加子菜单在WordPress中主要有三种方式：使用后台菜单编辑器、使用插件、使用自定义代码。下面分别讲解。

方法一：使用WordPress后台菜单编辑器（零代码）

这是最简单、最推荐的方式，适用于大部分用户。

1. 登录WordPress后台，点击外观 → 菜单；
2. 在菜单编辑页面，点击创建新菜单；
3. 在“菜单设置”中，输入菜单名称，例如“产品管理”；
4. 在“菜单项”中，选择你需要添加的页面或自定义链接；
5. 点击“添加到菜单”；
6. 拖动菜单项，使其形成父级与子级关系。例如，把“产品详情”拖到“产品”下方，这样“产品详情”就成为“产品”的子菜单；
7. 点击保存菜单，即可在网站前端或后台看到子菜单结构。

⚠️ 注意：该方法适用于默认主题和部分插件的菜单系统，自定义主题可能需要使用其他方法。

方法二：使用插件添加子菜单（推荐给不会代码的用户）

如果你希望更灵活地管理菜单结构，推荐使用以下两个插件：

1. Admin Menu Editor

   • 允许你自由拖拽菜单项，设置子菜单；
   • 支持隐藏菜单、设置菜单权限；
   • GitHub开源仓库地址：https://github.com/greghesp/WordPress-Admin-Menu-Editor-Plugin

2. Menu Manager

   • 提供更详细的菜单管理功能；
   • 可设置菜单标题、图标、访问权限等；
   • GitHub开源仓库地址：https://github.com/leehambley/menu-manager

安装方法：

• 登录WordPress后台，进入插件 → 安装插件；
• 搜索插件名称，点击安装 → 激活；
• 配置插件后，你就可以像方法一一样管理子菜单。

方法三：使用自定义代码添加子菜单（适合开发人员）

如果你是开发者，或者正在自定义主题，推荐使用函数add_submenu_page()或add_menu_page()来添加子菜单。下面是一个基础示例：

// 添加主菜单项
add_menu_page('我的设置', // 菜单标题'设置',     // 菜单名称'manage_options', // 权限'my-settings', // 菜单slug'my_settings_page', // 回调函数'dashicons-admin-generic', // 图标6 // 菜单顺序
);// 添加子菜单项
add_submenu_page('my-settings', // 主菜单slug'子菜单项',    // 菜单标题'子菜单',      // 菜单名称'manage_options', // 权限'my-sub-settings', // 子菜单slug'my_sub_settings_page' // 回调函数
);

这段代码会在后台添加一个“设置”主菜单，并在其下添加一个“子菜单”子菜单项。你需要将回调函数my_settings_page()和my_sub_settings_page()定义好，用于展示菜单内容。

⚠️ 注意：如果你不熟悉PHP函数和WordPress钩子，不建议使用这种方式。如果你需要实现更复杂的菜单逻辑，建议参考官方文档或GitHub开源代码库。

代码/配置示例：让你快速实现子菜单功能

下面是一个完整且可运行的代码示例，适用于自定义主题或插件开发人员。这段代码会在WordPress后台添加一个名为“网站配置”的主菜单，并在其下添加“基础设置”“高级设置”两个子菜单项。

示例1：添加主菜单与子菜单

// 在functions.php中添加以下代码
function my_custom_menu() {// 添加主菜单add_menu_page('网站配置', // 菜单标题'网站配置', // 菜单名称'manage_options', // 权限'website-settings', // 主菜单slug'website_settings_page', // 回调函数'dashicons-admin-tools', // 图标50 // 菜单位置);// 添加子菜单add_submenu_page('website-settings', // 主菜单slug'基础设置', // 菜单标题'基础设置', // 菜单名称'manage_options', // 权限'website-basic', // 子菜单slug'website_basic_page' // 回调函数);add_submenu_page('website-settings', // 主菜单slug'高级设置', // 菜单标题'高级设置', // 菜单名称'manage_options', // 权限'website-advanced', // 子菜单slug'website_advanced_page' // 回调函数);
}
add_action('admin_menu', 'my_custom_menu');// 主菜单回调函数
function website_settings_page() {echo '<h1>网站配置</h1>';echo '<p>这是主菜单页面内容。</p>';
}// 子菜单1回调函数
function website_basic_page() {echo '<h1>基础设置</h1>';echo '<p>这是基础设置页面内容。</p>';
}// 子菜单2回调函数
function website_advanced_page() {echo '<h1>高级设置</h1>';echo '<p>这是高级设置页面内容。</p>';
}

示例2：使用插件实现更灵活的菜单管理

使用Admin Menu Editor插件时，你可以这样操作：

1. 安装并激活插件；
2. 在后台菜单中找到Admin Menu Editor；
3. 在插件页面，你可以看到所有菜单项的列表；
4. 点击菜单项，将其拖到另一个菜单项下方，即可形成子菜单；
5. 点击保存更改，立即生效。

常见报错与解决方法

在添加子菜单时，可能会遇到一些常见问题，以下是几个典型的错误及解决办法：

报错1：菜单项无法显示

可能原因：

• 没有正确设置菜单权限；
• 子菜单项的slug与主菜单项不一致；
• 插件冲突导致菜单显示异常。

解决方法：

• 检查add_submenu_page()中的主菜单slug是否与主菜单项一致；
• 确保用户有manage_options权限，或根据实际情况调整权限；
• 禁用其他插件，排查插件冲突。

报错2：子菜单没有图标或图标显示错误

可能原因：

• 未在add_submenu_page()中指定图标；
• 使用的图标类名错误。

解决方法：

• 在add_submenu_page()函数中，添加图标参数：

  'dashicons-admin-generic'
  

• 查看WordPress官方图标库：https://developer.wordpress.org/resource/dashicons/

报错3：菜单项被隐藏或无法访问

可能原因：

• 插件或主题修改了默认菜单结构；
• 网站开启了安全限制，限制了某些菜单项的访问。

解决方法：

• 检查主题的functions.php文件，是否有remove_menu_page()等函数移除了菜单；
• 如果使用了安全插件，检查其设置，确保未对菜单项进行限制。

小结：WordPress添加子菜单，不是难题

通过本文，我们已经从需求分析、环境准备到代码配置，一步步解决了“WordPress添加子菜单”的问题。无论是零基础用户还是开发人员，都可以根据自身情况选择适合自己的方式。

如果你是企业用户，建议使用插件快速完成菜单管理；如果你是开发人员，可以使用自定义代码实现更复杂的菜单逻辑；如果你是运营人员，只需要熟悉后台菜单编辑器就能轻松完成子菜单的添加。

最后，你踩过哪些建站的坑？评论区交流，让我们一起避免走弯路！