Menú desplegable de Bootstrap con wp_nav_menu en WordPress

Question

Menú desplegable de Bootstrap con wp_nav_menu en WordPress

27 feb 2013, 10:27:00

Vistas: 16.5K

Votos: 4

Estoy intentando construir un tema de Wordpress con Bootstrap, pero el menú de navegación me está dando problemas. Me gustaría que el menú desplegable funcione como el de Bootstrap, pero no sé cómo hacerlo.

Este es mi menú:

<ul class="nav">
   <?php wp_nav_menu( array( 'items_wrap' => '%3$s' ) ); ?>
</ul>

Esto es lo que tengo en mi functions.php para el menú:

add_action('after_setup_theme', 'blankslate_setup');
function blankslate_setup(){
register_nav_menus(
array( 'main-menu' => __( 'Main Menu', 'blankslate' ) )
);
}

function my_wp_nav_menu_args( $args = '' )
{
    $args['container'] = false;
    return $args;
} // función

add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

Cuando añado un submenú (a través de Apariencia - Menús) esto es lo que se genera actualmente:

<ul class="nav">
    <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="#">Padre</a>
        <ul class="sub-menu">
                <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="#">Hijo</a></li>
        </ul>
    </li>
</ul>

Para que mi menú funcione con Bootstrap necesito que se genere así:

<ul class="nav">
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Padre <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Hijo</a></li>
        </ul>
    </li>
</ul>

Necesito:

Añadir la clase "dropdown" si un menu-item tiene elementos hijos
Añadir class="dropdown-toggle" data-toggle="dropdown" al elemento .dropdown a
Añadir <b class="caret"></b> después del nombre del menú desplegable (dentro del elemento .dropdown a)
Añadir class="dropdown-menu" a <ul class="sub-menu">

¡Espero que alguien pueda ayudarme!

Cody

279

menús desplegable twitter bootstrap

Comentarios

Si buscas en Github, encontrarás algunas funciones de walker personalizadas para wp_nav_menu en Bootstrap.

RRikesh

27 feb 2013 11:28:06

Todas las respuestas a la pregunta

Comentarios

Gracias, lo probaré. Olvidé envolver algo de código en los puntos 3 y 4 :)

Cody

27 feb 2013 12:27:34

Ok, ahora tiene sentido, creo que el código anterior debería encargarse de todo.

Sunyatasattva

27 feb 2013 12:38:58

¿crees que habría alguna manera de hacer esto en el functions.php? ¿O de alguna otra forma que me permita modificar solo el tema.

Cody

27 feb 2013 12:49:12

Puedes usar esto perfectamente en tu functions.php, quizás usando un include a un archivo externo para mantenerlo más limpio, pero eso es todo.

Sunyatasattva

27 feb 2013 13:55:39

¡Gracias! Me salvaste el día, está funcionando de maravilla :)

Cody

27 feb 2013 14:17:45

Para solucionar el problema del menú desplegable deberás:

ir al archivo class-wp-bootstrap-navwalker.php

buscar

$atts['data-toggle'] ="dropdown";

y reemplazarlo con

$atts['data-bs-toggle'] ="dropdown";

moaz studio استديو معاذ

1

3 mar 2021 07:59:34

Sunyatasattva 1.63K · Accepted Answer · 2013-02-27T11:58:59Z

Necesitarás escribir un walker personalizado que extienda Walker_Nav_Menu, más o menos así:

class My_Custom_Nav_Walker extends Walker_Nav_Menu {

   function start_lvl(&$output, $depth = 0, $args = array()) {
      $output .= "\n<ul class=\"dropdown-menu\">\n";
   }

   function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
       $item_html = '';
       parent::start_el($item_html, $item, $depth, $args);

       if ( $item->is_dropdown && $depth === 0 ) {
           $item_html = str_replace( '<a', '<a class="dropdown-toggle" data-toggle="dropdown"', $item_html );
           $item_html = str_replace( '</a>', ' <b class="caret"></b></a>', $item_html );
       }

       $output .= $item_html;
    }

    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
        if ( $element->current )
        $element->classes[] = 'active';

        $element->is_dropdown = !empty( $children_elements[$element->ID] );

        if ( $element->is_dropdown ) {
            if ( $depth === 0 ) {
                $element->classes[] = 'dropdown';
            } elseif ( $depth === 1 ) {
                // Nivel extra de menú desplegable,
                // como se ve en http://twitter.github.com/bootstrap/components.html#dropdowns
                $element->classes[] = 'dropdown-submenu';
            }
        }

    parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}

No estoy seguro de lo que necesitas con los puntos 3 y 4, sin embargo.