WordPress主题开发之自定义导航菜单功能开发:

一、注册菜单

在主题 functions.php 文件中,使用 register_nav_menu 注册单个菜单或者使用 register_nav_menus 批量注册菜单。

注册单个菜单:

/*
register_nav_menu( $location, $description )
函数功能:注册导航菜单
@参数 string $location, 导航菜单的位置
@参数 string $description, 导航菜单的描述
开启多个位置的导航菜单,只需要重复调用此函数即可
*/
register_nav_menu( 'main-menu', '主菜单' );

批量注册多个菜单:

/*
register_nav_menus( $locations )
函数功能:批量注册导航菜单
@参数 string[] array $locations,菜单位置标识符(如 slug)和描述性文本的关联数组。
*/
register_nav_menus( array(
    'main_menu' => '主菜单',
    'side_menu' => '侧边栏菜单'
) );

使用钩子:

function register_my_menus() {
  register_nav_menus(
    array(
      'amin_menu' => '主菜单',
      'side_menu' =>'侧边栏菜单',
    )
  );
}
add_action( 'after_setup_theme', 'register_my_menus' );

二、后台创建菜单

注册好菜单后,后台的“外观”中就会出现“菜单”选项,通过该功能我们就可以可视化的创建菜单、向菜单中添加项目(页面、文章、自定义链接、分类)、设置菜单关联等操作。

三、在模板中添加菜单代码,调用菜单

在主题模板中通过 wp_nav_menu() 调用菜单,该函数会生成一段包含固定 dom 和 class 的 html代码。

默认用法:

<?php wp_nav_menu(); ?>

高级用法:

<?php if ( has_nav_menu( 'menu' ) ) : ?>
  <?php
  wp_nav_menu(
   array(
    'theme_location' => 'menu',
    'container' => '',
    'menu_class' => 'my_menu ',
    'menu_id' => 'main',
    'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'walker' => new WPDocs_Walker_Nav_Menu(),
   )
  );
  ?>
<?php endif; ?>

wp_nav_menu 参数说明:

theme_location 导航别名
menu 所需的菜单。接受菜单 ID、slug、名称或对象。
container 包含 ul 的容器,默认 div
container_id 包含 ul 的容器 ID
container_class 包含 ul 的容器 class
container_aria_label 包含 ul 的容器 aria-label
menu_class ul 元素的 class
menu_id ul 元素的 ID,默认为菜单的 slug 。
fallback_cb 菜单不存在触发的回调函数。默认值为“wp_page_menu”。设置为 false 不回调。
before 菜单链接标记前的文本 
after 菜单链接标记后的文本
link_before 菜单链接文本前的文本
link_after 菜单链接文本后的文本
echo 是否输出或者返回菜单,默认为 true
depth 菜单深度,0 代表返回所有菜单
walker 自定义 walker 类的实例,通过该类可以任意修改菜单的实现,包括 dom 等
items_wrap 列表项应该如何包装。使用带有编号占位符的 printf() 格式。默认是一个带有 id 和 class 的 ul。值为 ‘%3$s’ 去ul保持li不变
item_spacing 是否在菜单的 HTML 中保留空格。接受“preserve”或“discard”。默认“preserve”。