WordPress如何调用新增的自定义菜单

前言

在上一篇文章中，我们讲解了WordPress如何在后台添加多个自定义菜单。本文将分享如何在前端模板中调用我们新增的自定义菜单。

调用方法

调用自定义菜单非常简单，主要使用 WordPress 核心函数 wp_nav_menu()。

代码示例

以下是一个基本的调用示例，假设我们注册了一个名为 foot-nav 的菜单位置：

<?php
wp_nav_menu( array(
    'theme_location' => 'foot-nav', // 对应注册的菜单位置标识
    'container'      => 'nav',      // 外层容器标签
    'container_class' => 'foot-nav', // 外层容器的 CSS 类
    'menu_id'        => '',         // 菜单 <ul> 的 ID 属性（留空则不添加）
    'menu_class'     => 'uk-list uk-margin-remove', // 菜单 <ul> 的 CSS 类
    'echo'           => true,       // 是否直接输出 HTML，设为 false 则返回字符串
) );
?>

参数说明

• theme_location（必需）：此参数必须与你使用 register_nav_menus() 函数注册的菜单位置标识（如 'foot-nav'）完全一致。
• container：包裹菜单列表的外层 HTML 标签，默认为 'div'。设为 false 或空字符串则不添加此外层容器。
• container_class：外层容器的 CSS 类名。
• menu_class：菜单列表 <ul> 元素的 CSS 类名。
• echo：控制函数是直接输出 HTML 还是返回 HTML 字符串。在模板中通常设为 true（默认值）。

输出效果

执行上述代码后，WordPress 会从后台「外观」→「菜单」中，找到分配给 foot-nav 位置的菜单，并生成对应的导航 HTML 代码。

生成的 HTML 结构通常如下所示：

<nav class="foot-nav">
    <ul id="" class="uk-list uk-margin-remove">
        <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item ...">
            <a href="...">首页</a>
        </li>
        <li class="menu-item ...">
            <a href="...">关于我们</a>
        </li>
        ... 其他菜单项
    </ul>
</nav>

常见问题：如何清理多余的 CSS 类？

如上方代码所示，WordPress 默认会为每个菜单项 <li> 添加大量描述其类型、状态等的 CSS 类（如 menu-item-type-post_type）。虽然这些类有助于精确的样式控制，但有时会使 HTML 结构显得臃肿。

若希望精简这些自动生成的类名，可以通过过滤器（Filter）来修改。这通常涉及使用 nav_menu_css_class 和 nav_menu_item_id 等过滤器。具体操作方法将在后续文章中详细讲解。