Come creare questo custom menu walker?

5 dic 2016, 22:38:33
Visualizzazioni: 23.1K
Voti: 6

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 )); ?>
2
Commenti

ehi, ti dispiacerebbe postare la tua risposta (o semplicemente inviarmela in privato). Sto cercando di fare la stessa cosa!

abalter abalter
1 nov 2017 22:00:04

@abalter Ho aggiunto il mio codice finale alla domanda. Spero ti sia utile!

APAD1 APAD1
1 nov 2017 22:04:58
Tutte le risposte alla domanda 1
5

È 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

5 dic 2016 23:07:55
Commenti

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)

APAD1 APAD1
5 dic 2016 23:49:57

stai ricevendo messaggi nei log degli errori?

Steven Steven
5 dic 2016 23:55:03

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.

APAD1 APAD1
5 dic 2016 23:58:39

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/

Steven Steven
6 dic 2016 00:04:17

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

APAD1 APAD1
6 dic 2016 00:08:33