如何在 Wordpress 中使用 Bootstrap 4 创建导航栏菜单？答案

【问题标题】：How to create Navbar Menu with Bootstrap 4 in Wordpress?如何在 Wordpress 中使用 Bootstrap 4 创建导航栏菜单？
【发布时间】：2023-03-27 14:30:02
【问题描述】：

在将更新后的 Bootstrap 04 标记放入 WordPress 菜单时遇到问题。这是我正在使用的菜单。直到li 标记将类插入li 标记就可以了。

请告诉我如何将类添加到锚 (<a>) 标记。我需要使用过滤器还是有什么简单的方法？？

        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>

提前致谢

【问题讨论】：

标签： wordpress bootstrap-4

【解决方案1】：

如果你想使用函数钩子在wp_nav_menu 中添加类：

function add_link_atts($atts) {
$atts['class'] = "nav-link";
return $atts;
}

add_filter( 'nav_menu_link_attributes', 'add_link_atts');

【讨论】：

我怎样才能只为特定菜单添加这个过滤器？

【解决方案2】：

add class to li in menu，它只将class添加到header menu，如下图if( $args->menu == 'header' )

function add_classes_on_li($classes, $item, $args) {
    if( $args->menu == 'header' ) {
        $classes[] = 'nav-item';
    }
    return $classes;
}

add_filter('nav_menu_css_class','add_classes_on_li',1,3);

将类添加到菜单中的“a”

function add_link_atts($atts) {
    $atts['class'] = "nav-link";
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_link_atts');

【讨论】：

【解决方案3】：

您可以使用以下代码创建 bootstrap 4 导航栏

header.php

<nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="brand" href="<?= esc_url(home_url('/')); ?>">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <?php 

            if (has_nav_menu('header-menu')) :

            $menu_args = array(
              'menu'            => 'Main Menu', 
              'container'       => 'container', 
              'container_class' => 'container_class', 
              'container_id'    => 'container_id',
              'menu_class'      => 'navbar-nav ml-auto',
              'menu_id'         => 'menu_id',
              'echo'            => true);

            ?>
            <?php wp_nav_menu($menu_args);


            endif;

            ?>
        </div>
    </nav>

functions.php

function wpse154485_add_aria_haspopup_atts( $atts, $item, $args ) {
  if (in_array('menu-item-has-children', $item->classes)) {
    $atts['class'] = 'dropdown-toggle';
    $atts['id'] = 'navbarDropdownMenuLink';
    $atts['data-toggle'] = 'dropdown';

  }

  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'wpse154485_add_aria_haspopup_atts', 10, 3 );

function my_nav_menu_submenu_css_class( $classes ) {
  $classes[] = 'dropdown-menu';
  $classes['aria-labelledby'] = 'navbarDropdownMenuLink';
  return $classes;
}
add_filter( 'nav_menu_submenu_css_class', 'my_nav_menu_submenu_css_class' );


function special_nav_class($classes, $item){
  if( in_array('current-menu-item', $classes) ){
          $classes[] = 'active ';
  }

  if( in_array('menu-item-has-children', $classes) ){
  $classes[] = 'dropdown ';
  }

if( in_array('menu-item', $classes) ){
  $classes[] = 'nav-item ';
}

     return $classes;
}
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

【讨论】：