WordPress : Ajouter des div supplémentaires aux éléments de navigation WordPress

Publié par Jean-Michel le

Quel est le moyen le plus simple de modifier la sortie générée par mon wp-menu à partir de

<ul class="primary-menu">
<li class="menu-item">
    <a href="">nav link</a>
    <ul class="sub-menu"></ul>
</li>
</ul>

à

<ul class="primary-menu">
<li class="menu-item">
    <div class="alignme">
        <button></button><a href=""></a><button></button>
    </div>
    <ul class="sub-menu"></ul>
</li>
</ul>

?

J’ai besoin de ce type de « helper div » car je dois aligner les trois éléments d’une certaine manière et indépendamment d’un éventuel contenu supplémentaire (par exemple, un sous-menu) à l’intérieur du li.

Lire également:  Wordpress : WP : est-il possible de modifier les fonctions is_front_page() et is_home()

J’utilise wp_nav_menu() par défaut et en tant que créateur de thème pour la première fois, je ne sais pas où trouver la « configuration » du menu. Une idée où je devrais regarder de plus près ?

Solution n°1 trouvée

ajouter la classe walker dans wp_nav_menu « new Add_Div_Walker ». vérifiez mon code ci-dessous.

$menu = array(
    'theme_location'  => 'primary',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'walker'          => new Add_Div_Walker
);
wp_nav_menu( $menu );

// add this below code in your functions.php file.
class Add_Div_Walker extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("t", $depth);
        $output .= "n$indent<div class='alignme'>
            <button></button><a href=''></a><button></button>
        </div><ul class='submenu'>n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("t", $depth);
        $output .= "$indent</ul>n";
    }
}
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 *