WordPress主题开启导航菜单功能

开启导航菜单功能需要在functions.php文件中添加代码：

//添加主题支持菜单功能
add_theme_support('menus'); 

然后在主题模板中添加菜单代码：

//调用菜单
<?php wp_nav_menu(
    array(
        'theme_location'  => 'primary',
        'menu_class'      => 'nav-menu',
        'fallback_cb'     => '',
        'container'       => 'nav',
        'container_class' => 'nav-container',
        'depth'           => 2,
    )
); ?> 

其中“theme_location”指定了菜单位置，可以在WordPress后台中设置；“menu_class”为菜单CSS样式；“container”指定菜单的容器标签，如div或nav等；“depth”为菜单的层级深度，一般为2。“fallback_cb”为菜单不存在时的回退函数，不需要可以留空。

示例代码：

//添加主题支持菜单功能
add_theme_support('menus');

//在页面头部添加菜单代码
<header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <!-- 顶部Logo -->
            <a class="navbar-brand" href="#">MyTheme</a>

            <!-- 移动端展开按钮 -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- 菜单代码 -->
            <div class="collapse navbar-collapse" id="navbar">
                <?php wp_nav_menu(
                    array(
                        'theme_location'  => 'primary',
                        'menu_class'      => 'navbar-nav ml-auto',
                        'fallback_cb'     => '',
                        'container'       => false,
                        'depth'           => 2,
                        'walker'          => new wp_bootstrap_navwalker()
                    )
                ); ?>
            </div>
        </div>
    </nav>
</header> 

上述示例代码中使用了Bootstrap框架，菜单中也使用了Bootstrap的样式。注意在functions.php文件中需要载入wp_bootstrap_navwalker类。

阅读文章或者观看视频过程中有任何问题，请下方留言或者联系我Q248758228