Añadir atributos a enlaces <a> en wp_nav_menu usando una función Walker personalizada
Estoy intentando generar un menú usando wp_nav_menu. Mi resultado esperado es este:
<!-- Menú Principal -->
<div class="navbar navbar-blue navbar-fixed-top" style="margin-top:74px">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li class="dropdown dropdown-hover">
<a href="dashboard.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Dashboard <b class="caret"></b></a>
<!-- Menú desplegable -->
<ul class="dropdown-menu">
<li><a href="dashboard.html?lang=en">Dashboard #2</a></li>
<li><a href="dashboard_1.html?lang=en">Dashboard #1</a></li>
</ul>
<!-- Fin Menú desplegable -->
</li>
<li class="divider-vertical"></li>
<li class="active"><a href="gallery.html?lang=en">Galería de fotos</a></li>
<li class="divider-vertical"></li>
<li class="dropdown dropdown-hover">
<a href="site-pages.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Páginas del sitio <b class="caret"></b></a>
<!-- Menú desplegable -->
<ul class="dropdown-menu">
<li><a href="site-pages.html?lang=en">Ver páginas</a></li>
<li><a href="site-pages-add.html?lang=en">Añadir página</a></li>
</ul>
<!-- Fin Menú desplegable -->
</li>
<li class="divider-vertical"></li>
<li class="dropdown dropdown-hover">
<a href="products.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">eCommerce <b class="caret"></b></a>
<!-- Menú desplegable -->
<ul class="dropdown-menu">
<li class="nav-header">Catálogo</li>
<li><a href="categories.html?lang=en">Categorías</a></li>
<li><a href="products.html?lang=en">Productos</a></li>
<li><a href="products-add.html?lang=en">Añadir producto</a></li>
<li class="divider"></li>
<li><a href="orders.html?lang=en">Pedidos</a></li>
</ul>
<!-- Fin Menú desplegable -->
</li>
<li class="divider-vertical"></li>
<li class="dropdown dropdown-hover">
<a href="clients.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Miembros <b class="caret"></b></a>
<!-- Menú desplegable -->
<ul class="dropdown-menu">
<li><a href="clients.html?lang=en">Clientes</a></li>
<li><a href="account.html?lang=en">Editar cuenta</a></li>
</ul>
<!-- Fin Menú desplegable -->
</li>
<li class="divider-vertical"></li>
<li class="dropdown dropdown-hover">
<a href="charts.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Otros <b class="caret"></b></a>
<!-- Menú desplegable -->
<ul class="dropdown-menu">
<li><a href="charts.html?lang=en">Gráficos</a></li>
</ul>
<!-- Fin Menú desplegable -->
</li>
<li class="divider-vertical"></li>
<li class="dropdown dropdown-hover">
<a href="documentation.html?lang=en" class="dropdown-toggle" data-toggle="dropdown">Documentación <b class="caret"></b></a>
<!-- Menú desplegable -->
<ul class="dropdown-menu">
<li><a href="documentation.html?lang=en">Resumen</a></li>
<li><a href="documentation/features.html?lang=en">Características</a></li>
<li><a href="documentation/getting-started.html?lang=en">Primeros pasos</a></li>
<li><a href="documentation/customization-guide.html?lang=en">Guía de personalización</a></li>
<li class="divider"></li>
<li class="nav-header">Desarrollado con</li>
<li><a href="documentation/credits.html?lang=en">Créditos</a></li>
</ul>
<!-- Fin Menú desplegable -->
</li>
<li class="divider-vertical"></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Fin Menú Principal -->
Hasta ahora he podido usar una función Walker personalizada para wp_nav_menu y he logrado generar casi todo el HTML como arriba, pero no puedo insertar class="dropdown-toggle" data-toggle="dropdown" dentro de la etiqueta <a>. Esto me permitiría activar el menú desplegable (actualmente solo puedo generar el menú principal. Los submenús aparecen en HTML pero no son visibles en el navegador).
Aquí está mi código actual:
<!-- Menú Principal -->
<div class="navbar navbar-blue navbar-fixed-top" style="margin-top:74px">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<?php 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";
}
}
$defaults = array(
'theme_location' => '',
'menu' => '',
'container' => 'div',
'container_class' => 'nav-collapse collapse',
'container_id' => '',
'menu_class' => 'nav',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s"><li class="divider-vertical"></li>%3$s</ul>',
'depth' => 0,
'walker' => new My_Walker_Nav_Menu
);
wp_nav_menu( $defaults );
?>
</div>
</div>
</div>
<!-- Fin Menú Principal -->
¿Alguien puede ayudarme a modificar mi función Walker personalizada para obtener el resultado HTML deseado mostrado arriba? Gracias de antemano.
Quieres modificar el método start_el
como hiciste con el start_lvl
. En su forma más básica significaría alterar esta línea:
$item_output .= '<a'. $attributes .'>';
Para que se vea así:
$item_output .= '<a class="dropdown-toggle" data-toggle="dropdown"'. $attributes .'>';
Parece que necesitarás una lógica más complicada para evitar insertar esa cadena en todos los submenús, pero esa es la idea.

Gracias por la respuesta. Acabo de probar este código: [link]https://gist.github.com/1817371 y funciona bien. Tuve que ajustarlo ligeramente para que mis submenús aparecieran.
