EP021. “动态导航菜单演示（register_nav_menu / wp_nav_menu）”

首页 › WordPress 开发课程 › PAGE TEMPLATE · EP021

约 8 分钟· #EP021#PAGE TEMPLATE

示范如何做出可以在 WordPress 后台「外观 - 菜单」里管理的动态导航菜单，分别给 header 和 footer 的两个菜单位置注册好菜单区，再用 wp_nav_menu() 把菜单输出到对应位置。但 Brad 明确说这个项目他自己最终还是想用写死在 HTML 里的导航（一次性客户网站他偏好这样做），所以讲完示范之后，在同一讲里又把所有新增代码全部删除、把原本注释掉的静态菜单 HTML 恢复。最终这一讲对主题代码是净零变化，header.php、footer.php、functions.php 都被改回讲课前的样子，所以没有对应的独立代码资料夹。

涉及文件

📌 本讲所有改动都在同一讲内被撤销，最终没有留下任何持久变化：

wp-content/themes/fictional-university-theme/functions.php （讲中临时新增 3 个 register_nav_menu()，讲末全部删除）
wp-content/themes/fictional-university-theme/header.php （讲中临时把硬编码菜单换成 wp_nav_menu()，讲末改回硬编码 HTML）
wp-content/themes/fictional-university-theme/footer.php （讲中临时把两处硬编码菜单换成 wp_nav_menu()，讲末改回硬编码 HTML）

下面代码块整理自 transcript 口述内容，用来理解「动态菜单要怎么接」这个知识点，不代表主题最终留存的文件内容。

代码实现（讲课演示用，讲末已撤销）

functions.php 在 university_features() 里临时新增了三个菜单位置注册：

function university_features() {
  add_theme_support('title-tag');

  // 演示代码，讲末删除：注册三个菜单位置
  register_nav_menu('header-menu-location', 'Header Menu Location');
  register_nav_menu('footer-location-1', 'Footer Location 1');
  register_nav_menu('footer-location-2', 'Footer Location 2');
}

header.php 里把硬编码的 <ul> 菜单临时换成：

<?php
  wp_nav_menu(array(
    'theme_location' => 'header-menu-location'
  ));
?>

footer.php 两处也分别换成对应的 theme_location：

<?php
  wp_nav_menu(array(
    'theme_location' => 'footer-location-1'
  ));
?>

<?php
  wp_nav_menu(array(
    'theme_location' => 'footer-location-2'
  ));
?>

配合这些代码，在后台「外观 - 菜单」里新建菜单、勾选对应的「显示位置」（Display location），就能在前台看到用后台管理的菜单内容，并且当前所在页面对应的菜单项会自动被 WordPress 加上 current-menu-item 这个 class（可以用 CSS 让它高亮显示）。

[截图：wp-admin 后台"外观→菜单"页面，显示 Header Menu Location / Footer Location 1 / Footer Location 2 三个可勾选显示位置的画面]

Hook / Function 速查

名称	类型	用途
`register_nav_menu( $location, $description )`	WP 内建 function	注册一个菜单位置，`$location` 是程序内部用的代号，`$description` 是后台显示的人类可读名称
`wp_nav_menu( $args )`	WP 内建 function	把指定菜单位置对应的菜单输出到页面（自动 echo），常用参数 `theme_location`
`current-menu-item`	WordPress 自动生成的 CSS class	动态菜单里，当前所在页面对应的菜单项会自动带这个 class

常见坑

如果没有在 functions.php 里用 register_nav_menu() 注册任何菜单位置，后台「外观」菜单里根本不会出现「菜单」这个选项。
wp_nav_menu() 不能直接传简单参数，必须传一个关联数组，且 theme_location 的值要跟 register_nav_menu() 里注册的代号完全一致（大小写也要对上）。
如果把 register_nav_menu() 都删掉之后，再去后台「外观 - 菜单」，会看到提示「你的主题不支持导航菜单或小工具」，这是正常现象，因为对应的注册代码已经被删除了。

延伸 / 后续讲座会用到

Brad 最终选择继续用写死在模板里的静态菜单 HTML（不用后台动态菜单），所以下一讲（EP022）会讲怎么用 is_page() 让写死的菜单项也能有「当前页面高亮」的效果，等于是用另一种方式重现这一讲最后提到的 current-menu-item 效果。

Sources

Udemy：

Become a WordPress Developer: Unlocking Power With Code — Section 5, EP021