web-dev-qa-db-fra.com

Comment afficher 2 colonnes égales de li en fonction du nombre d'éléments dans wp_nav_menu divisé par 2?

Je voudrais afficher un menu personnalisé 3.0 dans ma barre latérale. Je veux que la liste soit dans l'ordre du nom, et que la liste soit séquentielle dans la liste de la colonne de gauche, puis dans la colonne de droite.

enter image description here

J'utilise actuellement css et fais flotter les liens, mais le problème est que la liste va et vient de la colonne de gauche à droite, plutôt que de descendre la liste séquentiellement.

J'utilise

<?php wp_nav_menu('menu=Canon-camcorders'); ?> in my sidebar.php

Ensuite, #sidebar ul # menu-caméscopes Canon li.menu-item {width: 89px; float: gauche; margin-right: 18px;}

Ce que j'aimerais faire, c'est compter le nombre d'éléments de la liste, puis la diviser en deux et créer deux ul à partir de cela. Mes capacités php sont en quelque sorte rapiécées sans aucune formation formelle, alors je suis un peu perdu. Je connais certaines questions, mais je ne sais pas comment procéder.

J'ai lu ce post: Comment compter les éléments du menu de navigation? Mais je ne pouvais pas le comprendre pour mes besoins.

Toute aide est grandement appréciée.

Merci larry

countmenus
4
Larry4Design

Vous aurez besoin d'enregistrer votre propre lecteur personnalisé, mais c'est assez simple, vous n'avez besoin que d'une seule fonction (start_el) dans le lecteur personnalisé.

Nous devrons ajouter le code à partir du fil que vous avez référencé pour déterminer le nombre d'éléments, puis déterminer la moitié, terminer la liste en cours lorsque cette valeur est remplie et en commencer un autre.

Je ne suis pas toujours doué pour expliquer ces choses, alors jetez d'abord un coup d'œil à ce marcheur que j'ai écrit pour vous. Il est basé sur le menu de navigation par défaut, donc rien de spécial, à part quelques lignes ici et là qui déterminent quand créer une nouvelle liste.

class example_nav_walker extends Walker_Nav_Menu {

    var $current_menu = null;
    var $break_point  = null;

    function start_el(&$output, $item, $depth, $args) {

        global $wp_query;

        if( !isset( $this->current_menu ) )
            $this->current_menu = wp_get_nav_menu_object( $args->menu );

        if( !isset( $this->break_point ) )
            $this->break_point = ceil( $this->current_menu->count / 2 ) + 1;    

        $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="' . esc_attr( $class_names ) . '"';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

        if( $this->break_point == $item->menu_order )
            $output .= $indent . '</li></ul><ul><li' . $id . $value . $class_names .'>';
        else
            $output .= $indent . '<li' . $id . $value . $class_names .'>';

        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

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

Je crée deux variables à l'intérieur de la classe, le premier $current_menu va contenir l'objet de menu, et nous ne voulons pas aller chercher à chaque itération d'un élément de menu, je lui attribue donc une valeur nulle par défaut et récupère l'objet de menu. lorsque cette variable n'est pas définie, cela garantit que l'appel n'est effectué qu'une seule fois. La deuxième variable $break_point tiendra le point de rupture, c'est-à-dire. la valeur que nous allons utiliser pour déterminer quand mettre fin à la liste actuelle et en créer une autre, encore une fois, nous ne souhaitons pas résoudre ce problème à chaque itération, elle est donc définie uniquement sur la première itération.

Le point de rupture sera toujours plus un car nous n’utilisons pas de compteur traditionnel qui incrémenterait généralement à la fin d’une itération (la valeur est donc supérieure à ce que vous pouvez attendre) et l’appel à ceil traite les cas où le menu a une quantité étrange d'éléments, c'est à dire. si vous aviez 9 éléments, une nouvelle liste serait créée après le 5.

Fondamentalement, les seules parties personnalisées de ce marcheur sont ..

    var $current_menu = null;
    var $break_point  = null;

..et ça..

if( !isset( $this->current_menu ) )
    $this->current_menu = wp_get_nav_menu_object( $args->menu );

if( !isset( $this->break_point ) )
    $this->break_point = ceil( $this->current_menu->count / 2 ) + 1;

..et enfin ceci ..

if( $this->break_point == $item->menu_order )
    $output .= $indent . '</li></ul><ul><li' . $id . $value . $class_names .'>';
else
    $output .= $indent . '<li' . $id . $value . $class_names .'>';

Je les fais remarquer, alors je peux faire attention aux parties importantes sans se demander si quelque chose est pertinent.

Enfin, vous devez également définir votre appel wp_nav_menu pour utiliser un programme de défilement personnalisé, ce qui signifie également que vous devrez passer les arguments sous forme de tableau. En voici un exemple.

<?php wp_nav_menu( array(
    'menu' => 'your-menu',
    'walker' => new example_nav_walker
) ); ?>

Vous pouvez utiliser ce programme avec n’importe quel menu. Assurez-vous que vous le faites comme indiqué ci-dessus (réglage du paramètre Walker et menu).

Le gros morceau de code (le marcheur) peut aller dans le fichier de fonction de votre thème, si c'est plus facile pour vous, c'est aussi où je l'ai testé.

J'espère que cela vous aidera, et si vous avez des questions, veuillez le savoir.

11
t31os