导航菜单是 WordPress 主题中最重要的用户界面元素之一。合理的菜单结构和灵活的定制能力,可以极大提升网站的可用性。本文详细介绍主题中导航菜单的完整实现方法。

注册菜单位置

在 functions.php 中使用 register_nav_menus 函数注册菜单位置。每个菜单位置都有一个唯一的标识符和一个描述性名称。常见的菜单位置包括主菜单、页脚菜单、移动菜单、社交菜单等。注册后,用户可以在后台的外观菜单中为每个位置分配菜单。

在模板中调用菜单

使用 wp_nav_menu 函数在模板中输出菜单。通过 theme_location 参数指定使用哪个菜单位置。通过 menu_class 和 menu_id 参数定制菜单的 CSS 类名和 ID。通过 container 参数控制是否包裹容器以及容器的类型。

实现多级下拉菜单

默认的 wp_nav_menu 输出支持多级结构,但 CSS 样式需要主题自己实现。通过设置 depth 参数控制菜单的显示层级,0 表示无限制。使用 CSS 的 :hover 或 :focus-within 实现子菜单的展开和收起。

对于触屏设备,下拉菜单需要额外的 JavaScript 支持来处理点击事件。可以使用简单的点击切换,或者使用更复杂的汉堡菜单方案。

为菜单项添加额外字段

通过 wp_setup_nav_menu_item 和 wp_update_nav_menu_item 钩子,可以为菜单项添加自定义字段。常见的额外字段包括图标、描述、副标题、CSS 类等。添加字段后,需要在菜单管理界面中显示输入控件,并在前端输出中显示对应的数据。

条件显示菜单项

通过 wp_nav_menu_objects 过滤器可以在菜单渲染前修改菜单项列表。根据用户登录状态、用户角色、页面类型等条件,动态添加或删除菜单项。例如,向登录用户显示个人中心链接,向未登录用户显示注册链接。