如何在 wordpress ul 容器周围添加 div答案

【问题标题】：How can I add a div around wordpress ul container如何在 wordpress ul 容器周围添加 div
【发布时间】：2012-05-06 12:33:12
【问题描述】：

Wordpress 在这个 ul 标记内输出我的子菜单...

<ul class="sub-menu">

如何在它周围包裹一个简单的 div？

最好是通过functions.php来实现，不过jquery也可以。

【问题讨论】：

标签： wordpress function menu html-lists

【解决方案1】：

虽然使用 jQuery 之类的东西来包装您的子菜单很容易，但为此目的使用 jQuery 并不是一个好习惯。把它放在functions.php中：

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

我假设你的菜单是在你的标题中生成的，所以转到 header.php（或任何使用 wp_nav_menu 函数的文件）并查找以“wp_nav_menu”开头的任何内容。

由于我没有任何代码可看，我只能猜测它使用的参数（如果有的话）。如果它看起来完全像“wp_nav_menu()”，括号之间没有任何内容，则将其更改为以下内容：

wp_nav_menu(array('walker' => new Child_Wrap()))

否则，请使用您的菜单使用的代码编辑您的问题，以便我进一步帮助您。

【讨论】：

完美运行（Wordpress 4.4）
为什么这在 v4.4.2 中不起作用？在我的主题中仍然没有ul.sub-menu 的容器我得到了:(

【解决方案2】：

在function.php

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

调用 wp_nav_menu 所在的函数。（例如：header.php）

$defaults = array( 'container' => 'ul', 'menu_class' => 'scroll', 'menu_id' => 'main-menu-nav' , 'walker' => new Child_Wrap() );

 wp_nav_menu( $defaults );

如果你想使用 jquery 来做这件事，你可以这样做。但最好的方法是第一种方法。在这里加载页面时有时会显示混乱的菜单。

jQuery('ul.sub-menu').wrap('<div class="sub-menu-wrapper" />');

【讨论】：