Adicionar contêiner ao submenu nav_menu


9

Existe uma maneira de envolver uma div em torno do ul.sub-menu do wp_nav_menu

Por exemplo, a marcação passaria de

<ul class="menu">

    <li><a href="/">Item 1</a></li>
    <li>
        <a href="/">Item 2</a>

        <ul class="sub-menu">

            <li><a href="/">Item 1</a></li>
            <li><a href="/">Item 1</a></li>

        </ul>
   </li>
    <li><a href="/">Item 1</a></li>
    <li><a href="/">Item 1</a></li>

</ul>

para isso

<ul class="menu">

    <li><a href="/">Item 1</a></li>
    <li>
        <a href="/">Item 2</a>

        <div class="sub-menu-wrap">

            <ul class="sub-menu">

                <li><a href="/">Item 1</a></li>
                <li><a href="/">Item 1</a></li>

            </ul>

        </div>

   </li>

    <li><a href="/">Item 1</a></li>
    <li><a href="/">Item 1</a></li>

</ul>

Onde "sub-menu-wrap" é a div personalizada.

Isso é possível?

Respostas:


21

Use um andador personalizado , estenda os métodos start_lvl()e end_lvl.

Código de amostra, não testado:

class WPSE_78121_Sublevel_Walker extends Walker_Nav_Menu
{
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class='sub-menu-wrap'><ul class='sub-menu'>\n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";
    }
}

Uso no seu tema:

wp_nav_menu(
    array (
        'theme_location' => 'your-theme-location-EDIT-THIS',
        'walker'         => new WPSE_78121_Sublevel_Walker
    )
);

É possível fazer alterações por item de menu? por exemplo, a classe do item de menu está disponível no interior Walker_Nav_Menue são crianças?
Dan.

@Dan. Sim, ele é.
fuxia

@uxuxia, essa abordagem ainda é saudável para o WP 5+, ou você recomenda uma técnica alternativa para realizar a mesma coisa?
klewis

@klewis Isso ainda deve funcionar.
fuxia

Como fazer isso apenas no primeiro nível.
Jho1086 31/01/19
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.