¿Cómo crear este walker de menú personalizado?
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 )); ?>
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

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)

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.

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/

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