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

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

如果要使用functions Hook中的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

您可以使用以下代码创建Bootstrap 4 Navbar

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>

function.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);

Answer 3

在菜单中的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');