README

安装

使用Composer在项目的根目录中安装此包。

$ composer require fiskhandlarn/bootstrap-5-wordpress-navbar-walker

使用方法

1. 通过在主题的functions.php文件中添加以下代码来注册一个新的菜单：

register_nav_menu('main-menu', 'Main menu');

1. 将以下HTML代码添加到header.php文件中或您想要放置菜单的任何地方：

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
     wp_nav_menu([
         'theme_location' => 'navigation',
         'container' => false,
         'menu_class' => '',
         'fallback_cb' => '__return_false',
         'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-lg-0 %2$s">%3$s</ul>',
         'depth' => 2,
         'walker' => new Fiskhandlarn\Bootstrap5WordpressNavbarWalker(),
     ]);
?>
    </div>
  </div>
</nav>

添加对下拉菜单（响应式）对齐的支持

• 在WordPress的“外观 -> 菜单”页面中，在“屏幕选项”下勾选“CSS类”复选框；
• 在URL字段中添加一个带有“#”的“自定义链接”（这将作为下拉菜单的父级）；
• 在“CSS类”字段中添加以下对齐类中的任意一个：'dropdown-menu-start', 'dropdown-menu-end', 'dropdown-menu-sm-start', 'dropdown-menu-sm-end', 'dropdown-menu-md-start', 'dropdown-menu-md-end', 'dropdown-menu-lg-start', 'dropdown-menu-lg-end', 'dropdown-menu-xl-start', 'dropdown-menu-xl-end', 'dropdown-menu-xxl-start', 'dropdown-menu-xxl-end';
• 如果检测到上述任何类，则它们将自动复制到Bootstrap 5结构后的
  元素中；
• 与下拉菜单对齐无关的任何其他类将保持原位。

许可证

Expat许可证