twitter-bootstrap 如何将 wp_nav_menu() WordPress 与 Bootstrap 下拉菜单布局集成

How to integrate wp_nav_menu() WordPress with Bootstrap dropdown menu layout

提问by Rodrigo Schneider

I'm trying to integrate the bootstrap navbar dropdown with Wordpress. I already have the navbar working perfectly. But when I try to add a new category/page as a submenu, the layout break, with an "ul" element with decoration (dot) and has no dropdown hover effect. I tried the code from nav walker but didn't work. If have some way to make it without nav walker too, it'd be good.

我正在尝试将引导程序导航栏下拉列表与 Wordpress 集成。我已经让导航栏完美运行。但是当我尝试添加一个新的类别/页面作为子菜单时，布局中断，带有装饰（点）的“ul”元素并且没有下拉悬停效果。我尝试了 nav walker 的代码，但没有用。如果有一些方法可以在没有导航器的情况下实现它，那就太好了。

回答by Cedon

Try using this navwalker you can put into your theme.

尝试使用此导航器，您可以将其放入您的主题中。

https://github.com/twittem/wp-bootstrap-navwalker

https://github.com/twittem/wp-bootstrap-navwalker

回答by Irina

This can be done more simply with some jquery, but it's not too elegant and i bet is not recommended either. You could check to see what class wp adds to your ul element and based on that do some logic, something like:

这可以通过一些 jquery 更简单地完成，但它不太优雅，我打赌也不推荐。您可以检查 wp 添加到您的 ul 元素中的类，并基于此执行一些逻辑，例如：

jQuery(document).ready(function($)
{
    if( $('ul').hasClass('sub-menu') )
    {
        var parent = $('ul .sub-menu').parent();
        $('ul .sub-menu').addClass('dropdown-menu');
        parent.addClass('dropdown');
        parent.children(':first-child').attr({'href': '#', 'class': 'dropdown-toggle', 'data-toggle': 'dropdown'});

        }
});

回答by Maarten

Here an alternate solution for https://github.com/twittem/wp-bootstrap-navwalker

这是https://github.com/twittem/wp-bootstrap-navwalker的替代解决方案

namespace theme;

/**
 * Is Nav
 *
 * Check if nav menu has a `nav` or `navbar-nav` CSS class.
 *
 * @param stdClass $nav_menu An object of wp_nav_menu() arguments.
 *
 * @return bool
 */
function is_nav_menu_nav( $nav_menu )
{
    return preg_match( '/(^| )(nav|navbar-nav)( |$)/', $nav_menu->menu_class ); 
}

/**
 * CSS Class
 *
 * Add custom CSS classes to the nav menu item.
 *
 * @param array    $classes   Array of the CSS classes.
 * @param WP_Post  $item      The current menu item.
 * @param stdClass $nav_menu  An object of wp_nav_menu() arguments.
 * @param int      $depth     Depth of menu item.
 *
 * @return array
 */
function nav_menu_css_class( $classes, $item, $nav_menu, $depth )
{
    if ( ! is_nav_menu_nav( $nav_menu ) ) 
    {
        return $classes;
    }

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

        else
        {
            $classes[] = 'nav-item';
        }
    }

    return $classes;
}

add_filter( 'nav_menu_css_class', 'theme\nav_menu_css_class', 5, 4 );

/**
 * Link Attributes
 *
 * Alter nav menu item link attributes.
 *
 * @param array    $atts      The HTML attributes applied to the menu item's <a> element.
 * @param WP_Post  $item      The current menu item.
 * @param stdClass $nav_menu  An object of wp_nav_menu() arguments.
 * @param int      $depth     Depth of menu item.
 *
 * @return array
 */
function nav_menu_link_attributes( $atts, $item, $nav_menu, $depth )
{
    if ( ! is_nav_menu_nav( $nav_menu ) ) 
    {
        return $atts;
    }

    // Make sure 'class' attribute is set.
    if ( ! isset( $atts['class'] ) ) $atts['class'] = '';

    // Nav link
    if ( $depth == 0 ) 
    {
        $atts['class'] .= ' nav-link';

        // Dropdown
        if ( in_array( 'menu-item-has-children', $item->classes ) ) 
        {
            $atts['href'] = '#';
            $atts['class'] .= ' dropdown-toggle';
            $atts['data-toggle']   = 'dropdown';
            $atts['aria-haspopup'] = 'true';
            $atts['aria-expanded'] = 'false';
        }
    }

    // Dropdown item
    else if ( $depth == 1 )
    {
        $atts['class'] .= ' dropdown-item';
    }

    // Active
    if ( $item->current || $item->current_item_ancestor || $item->current_item_parent ) 
    {
        $atts['class'] .= ' active';
    }

    // Sanitize 'class' attribute.
    $atts['class'] = trim( $atts['class'] );

    return $atts;
}

add_filter( 'nav_menu_link_attributes', 'theme\nav_menu_link_attributes', 5, 4 );

/**
 * Submenu CSS Class
 *
 * Add custom CSS classes to the nav menu submenu.
 *
 * @param array    $classes   Array of the CSS classes that are applied to the menu <ul> element.
 * @param stdClass $nav_menu  An object of wp_nav_menu() arguments.
 * @param int      $depth     Depth of menu item.
 *
 * @return array
 */
function nav_menu_submenu_css_class( $classes, $nav_menu, $depth )
{
    if ( is_nav_menu_nav( $nav_menu ) ) 
    {
        $classes[] = 'dropdown-menu';
    }

    return $classes;
}

add_filter( 'nav_menu_submenu_css_class', 'theme\nav_menu_submenu_css_class', 5, 3 );

Usage:

用法：

Add menu_class navor navbar-nav

添加 menu_classnav或navbar-nav

wp_nav_menu( array
(
    'theme_location' => 'my-location-1', 
    'menu_class'     => 'nav',
));

wp_nav_menu( array
(
    'theme_location' => 'my-location-2', 
    'menu_class'     => 'navbar-nav',
));