Agregando código HTML personalizado a la función wp_nav_menu

Question

Agregando código HTML personalizado a la función wp_nav_menu

14 jul 2013, 21:20:48

Vistas: 22.2K

Votos: 5

Me gustaría implementar código HTML personalizado en la función wp_nav_menu de WordPress para poder agregar un modal de bootstrap a un enlace del menú de navegación, pero no estoy seguro de cómo hacerlo. La publicación https://stackoverflow.com/questions/12250866/how-to-add-custom-html-to-wp-nav-menu explica en parte cómo hacerlo extendiendo la clase walker.

Mi objetivo es crear el siguiente marcado usando la ayuda de la clase walker para crear el código HTML personalizado al final.

<div class="menu-primary-navigation-container">
    <ul id="navigation" class="clearfix">
        <li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-273 current_page_item menu-item-275">
            <a href="http://sandpit.jonathanbeech.co.uk/">Inicio</a>
        </li>
        <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">
            <a href="http://sandpit.jonathanbeech.co.uk/about/">Acerca de</a>
        </li>
        <li id="menu-item-191" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-191">
            <a href="http://sandpit.jonathanbeech.co.uk/portfolio-two/">Portafolio</a>
        </li>
        <li id="menu-item-269" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-269">
            <a href="http://sandpit.jonathanbeech.co.uk/articles/">Artículos</a>
        </li>
        <li>
            <a href="#myModal" role="button" data-toggle="modal">Contacto</a>
        </li>
    </ul>
</div>

Tengo dificultades para descifrar cómo modificar el código start_el y end_el para lograr el código en el último elemento de la lista ya que mis habilidades en PHP no son buenas.

¿Alguna sugerencia?

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        // Copiar todo el código start_el de la fuente y modificarlo
    }

    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        // Copiar todo el código end_el de la fuente y modificarlo
    }
}

Jonathan Beech

457

menús twitter bootstrap

Todas las respuestas a la pregunta

s_ha_dum 65.5K · Accepted Answer · 2013-07-14T21:32:18Z

Para agregar ese último elemento de la lista, no necesitas un Walker personalizado. Existe un hook que te permitirá añadirlo.

function add_last_nav_item($items) {
  return $items .= '<li><a href="#myModal" role="button" data-toggle="modal">Contacto</a></li>';
}
add_filter('wp_nav_menu_items','add_last_nav_item');

De todas formas, no serían start_el y end_el lo que necesitarías editar. Esos generan los elementos individuales de la lista. No es el lugar para añadir otro elemento. Creo que probablemente tendrías que subir a la clase padre Walker de Walker_Nav_Menu para llegar a un lugar donde puedas añadir nuevos elementos, pero no vale la pena el esfuerzo solo para añadir items.

s_ha_dum

65.5K

14 jul 2013 21:32:18