Question

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

Answer 1

尝试使用这个可以放入主题的navwalker。

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

Answer 2

这可以通过一些jquery更简单地完成，但它不太优雅，我也不建议打赌。你可以检查一下wp为你的ul元素增加了什么类，并根据它做了一些逻辑，比如：

alert(filename);

Answer 3

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

如何将wp_nav_menu（）WordPress与Bootstrap下拉菜单布局集成

3 个答案: