web-dev-qa-db-fra.com

Walker personnalisé pour Walker_Nav_Menu

J'essaie d'ajouter une structure de menu personnalisée pour mon thème WordPress. Voici ce que je veux qu'il ressemble:

<li>
    <a href="link_to_parent_item" class="main-category" tabindex="3">Parent Name</a>
    <div class="sub-menu">
        <div class="sub-links pull-left">
            <a href="link_to_child_item">Child Name1</a>
            <a href="link_to_child_item">Child Name2</a>
        </div>
    </div>
</li>

J'ai écrit un programme personnalisé pour faire cela, mais cela ne me donne pas ce que je veux vraiment. Voici mon cours de marcheur:

class loggmax_class_walker extends Walker_Nav_Menu{

// Start level, beginning tags
function start_lvl(&$output, $depth) {
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $output .= "\n$indent";
    $output .= '<div class="sub-menu">';
    $output .= '<div class="sub-links pull-left">';
}

function end_lvl(&$output, $depth) {
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $output .= "$indent</div>";
    $output .= '</div>';
}

// Start element (beginning list items)
function start_el( &$output, $item, $depth=0, $args=array(),$current_object_id=0 ) {
    $this->curItem = $item;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $class_names = $value = '';
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = 'menu-item-' . $item->ID;
    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

    $atts = array();
    $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
    $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
    $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
    $atts['href']   = ! empty( $item->url )        ? $item->url        : '';
    $atts['slug']   = ! empty( $item->slug )        ? $item->slug      : '';
    $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
    $attributes = '';
    $item_output = '';
    foreach ( $atts as $attr => $value ) {
        if ( ! empty( $value ) ) {
            $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
            $attributes .= ' ' . $attr . '="' . $value . '"';
        }
    }

    // Check if it is a submenu
    if ( $depth == 1 ) {
        $output .= '<a'. $attributes. ' >';
        $output .= apply_filters( 'the_title', $item->title, $item->ID );
        $output .= '</a>';

    } elseif ( $depth == 0 ) {
        $item_output .= '<li>';
        $item_output .= '<a'. $attributes. ' class="main-category">';
        $item_output .= apply_filters( 'the_title', $item->title, $item->ID );
        $item_output .= '</a>';
    }

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

et ce code est dans mon header.php

if ( has_nav_menu( 'primary-menu' ) )
        wp_nav_menu( array(
            'theme_location'    => 'primary-menu',
            'container'         => 'ul',
            'menu_class'        => 'pull-left',
            'items_wrap'        => '<ul id="%1$s" class="%2$s">%3$s</ul>',
            'walker'            => new loggmax_class_walker()
        ) );

et voici ce qui est affiché:

<li>
   <a href="link_here" class="main-category">Parent Title</a>
    <div class="sub-menu">
       <div class="sub-links pull-left">
         <a href="link_here">Child Title</a></li>
         <a href="link_here">Child Title 2</a></li>
    </div>
</li>

Comment supprimer l'étiquette de liste finale </li> en cours d'impression dans les éléments de sous-menu?

menussub-menu
1
Samuel Asor

Il semble que le

<li></li>

dans la fonction end_lvl et également dans $ item_output. Bien que je n’ai aucune expérience de l’écriture du code du promeneur, j’avais déjà utilisé un marcheur Bootstrap, de sorte qu’ils pourraient ne pas vous être utiles. Peut-être que jeter un coup d’œil sur les liens suivants pourrait vous aider?

1
EBennett

Ancienne question, mais vous pouvez remplacer le </li> dans la fonction end_el() du Walker (voir wp-includes/class-walker-nav-menu.php); dans votre cas, quelque chose comme:

public function end_el( &$output, $item, $depth = 0, $args = array() ) {
    if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
        $n = '';
    } else {
        $n = "\n";
    }
    if ( $depth == 0 ) {
        $output .= "</li>{$n}";
    } else {
        $output .= "{$n}";
    }
}
0
Valentin Born