Question

将更新的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>

提前致谢

Answer 1

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

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

add_filter( 'nav_menu_link_attributes', 'add_link_atts');

Answer 2

将类添加到菜单中的li，它仅将类添加到标题菜单中，如下所示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');

Answer 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);

如何在Wordpress中使用Bootstrap 4创建Navbar菜单？

3 个答案: