在使用 WordPress 建立大型网站,尤其是拥有多级产品分类(如各种制冰机)时,如果手动在“外观 > 菜单”中逐个添加几十个菜单项,不仅耗时耗力,而且非常容易出错。本文将介绍如何通过 Bulk menu creator 插件一键批量创建菜单,并探讨基于其代码自行开发轻量级插件的可行性。

一、 安装与使用 Bulk menu creator

首先,在 WordPress 后台的“插件 > 安装插件”中搜索并安装 Bulk menu creator。启用后,进入“外观 > 菜单”页面,在左侧的“添加菜单项”区域,你就能看到新增的批量添加面板(如果没看到,请检查右上角“显示选项”中是否勾选了该面板)。

该插件的核心逻辑非常简单:

  1. 标签与链接分离:面板中有两个文本框,一个是“Menu items labels”(菜单名称),另一个是“Menu items URLs”(菜单链接)。你只需要一行一个地分别粘贴名称和链接即可。
  2. 自动匹配与缩进:插件会按行自动配对。如果链接留空,插件会自动生成一个 # 加上标题别名的锚点链接。要创建子菜单,只需要在标签前面加上 两个空格 的缩进。
  3. 一键生成:点击“Generate menu items”按钮,插件就会调用 WordPress 原生 API 快速生成所有菜单项,并自动处理层级关系。

此外,该插件还在每个菜单项旁边添加了一键复制(克隆)和一键删除(可选择连同子菜单一起删除)的快捷按钮,极大提升了菜单管理的效率。


二、 分析源码:能否自己写一个插件实现核心需求?

你提供的插件源码非常精简,核心文件只有几个,完全证明了你可以自己写一个插件来满足批量添加和批量删除的核心需求。

1. 核心原理分析

  • 后台挂载(PHP端):插件的 bulk_menu_box() 方法利用 add_meta_box() 在 nav-menus(菜单页面)挂载了一个自定义面板,里面只有两个 <textarea> 和一个按钮。
  • 数据传递(JS端):nav-menu.js 监听按钮点击事件,将两个文本框的内容按换行符分割成数组。然后通过 wpNavMenu.addLinkToMenu(url, label) 这个 WordPress 原生 JavaScript 函数,逐个将菜单项添加到页面中。
  • 层级处理:由于 WordPress 原生机制要求先创建父级再创建子级,插件逻辑是先全部平级创建,然后再通过 wpNavMenu.moveMenuItem() 函数,根据你输入的空格缩进数量,自动向右移动对应的次数来形成子菜单。
  • 批量删除:quick-delete.js 利用 wpNavMenu.removeMenuItem() 原生方法,结合 childMenuItems() 获取子项,实现连带删除。

2. 自己开发插件的建议

如果你只想实现批量添加(按行识别)和一键删除子项,你完全不需要安装这个重量级插件(该插件还带有推广其 PRO 版本的提示)。你可以自己写一个极简插件:

  1. 创建插件目录和主文件:比如 my-bulk-menu/my-bulk-menu.php。
  2. 挂载 Metabox:写一个简单的函数,输出两个 textarea 和一个提交按钮,用 add_meta_box 挂载到 nav-menus。
  3. 引入自定义 JS:用 wp_enqueue_script 引入你的 JS 文件,并利用 wp_localize_script 传递一些翻译文本。
  4. 编写 JS 逻辑:直接参考你提供的 nav-menu.js 中 add_bulk_menu_item 的逻辑,使用 wpNavMenu.addLinkToMenu 和 wpNavMenu.moveMenuItem。
  5. 编写删除逻辑:参考 quick-delete.js,在菜单项加载完成后,用 jQuery 插入一个删除按钮,点击时调用 wpNavMenu.removeMenuItem。

需要注意的坑:WordPress 菜单的 DOM 操作依赖于核心的 nav-menus.js。自己写的时候,务必保证在菜单加载完毕后再绑定事件(比如使用 $(document).on('menu-item-added', ...)),否则可能会因为元素不存在而报错。


更新:2026年11月4日

这个插件已经开发出来了,并且比Bulk menu creator更加轻量,经久耐用,极高的兼容性,有兴趣可以直接联络开发者获取。插件名称:lym-advanced-menu-tool。

经过测试使用非常高效,能解决菜单批量删除,批量添加,菜单数据导出和导入。

笔者已经放在gitee里面。