¿Cómo crear este walker de menú personalizado?

5 dic 2016, 22:38:33
Vistas: 23.1K
Votos: 6

Me gustaría configurar un walker de menú personalizado para eliminar la lista desordenada y envolver cada enlace individual en un elemento div personalizado. La salida deseada se vería así:

<div class="col-md-3"><a href="linkurl">Título del Enlace</a></div>

Esto es lo que he intentado hasta ahora:

<? wp_nav_menu( array( 'menu' => 'Main', 'container' => '', 'items_wrap' => '%3$s', 'link_before' => '<div class="col-md-3">', 'link_after' => '</div>' ) ); ?>

Sin embargo, el código anterior está produciendo esta salida:

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47">
    <a href="linkurl"><div class="col-md-3">Título del Enlace</div></a>
</li>

Aquí está mi intento actualizado basado en el recurso compartido por @shahar:

<?php wp_nav_menu( array('menu' => 'Main', 'walker' => new Footer_Walker()) ); ?>

Y en mi functions.php:

class Footer_Walker extends Walker_Nav_Menu {
  function start_el(&$output, $item, $depth=0, $args=array()) {
    $output .= "<div>".esc_attr($item->label);
  }

  function end_el(&$output, $item, $depth=0, $args=array()) {
    $output .= "</div>\n";
  }
}

Usando el código anterior el menú no se muestra en absoluto.


Actualización: Aquí está el código final que terminé usando en mi archivo de funciones:

class Footer_Walker extends Walker_Nav_Menu {
  function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    // Obtener las clases del elemento del menú
    $classes = empty($item->classes) ? array () : (array) $item->classes;
    $class_names = join(' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
    !empty ( $class_names ) and $class_names = ' class="'. esc_attr( $class_names ) . '"';
    $output .= "<div class='col-sm-6 col-md-3'>";
    $attributes  = '';
    !empty( $item->attr_title ) and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
    !empty( $item->target ) and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
    !empty( $item->xfn ) and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
    !empty( $item->url ) and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';
    $title = apply_filters( 'the_title', $item->title, $item->ID );
    $item_output = $args->before
    . "<a $attributes>"
    . $args->link_before
    . $title
    . '</a></div>'
    . $args->link_after
    . $args->after;
    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }
}

Y aquí está el código para generar el menú en tu plantilla:

<?php wp_nav_menu(array('menu' => 'Footer', 'items_wrap'=> '%3$s', 'walker' => new Footer_Walker(), 'container'=>false, 'menu_class' => '', 'theme_location'=>'footer', 'fallback_cb'=>false )); ?>
2
Comentarios

oye, ¿te importaría publicar tu respuesta (o simplemente enviarme un mensaje privado)? ¡Estoy intentando hacer lo mismo!

abalter abalter
1 nov 2017 22:00:04

@abalter He añadido mi código final a la pregunta. ¡Espero que te ayude!

APAD1 APAD1
1 nov 2017 22:04:58
Todas las respuestas a la pregunta 1
5

Necesitas configurar tu propio walker de menú (enlace al Codex de WordPress), y allí añadir personalizaciones para start_el y end_el. Por ejemplo, tus funciones start_el y end_el podrían verse así:

function start_el(&$output, $item, $depth=0, $args=array()) {
    $output .= "<div>" . esc_attr($item->label);
}

function end_el(&$output, $item, $depth=0, $args=array()) {
    $output .= "</div>\n";
}

Este tutorial también podría ser útil: https://code.tutsplus.com/tutorials/understanding-the-walker-class--wp-25401

5 dic 2016 23:07:55
Comentarios

Gracias, intenté usar el código que compartiste dentro de mi clase walker pero ahora el menú no aparece en absoluto. ¿Alguna idea? (actualicé mi pregunta con el código de mi intento más reciente)

APAD1 APAD1
5 dic 2016 23:49:57

¿Estás recibiendo algún mensaje en tus registros de errores?

Steven Steven
5 dic 2016 23:55:03

No, pero si cambio <div> y </div> por <li> y </li> en el walker, obtengo 4 elementos de lista vacíos donde debería estar el menú (hay 4 enlaces en este menú). Así que parece que el walker podría estar funcionando correctamente, pero por alguna razón los enlaces del menú y los títulos de los enlaces no están pasando.

APAD1 APAD1
5 dic 2016 23:58:39

Echa un vistazo al código fuente del Nav Menu walker - start_el (línea 87) tiene varias opciones que quizás quieras usar. https://developer.wordpress.org/reference/classes/walker_nav_menu/

Steven Steven
6 dic 2016 00:04:17

¡Pude hacerlo funcionar usando esta respuesta. ¡Gracias por guiarme en la dirección correcta!

APAD1 APAD1
6 dic 2016 00:08:33