Menú de navegación de WordPress usando Twitter Bootstrap

3 feb 2012, 21:51:23
Vistas: 17.3K
Votos: 3

Estoy usando Twitter Bootstrap en mi tema. Estoy intentando usar el menú de Bootstrap en mi tema. Pero utiliza atributos personalizados como data-toggle.

Aquí está el código completo.

<ul class="nav">
            <li class="active"><a href="#">Inicio</a></li>
            <li><a href="#">Enlace</a></li>
            <li><a href="#">Enlace</a></li>
            <li><a href="#">Enlace</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Desplegable <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Acción</a></li>
                <li><a href="#">Otra acción</a></li>
                <li><a href="#">Algo más aquí</a></li>
                <li class="divider"></li>
                <li><a href="#">Enlace separado</a></li>
              </ul>
            </li>
          </ul>

¿Alguien puede ayudarme a optimizar este código para wp_nav_menu()?

Actualización:

Esto es lo que he intentado hasta ahora.

1) Clase personalizada para submenús

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
  }
}

2) wp_nav_menu

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

¿Puedes ayudarme a añadir esa clase "dropdown" y este enlace?

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Desplegable <b class="caret"></b></a>

0
Todas las respuestas a la pregunta 4
2

Para una solución de copiar y pegar, revisa este Walker personalizado: http://goodandorgreat.wordpress.com/2012/01/12/update-2-using-twitter-bootstrap-dropdown-menus-with-wordpress/

Le faltan una o dos cosas como data-toggle="dropdown" y <b class="caret"></b>.

Debería ser bastante fácil resolverlo, pero aquí está mi versión modificada: https://gist.github.com/1817371

Espero que te ayude.

13 feb 2012 16:47:24
Comentarios

Gracias por esto. No tengo el código frente a mí, pero literalmente me estaba arrancando los pelos tratando de averiguar cómo obtener una propiedad had_children. ¿Está documentado esto en algún lado por casualidad? (me refiero a la versión posterior a WP3.4)

Jon Jaques Jon Jaques
24 feb 2013 17:22:02

No estoy seguro, pero @Jan Fabry tiene una breve explicación en este hilo

Duane Duane
11 abr 2013 18:30:09
0

Utilicé un enfoque diferente al de un walker personalizado. Usé una función para agregar la clase "dropdown" a cualquier elemento de navegación padre que contenga elementos de submenú. Dado que WordPress genera la clase "sub-menu" por defecto, uso jQuery para agregar la clase "dropdown-menu" a cualquier elemento que tenga la clase "sub-menu". Luego, uso jQuery para añadir el elemento <b class="caret"></b>.

He documentado esto como un tutorial completo sobre cómo implementar el dropdown de Bootstrap en un menú de navegación de WordPress aquí: http://astronautweb.co/2012/10/wordpress-dropdown-bootstrap/

15 oct 2012 10:49:26
1

Consulta esta respuesta para más detalles: busca menu_item_parent y establece class="dropdown-toggle" condicionalmente.

Más preguntas similares.

3 feb 2012 22:46:20
Comentarios

Hola toscho, gracias. Revisa esta página. Eso es exactamente lo que estaba buscando. Probé esos códigos. Como no soy un experto en PHP no pude hacerlo funcionar. ¿Puedes ayudarme con esta respuesta? Gracias

PrivateUser PrivateUser
3 feb 2012 23:41:33
4

Prueba WP Bootstrap Menu si no buscas algo complicado.

Debes reemplazar el wp_nav_menu() nativo con una función personalizada del plugin en tu tema para que funcione. Ten en cuenta que la función del plugin no es compatible con otros plugins, no ofrece los mismos filtros que el walker de WordPress.

23 ene 2013 04:28:59
Comentarios

Una respuesta debe ser más que solo un enlace a un sitio externo. Por favor agrega una solución.

fuxia fuxia
23 ene 2013 06:59:37

Ah disculpa no lo sabía, no sé qué agregar, ese plugin genera exactamente el código con una función personalizada que se necesita para funcionar con bootstrap

farhan farhan
24 ene 2013 08:15:32

Hice una edición para mostrar cómo podría verse: describe cómo funciona y cuáles son los cambios más importantes. Aún no es ideal, pero los lectores posteriores podrán juzgar más rápido si quieren usarlo.

fuxia fuxia
24 ene 2013 08:23:32

Gracias, agregaré detalles así la próxima vez que publique

farhan farhan
25 ene 2013 01:59:29