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

Question

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

Answer 1

这里是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 );

用法：

添加 menu_class nav 或 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',
));

Answer 2

这可以通过一些 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'});

        }
});

Answer 3

尝试使用这个可以放入主题的导航器。

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