06 菜单、小工具与侧边栏
整理菜单注册、输出、walker 基础、侧边栏和动态页脚场景。
本页关键词
register_nav_menus
wp_nav_menu
register_sidebar
dynamic_sidebar
walker
学习目标
- 会注册多个菜单位置
- 会输出菜单并控制 HTML
- 会注册侧边栏
- 知道何时使用自定义 walker
代码使用提醒
本页代码适合用于学习和研究。复制到正式网站前，请先备份，并优先在测试环境验证。
涉及用户输入、后台保存、接口请求、删除操作和邮件发送时，要同时考虑权限、nonce、sanitize、validate 和 escape。
1. 注册多个菜单位置
基础
<?php
function mysite_register_menus() {
register_nav_menus( array(
'primary' => '主导航',
'mobile' => '移动端导航',
'footer' => '页脚导航',
) );
}
add_action( 'after_setup_theme', 'mysite_register_menus' );
菜单位置 key 不要随意修改，否则后台分配可能失效。
2. 输出主导航菜单
基础
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => 'nav',
'container_class'=> 'site-nav',
'menu_class' => 'site-nav__list',
'fallback_cb' => false,
) );
fallback_cb=false 可以避免未设置菜单时输出默认页面列表。
3. 给菜单项添加自定义 class
实用
<?php
function mysite_nav_menu_css_class( $classes, $item, $args, $depth ) {
if ( isset( $args->theme_location ) && 'primary' === $args->theme_location ) {
$classes[] = 'primary-menu__item';
}
return $classes;
}
add_filter( 'nav_menu_css_class', 'mysite_nav_menu_css_class', 10, 4 );
过滤菜单 class 可以方便统一前端命名。
4. 注册页脚小工具区域
基础
<?php
function mysite_register_sidebars() {
register_sidebar( array(
'name' => '页脚区域 1',
'id' => 'footer-1',
'before_widget' => '<section class="footer-widget">',
'after_widget' => '</section>',
'before_title' => '<h3 class="footer-widget__title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'mysite_register_sidebars' );
侧边栏不仅用于 sidebar，也常用于页脚模块。
5. 模板中输出小工具区域
基础
<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
<div class="footer-widgets">
<?php dynamic_sidebar( 'footer-1' ); ?>
</div>
<?php endif; ?>
输出前先判断 is_active_sidebar，避免空容器。
6. 根据页面显示不同菜单
实用
<?php
$location = is_front_page() ? 'primary' : 'mobile';
wp_nav_menu( array(
'theme_location' => $location,
'container' => 'nav',
) );
条件输出适合活动页、落地页或多语言/多地区站点。
本页总结
菜单和侧边栏是主题可配置区域。会注册、输出和过滤后，就能把很多硬编码内容交给后台维护。