Adaugă container la submeniul nav_menu din WordPress

Question

Adaugă container la submeniul nav_menu din WordPress

3 ian. 2013, 17:44:22

Vizualizări: 28.9K

Voturi: 10

Există vreo modalitate prin care pot adăuga un div în jurul ul.sub-menu din wp_nav_menu?

De exemplu, markup-ul ar trebui să se transforme din:

<ul class="menu">

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

        <ul class="sub-menu">

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

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

</ul>

în acesta:

<ul class="menu">

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

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

            <ul class="sub-menu">

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

            </ul>

        </div>

   </li>

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

</ul>

Unde "sub-menu-wrap" este div-ul personalizat.

Este posibil acest lucru?

Dean Elliott

1.2K

funcții meniuri

Toate răspunsurile la întrebare

Comentarii

Este posibil să faci modificări pentru fiecare element de meniu în parte? De exemplu, clasa elementului de meniu este disponibilă în interiorul Walker_Nav_Menu și a copiilor acestuia?

Dan.

8 mai 2017 19:08:10

@Dan. Da, este posibil.

fuxia

8 mai 2017 19:08:40

@fuxia, această abordare este încă valabilă pentru WP 5+, sau recomanzi o tehnică alternativă pentru a realiza același lucru?

klewis

9 ian. 2019 16:29:26

@klewis Acest lucru ar trebui să funcționeze în continuare.

fuxia

9 ian. 2019 16:30:15

Cum să faci asta doar la primul nivel.

jho1086

31 oct. 2019 10:04:24

Arată celelalte 1 comentarii

Soluția propusă nu funcționează corect cu WordPress - codul implicit al WordPress și filtrele sunt ignorate. Vă prezint aici o soluție mult mai elegantă, care păstrează toate filtrele precum 'nav_menu_submenu_css_class' și alte funcționalități implicite ale WordPress:

<?php
/**
 * Învelește sub-menurile într-un element div
 */
class My_Menu_Walker extends Walker_Nav_Menu {

    public function start_lvl( &$output, $depth = 0, $args = null ) {
        $output .=
        '<div class="wrapper">';
        parent::start_lvl($output, $depth, $args);
    }

    public function end_lvl( &$output, $depth = 0, $args = null ) {
        parent::end_lvl($output, $depth, $args);
        $output .= '</div>';
    }

}

Lovor

996

11 ian. 2022 00:20:38

fuxia 107K · Accepted Answer · 2013-01-03T17:57:59Z

Folosește un Walker personalizat, extinde metodele start_lvl() și end_lvl.

Cod exemplu, netestat:

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";
    }
}

Utilizare în tema ta:

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

fuxia

107K

3 ian. 2013 17:57:59