导航菜单与移动端适配
注册 + 输出
functions.php：
add_action( 'after_setup_theme', function () {
register_nav_menu( 'primary', '主导航' );
} );header.php：
<nav class="site-nav">
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'nav-list',
'fallback_cb' => false,
) ); ?>
</nav>四个参数：
theme_location：用哪个位置；container：不包 div；menu_class：给<ul>加 class；fallback_cb => false：没配菜单时什么都不输出（默认会输出所有页面列表，很难看）。
移动端的汉堡菜单
不一定要用 Bootstrap。纯 CSS + 一点点 JS 就能做。
<button class="nav-toggle" aria-label="菜单">☰</button>
<nav class="site-nav">...菜单...</nav>CSS：
.nav-toggle { display: none; background: none; border: 0; font-size: 24px; cursor: pointer; }
@media (max-width: 768px) {
.nav-toggle { display: block; }
.site-nav { display: none; }
.site-nav.open { display: block; }
}JS（几行）：
document.querySelector('.nav-toggle').addEventListener('click', function () {
document.querySelector('.site-nav').classList.toggle('open');
});就这样。点按钮，给 nav 加/去 open 类，CSS 控制显示隐藏。
当前项高亮
不用写 PHP。WordPress 自动给当前菜单项加 current-menu-item：
.current-menu-item > a { color: #d43c33; font-weight: bold; }几个常见问题
菜单不显示
后台“外观 → 菜单”里没配菜单，或者没勾“显示位置”。检查这两处。
菜单里出现所有页面
没配菜单时，WordPress 默认输出页面列表。加 'fallback_cb' => false 就不输出了。
手机点汉堡没反应
检查 JS 有没有加载、选择器对不对、CSS 里 .site-nav.open 有没有写。
菜单项太多换行
给 .nav-list 加 display: flex; flex-wrap: wrap; gap: 20px;，让它自动排布。
一个建议
导航项不要太多。手机上一屏放不下，用户也记不住。5-7 个足够，多的放进“更多”或者侧栏。
小结
一句话记住：register_nav_menu 注册、wp_nav_menu 输出（加 fallback_cb false）；移动端汉堡菜单用 CSS + 几行 JS 就够。
下一篇做样式。
本系列导航
- 上一篇：侧栏、搜索框、小工具
- 下一篇：样式：继续用框架还是自己写
- 返回总目录
相关文章
搜索文章：
联系方式：
近期文章