WordPress : Utiliser un filtre sur les éléments de menu qui ont des enfants

Publié par Jean-Michel le

J’ai une liste déroulante imbriquée. Sur les éléments qui ont des enfants, je voudrais ajouter un chevron à côté du texte du lien. Le HTML actuel ressemble à ceci :

<ul class="primary-menu">
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-
    children menu-item-59">
        <a href="#">Europe</a>
        <ul class="sub-menu"></ul>
    </li>
</ul>

Je voudrais utiliser un crochet add_filter pour transformer ce balisage en ceci :

<ul class="primary-menu">
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-
    children menu-item-59">
        <div>
          <a href="#">Europe</a>
          <img src="chevron.svg">
        </div>
        <ul class="sub-menu"></ul>
    </li>
</ul>

J’espérais trouver un filtre qui me renverrait un tableau d’éléments de menu. Si l’élément de menu a la classe ‘menu-item-has-children’, j’aimerais modifier le code HTML de l’élément.

Solution n°1 trouvée

Il y a bien un filtre, walker_nav_menu_start_elva pouvoir s’en occuper pour vous !

Prenez ce code par exemple :

function wpse356896_filter_primary_nav_menu_dropdown( $item_output, $item, $depth, $args ) {

    // Only for our primary menu location.
    if ( empty( $args->theme_location ) || 'primary-menu' !== $args->theme_location ) {
        return $item_output;
    }

    // Add the dropdown for items that have children.
    if ( ! empty( $item->classes ) && in_array( 'menu-item-has-children', $item->classes ) ) {
        return $item_output . '<span class="dropdown"><img src="chevron.svg"></span>';
    }

    return $item_output;
}

add_filter( 'walker_nav_menu_start_el', 'wpse356896_filter_primary_nav_menu_dropdown', 10, 4 );

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *