将容器添加到nav_menu子菜单


9

有什么办法可以将div包裹在wp_nav_menu的ul.sub-menu周围

因此,例如标记将从

<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>

对此

<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>

其中“ sub-menu-wrap”是自定义div。

这可能吗?

Answers:


21

使用自定义的Walker,扩展方法start_lvl()end_lvl

示例代码,未经测试:

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

在主题中的用法:

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

是否可以根据每个菜单进行更改?例如,菜单项类在内部可用Walker_Nav_Menu吗?
丹。

@担。是的。
fuxia

@fuxia,这种方法对WP 5+是否仍然有效,还是您建议使用另一种方法来完成相同的工作?
klewis

@klewis这应该仍然有效。
fuxia

仅在第一级如何执行此操作。
jho1086
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.