编程马·菜鸟教程

Appearance

7.2 菜单调用与显示 ​

在WordPress主题中注册导航菜单后，我们需要在模板文件中调用和显示这些菜单。本章节将详细介绍如何在WordPress主题中调用和显示导航菜单，包括使用wp_nav_menu()函数和自定义菜单显示。

使用 wp_nav_menu() 函数 ​

wp_nav_menu()是WordPress中用于显示导航菜单的函数，它可以根据菜单位置标识符显示相应的导航菜单。

基本语法 ​

php
wp_nav_menu( $args );

其中，$args是一个包含菜单参数的数组，常用参数包括：

  • theme_location：菜单位置的标识符，与注册时使用的标识符一致
  • menu_class：菜单的CSS类名
  • container：菜单的容器元素，默认为div
  • container_class：容器元素的CSS类名
  • menu_id：菜单的ID
  • echo：是否直接输出，默认为true
  • fallback_cb：当没有菜单时的回调函数
  • depth：菜单的深度，默认为0（显示所有层级）

示例：基本用法 ​

php
<nav class="main-navigation">
    <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
</nav>

示例：自定义参数 ​

php
<nav class="main-navigation">
    <?php
    wp_nav_menu(array(
        'theme_location' => 'primary',
        'menu_class' => 'nav-menu',
        'container' => 'ul',
        'container_class' => 'menu-container',
        'menu_id' => 'primary-menu',
        'depth' => 2,
        'fallback_cb' => 'my_custom_theme_menu_fallback',
    ));
    ?>
</nav>

示例：添加菜单回退函数 ​

php
// 菜单回退函数
function my_custom_theme_menu_fallback() {
    ?>
    <ul class="nav-menu">
        <li><a href="<?php echo home_url(); ?>">Home</a></li>
        <?php wp_list_pages(array('title_li' => '')); ?>
    </ul>
    <?php
}

// 在模板文件中调用菜单
<nav class="main-navigation">
    <?php
    wp_nav_menu(array(
        'theme_location' => 'primary',
        'menu_class' => 'nav-menu',
        'fallback_cb' => 'my_custom_theme_menu_fallback',
    ));
    ?>
</nav>

菜单的HTML结构 ​

默认情况下，wp_nav_menu()函数会生成以下HTML结构：

html
<div class="menu-primary-container">
    <ul id="menu-primary" class="menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item menu-item-123">
            <a href="http://example.com/" aria-current="page">Home</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-456">
            <a href="http://example.com/about/">About</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-789">
            <a href="http://example.com/services/">Services</a>
            <ul class="sub-menu">
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-321">
                    <a href="http://example.com/services/web-design/">Web Design</a>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-654">
                    <a href="http://example.com/services/development/">Development</a>
                </li>
            </ul>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-987">
            <a href="http://example.com/contact/">Contact</a>
        </li>
    </ul>
</div>

菜单的CSS样式 ​

为了让导航菜单看起来更加美观，我们需要在style.css文件中添加相应的样式。

基本菜单样式 ​

css
/* 导航菜单容器 */
.main-navigation {
    background-color: var(--primary-color);
}

/* 菜单列表 */
.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 菜单项 */
.nav-menu li {
    position: relative;
}

/* 菜单项链接 */
.nav-menu li a {
    display: block;
    padding: 1rem;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

/* 菜单项悬停效果 */
.nav-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 当前菜单项 */
.nav-menu li.current-menu-item a {
    background-color: rgba(255, 255, 255, 0.2);
}

下拉菜单样式 ​

css
/* 下拉菜单 */
.nav-menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: var(--primary-color);
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 显示下拉菜单 */
.nav-menu li:hover > ul {
    display: block;
}

/* 下拉菜单项 */
.nav-menu li ul li {
    width: 100%;
}

/* 下拉菜单项链接 */
.nav-menu li ul li a {
    padding: 0.75rem 1rem;
}

/* 多级下拉菜单 */
.nav-menu li ul li ul {
    top: 0;
    left: 100%;
}

响应式菜单样式 ​

css
/* 移动菜单按钮 */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    /* 显示移动菜单按钮 */
    .menu-toggle {
        display: block;
    }
    
    /* 隐藏默认菜单 */
    .nav-menu {
        display: none;
        flex-direction: column;
    }
    
    /* 显示菜单 */
    .nav-menu.active {
        display: flex;
    }
    
    /* 下拉菜单 */
    .nav-menu li ul {
        position: static;
        min-width: 100%;
        box-shadow: none;
    }
}

移动菜单的JavaScript ​

为了实现移动设备上的菜单切换功能，我们需要添加一些JavaScript代码。

javascript
// 移动菜单切换功能
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.querySelector('.menu-toggle');
    const navMenu = document.querySelector('.nav-menu');
    
    if (menuToggle && navMenu) {
        menuToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            const expanded = menuToggle.getAttribute('aria-expanded') === 'true';
            menuToggle.setAttribute('aria-expanded', !expanded);
        });
    }
});

菜单调用的最佳实践 ​

  1. 合理使用：根据主题的布局和功能，合理使用导航菜单
  2. 样式设计：为导航菜单添加美观的样式，包括默认状态、悬停状态和当前状态
  3. 响应式设计：确保导航菜单在不同屏幕尺寸下都能正常显示
  4. 可访问性：确保导航菜单对屏幕阅读器友好，添加适当的ARIA属性
  5. 性能优化：避免在菜单中使用过于复杂的操作，影响网站性能

常见错误及解决方法 ​

1. 菜单不显示 ​

问题：导航菜单不显示，可能是因为菜单位置标识符不正确或没有在后台创建菜单

解决方法：确保菜单位置标识符与注册时使用的标识符一致，确保在WordPress后台的"外观" > "菜单"中创建了相应的菜单

2. 菜单样式显示异常 ​

问题：导航菜单样式显示异常，可能是因为CSS样式不正确

解决方法：检查CSS样式，确保选择器与HTML结构匹配

3. 移动菜单不工作 ​

问题：移动菜单不工作，可能是因为JavaScript代码有错误

解决方法：检查JavaScript代码，确保它正确无误，确保DOM元素选择器正确

4. 下拉菜单不显示 ​

问题：下拉菜单不显示，可能是因为CSS样式不正确或JavaScript代码有错误

解决方法：检查CSS样式，确保下拉菜单的显示/隐藏逻辑正确，检查JavaScript代码，确保它正确无误

小结 ​

在WordPress主题中调用和显示导航菜单是主题开发的重要部分，它允许用户在网站中导航到不同的页面和内容。通过本章节的学习，你应该：

  1. 掌握如何使用wp_nav_menu()函数调用和显示导航菜单
  2. 了解wp_nav_menu()函数的常用参数
  3. 掌握如何为导航菜单添加CSS样式，包括基本样式、下拉菜单样式和响应式样式
  4. 了解如何添加JavaScript代码实现移动菜单的切换功能
  5. 掌握菜单调用的最佳实践
  6. 了解常见错误及解决方法

在后续的章节中，我们将详细介绍如何在WordPress后台管理导航菜单，以及如何创建自定义导航菜单。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建