Estoy tratando de integrar el bootstrap barra de navegación desplegable con WordPress. Ya tengo la barra de navegación, funciona a la perfección. Pero cuando intento agregar una nueva categoría/página como un submenú, el diseño de descanso, con un «ul» elemento de decoración (dot) y no tiene desplegable efecto de hover. He probado el código de nav walker, pero no funcionó. Si tienen alguna manera de hacerlo sin nav walker también, sería bueno.

3 Comentarios

  1. 6

    Trate de usar este navwalker usted puede poner en su tema.

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

    • Hey man! Muchas gracias! Lo han intentado antes, pero tuve problemas con el PHP. Ahora, sin requerir de una vez, yo solo copie y pegue el código en mi function.php y esta funcionando!!!
    • Eres bienvenido. Yo tuve un problema similar hace un tiempo cuando yo estaba jugando con WordPress y Bootstrap y tenía que usar esto.
  2. 1

    Esto se puede hacer simplemente con algo de jquery, pero no es demasiado elegante y apuesto a que no es recomendable tampoco. Usted puede comprobar para ver qué clase de wp añade a tu ul elemento y en base a eso hacer un poco de lógica, algo así como:

    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'});
    
            }
    });
  3. 1

    Aquí una solución alternativa para 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 );

    Uso:

    Agregar menu_class nav o 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',
    ));

Dejar respuesta

Please enter your comment!
Please enter your name here