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