Menú de navegación de WordPress usando Twitter Bootstrap
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>

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.

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)

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

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/

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

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

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.

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

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

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.
