在 WordPress 网站开发中，菜单是一个非常重要的组件之一。在前端开发中，我们需要从 WordPress 中获取菜单数据并渲染出来。这时候，就可以使用 npm 包 wordpress-query-menu 来方便地获取 WordPress 中的菜单数据。
安装
使用 npm 安装 wordpress-query-menu：
npm install wordpress-query-menu
用法
初始化
首先，需要在代码中导入 wordpress-query-menu：
const WordPressQueryMenu = require('wordpress-query-menu');然后，需要初始化 WordPressQueryMenu 对象：
const menu = new WordPressQueryMenu({
url: 'http://your-wordpress-site.com',
slug: 'your-menu-slug'
});其中，url 参数是你的 WordPress 网站的地址，而 slug 参数是你要获取的菜单的标识符。
获取菜单项
通过 WordPressQueryMenu 对象的 getItems() 方法，可以获取菜单的所有项：
const items = await menu.getItems(); console.log(items);
渲染菜单
得到菜单项后，就可以根据需要进行渲染了。这里，我们使用 React 来进行示例演示：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------ ---- -----------------------
----- ---- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
----- ------------------- -
----- ---- - --- --------------------
---- ---------------------------------
----- ----------------
---
----- ----- - ----- ----------------
--------------- ----- ---
-
-------- -
----- - ----- - - -----------
------ -
-----
----
--------------- -- -
--- --------------
-- --------------------------------
-----
---
-----
------
--
-
-
------ ------- -----这里，我们通过 React 的 componentDidMount() 方法来获取菜单项并将其存储到组件状态中。然后，我们在 render() 方法中使用 map() 函数来遍历菜单项列表，并将其渲染为 HTML。
总结
通过使用 npm 包 wordpress-query-menu，可以方便地在前端代码中获取 WordPress 中的菜单数据，并进行渲染。从而使我们的开发工作变得更加高效，同时还能提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671148dd3466f61ffe5a9
