Come creare questo custom menu walker?
Vorrei configurare un custom menu walker per rimuovere la lista non ordinata e racchiudere ogni singolo link in un elemento div
personalizzato. L'output desiderato dovrebbe apparire così:
<div class="col-md-3"><a href="linkurl">Titolo Link</a></div>
Questo è quello che ho provato finora:
<? wp_nav_menu( array( 'menu' => 'Main', 'container' => '', 'items_wrap' => '%3$s', 'link_before' => '<div class="col-md-3">', 'link_after' => '</div>' ) ); ?>
Tuttavia il codice sopra sta producendo questo output:
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47">
<a href="linkurl"><div class="col-md-3">Titolo Link</div></a>
</li>
Ecco il mio tentativo aggiornato basato sulla risorsa condivisa da @shahar:
<?php wp_nav_menu( array('menu' => 'Main', 'walker' => new Footer_Walker()) ); ?>
E nel mio 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 il codice sopra il menu non viene visualizzato affatto.
Aggiornamento: Ecco il codice finale che ho finito per utilizzare nel mio file functions:
class Footer_Walker extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
$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 );
}
}
Ed ecco il codice per generare il menu nel tuo template:
<?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 )); ?>
È necessario configurare il proprio walker per il menu (link alla documentazione di WordPress), e all'interno aggiungere gli override personalizzati per start_el
e end_el
. Ad esempio, le tue funzioni start_el
e end_el
potrebbero apparire così:
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";
}
Anche questo tutorial potrebbe essere utile: https://code.tutsplus.com/tutorials/understanding-the-walker-class--wp-25401

Grazie, ho provato a utilizzare il codice che hai condiviso all'interno della mia classe walker ma ora il menu non viene visualizzato affatto. Hai qualche idea? (ho aggiornato la mia domanda con il codice del mio tentativo più recente)

No, ma se cambio <div>
e </div>
in <li>
e </li>
nel walker allora ottengo 4 elementi di lista
vuoti dove dovrebbe esserci il menu (ci sono 4 link in questo menu). Quindi sembra che il walker potrebbe funzionare correttamente, ma per qualche motivo i link del menu e i titoli dei link non vengono visualizzati.

Dai un'occhiata al codice sorgente del Nav Manu walker - start_el
(riga 87) ha varie opzioni che potresti voler utilizzare. https://developer.wordpress.org/reference/classes/walker_nav_menu/

Sono riuscito a farlo funzionare utilizzando questa risposta. Grazie per avermi indicato la direzione giusta!
