在WordPress中,使用 wp_nav_menu()
函数创建自定义菜单涉及几个步骤。以下是一个详细的指南:
步骤 1: 创建菜单
首先,你需要在WordPress的仪表盘中创建一个菜单。
- 登录到WordPress仪表盘。
- 转到外观(Appearance) > 菜单(Menus)。
- 给你的菜单起一个名字,然后点击“创建菜单”按钮。
- 在左侧的“页面”、“分类”、“自定义链接”等部分选择你想要添加到菜单中的项目。
- 点击“添加到菜单”按钮将选中的项目添加到菜单结构中。
- 你可以拖放菜单项来重新排列它们,或者通过点击右侧的箭头展开菜单项来设置父级/子级关系。
- 点击“保存菜单”按钮。
步骤 2: 在主题中注册菜单位置
在你的主题的 functions.php
文件中,你需要注册一个菜单位置,这样你就可以在主题中放置菜单了。
function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'footer-menu' => __( 'Footer Menu' ),
// 你可以根据需要添加更多的菜单位置
)
);
}
add_action( 'init', 'register_my_menus' );
在上面的代码中,'header-menu'
和 'footer-menu'
是菜单位置的标识符,你可以根据需要更改它们。
步骤 3: 在主题中调用 wp_nav_menu()
现在,你需要在主题的适当位置调用 wp_nav_menu()
函数来显示菜单。这通常在 header.php
或 footer.php
文件中完成。
例如,在 header.php
中添加以下代码来显示头部菜单:
<?php
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu_class' => 'navbar-nav ml-auto', // 你可以添加自定义的CSS类
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', // 如果你使用了Bootstrap,可以添加这个walker
'walker' => new WP_Bootstrap_Navwalker(), // 同上
)
);
?>
在上面的代码中:
'theme_location'
应该与你注册的菜单位置标识符相匹配。'menu_class'
允许你添加CSS类到<ul>
标签中。'fallback_cb'
是一个回调函数,如果没有菜单被分配到指定的位置,它将被调用。'walker'
允许你指定一个类来修改菜单的输出结构。例如,WP_Bootstrap_Navwalker
是一个用于Bootstrap的导航菜单walker。
步骤 4: 保存并上传更改
保存 functions.php
和 header.php
(或你添加菜单的文件)的更改,并将它们上传到你的服务器上。
现在,当你访问你的网站时,你应该能看到一个新的自定义菜单。如果你没有看到菜单,确保你已经将菜单分配到了在仪表盘创建时指定的位置。