web-dev-qa-db-fra.com

Comment puis-je ajouter des divs ou changer li dans le sous-menu du menu_nav

Je veux ajouter des divs et des classes aux éléments child [li] qui viennent après [ul class = "sub-menu"] du parent [li]. Le problème est que, lorsque j'essaie de modifier le [li] dans la fonction start_el, tous les [li] sont modifiés, même ceux qui se trouvent en dehors du [ul class = "sous-menu"], ceux du parent sont également modifiés. . S'il vous plaît, aidez-moi à séparer le [li], afin que je ne puisse modifier que ceux qui se trouvent à l'intérieur de [ul class = "sous-menu"] sans Javascript.

public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
            $t = '';
            $n = '';
        } else {
            $t = "\t";
            $n = "\n";
        }
        $indent = ( $depth ) ? str_repeat( $t, $depth ) : '';

        $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, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $class_names .'>';

        $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 = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }
        $title = apply_filters( 'the_title', $item->title, $item->ID );

        $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
menuswalker
1
Alvin Ofori-Adjei

Vous n'avez pas besoin de créer un nouveau marcheur, vous pouvez le faire avec juste un filtre et des conditions basées sur les paramètres de la fonction.

Le filtre dont nous avons besoin est walker_nav_menu_start_el, que vous pouvez voir au bas de votre exemple de code.

Et pour être sûr de ne cibler que les pages enfants, nous pouvons utiliser le paramètre $depth à partir de cette fonction, voir l'exemple ci-dessous.

function ngstyle_child_menu_items($item_output, $item, $depth, $args)
{
    // Check we are on the right menu & right depth
    if ($args->theme_location != 'primary' || $depth !== 1) {
        return $item_output;
    }

    $new_output = $item_output;
    $new_output .= '<div class="super-mega-awesome"></div>'; // Add custom elems

    return $new_output;
}
add_filter('walker_nav_menu_start_el', 'ngstyle_child_menu_items', 10, 4);
2
ngearing

Si vous souhaitez insérer en ordre ces <div>s en fonction d'une condition ou d'un déclencheur, vous aurez besoin de javascript (ou jQuery ou php). Il n'y a pas moyen d'échapper aux langages de script.

Les <li>´s sortant de cette fonction sont définis dans cette variable:

$output .= $indent . '<li' . $id . $class_names .'>';

Donc, si vous ajoutez un <div> à l'intérieur, vous pouvez essayer ceci:

$output .= $indent . '<li' . $id . $class_names .'>' . '<div class="class-1 class-2">';

Cependant, si ces <div>´s doivent être présents à tout moment, vous pouvez simplement le coder en dur dans le fichier php dont il provient.

Quand il s’agit d’appliquer des changements de style uniquement aux <li>´s spécifiques, si vous le faites via CSS, c’est assez simple et il vous suffit de préciser le <li> que vous souhaitez cibler.

Ainsi:

ul.sub-menu li.the-li-class {
   property: value;
}

Si vous le faites en utilisant jQuery, par exemple, ce sera quelque chose comme ça:

$('.sub-menu').find('.li-class');
   $(this).css({'property-1' : 'value', 'property-2' : 'value' });

Il y a d'autres approches quand il s'agit de jQuery. Il s’agit de savoir comment parcourir l’arborescence du DOM et vous voudrez peut-être approfondir ce sujet si vous n’êtes pas familier.

0
Diogo