Cum să creezi acest meniu personalizat walker?
Aș dori să configurez un meniu walker personalizat pentru a elimina lista neordonată și pentru a împacheta fiecare link individual într-un element div personalizat. Rezultatul dorit ar arăta astfel:
<div class="col-md-3"><a href="linkurl">Link Title</a></div>
Iată ce am încercat până acum:
<? wp_nav_menu( array( 'menu' => 'Main', 'container' => '', 'items_wrap' => '%3$s', 'link_before' => '<div class="col-md-3">', 'link_after' => '</div>' ) ); ?>
Cu toate acestea, codul de mai sus produce următorul rezultat:
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47">
<a href="linkurl"><div class="col-md-3">Link Title</div></a>
</li>
Iată încercarea mea actualizată bazată pe resursa împărtășită de @shahar:
<?php wp_nav_menu( array('menu' => 'Main', 'walker' => new Footer_Walker()) ); ?>
Și în fișierul meu 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";
}
}
Folosind codul de mai sus, meniul nu se afișează deloc.
Actualizare: Iată codul final pe care l-am folosit în fișierul 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 );
}
}
Și iată codul pentru generarea meniului în șablonul tău:
<?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 )); ?>
Trebuie să îți configurezi propriul walker pentru meniu (link către Wordpress Codex), iar acolo să adaugi suprascrieri personalizate pentru start_el și end_el. De exemplu, funcțiile tale start_el și end_el ar putea arăta astfel:
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";
}
Acest tutorial ar putea fi util și el: https://code.tutsplus.com/tutorials/understanding-the-walker-class--wp-25401
Mulțumesc, am încercat să folosesc codul pe care l-ai împărtășit în clasa mea walker, dar acum meniul nu apare deloc. Ai idei despre asta? (am actualizat întrebarea mea cu codul din cea mai recentă încercare)
APAD1
Nu, dar dacă schimb <div> și </div> cu <li> și </li> în walker, atunci primesc 4 elemente de listă goale unde ar trebui să fie meniul (sunt 4 link-uri în acest meniu). Se pare că walker-ul poate funcționa corect, dar din anumite motive link-urile și titlurile din meniu nu sunt afișate.
APAD1
Aruncă o privire la codul sursă al Nav Manu walker - start_el (linia 87) are diverse opțiuni pe care poate dorești să le folosești. https://developer.wordpress.org/reference/classes/walker_nav_menu/
Steven
Am reușit să o fac să funcționeze folosind acest răspuns. Mulțumesc că m-ai îndrumat în direcția corectă!
APAD1