如何为网站各页面配置不同样式菜单？首页用普通菜单其余页用汉堡菜单

阿华AIGC实验室

2026-5-19

Hey there! 这个需求其实不用费劲找那些不对口的插件，自己动手就能轻松实现，给你几个实用的方案，按需选就行：

方案1：利用主题自带的条件控制（最省事）

很多现代WordPress主题本身就支持页面级的菜单定制，你可以先试试这个：

进入后台「外观」→「自定义」面板，找「菜单」「布局」或者「页眉设置」这类选项，看看有没有页面专属的菜单样式开关——比如允许为首页单独启用普通菜单，其他页面默认用汉堡菜单。
如果是块主题（比如Twenty Twenty-Three），直接打开「站点编辑器」，分别编辑首页模板和通用页面模板：首页插入「导航菜单」区块（设置成普通样式），其他页面插入「汉堡菜单」区块，保存后就能精准区分显示了。

方案2：添加自定义代码片段（灵活度最高）

如果主题没自带这个功能，加几行代码就能搞定，不用写复杂插件：

优先用子主题的functions.php（避免主题更新丢失代码），或者用后台的「自定义代码」插件（比如Code Snippets）来添加PHP逻辑：

function custom_menu_display() {
    // 判断是否是首页
    if ( is_front_page() || is_home() ) {
        // 显示普通菜单，替换成你主题的菜单位置（一般是primary/main-menu）
        wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'normal-main-menu' ) );
    } else {
        // 显示汉堡菜单，先输出触发按钮，再输出下拉菜单
        echo '<button class="hamburger-trigger">☰</button>';
        wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'hamburger-dropdown-menu' ) );
    }
}
// 替换主题默认的菜单钩子，比如你的主题用header_menu钩子输出菜单，就改成对应的名称
remove_action( 'theme_header_menu', 'theme_default_menu_render' );
add_action( 'theme_header_menu', 'custom_menu_display' );

再添加CSS控制显示隐藏和样式：

/* 首页隐藏汉堡菜单 */
body.home .hamburger-trigger,
body.home .hamburger-dropdown-menu {
    display: none;
}
/* 非首页隐藏普通菜单 */
body:not(.home) .normal-main-menu {
    display: none;
}
/* 汉堡菜单默认隐藏下拉列表 */
.hamburger-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 点击按钮后显示下拉菜单 */
.hamburger-trigger.active + .hamburger-dropdown-menu {
    display: block;
}

最后加一行JS实现汉堡菜单的点击切换：

document.querySelector('.hamburger-trigger').addEventListener('click', function() {
    this.classList.toggle('active');
});

方案3：制作极简自定义插件（适合不想改主题的情况）

如果不想碰主题文件，自己做个小插件也很简单：

新建一个文件夹custom-menu-switcher，里面创建custom-menu-switcher.php文件，内容如下：

<?php
/*
Plugin Name: Custom Menu Switcher
Description: 首页显示普通菜单，其他页面显示汉堡菜单
Version: 1.0
Author: Your Name
*/

function custom_menu_switcher_render() {
    if ( is_front_page() ) {
        wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'normal-menu' ) );
    } else {
        echo '<button class="hamburger-btn">☰</button>';
        wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'hamburger-menu' ) );
    }
}
// 替换成你主题的菜单输出钩子，比如'header_navigation'
remove_action( 'header_navigation', 'default_menu_function' );
add_action( 'header_navigation', 'custom_menu_switcher_render' );
?>