Как я могу добавить div вокруг WordPress UL контейнера

Question

Wordpress выводит меню моего ребенка внутри этого тега ul...

<ul class="sub-menu">

как я могу обернуть простой div вокруг него?

Желательно способ сделать это через functions.php, но jquery тоже может работать.

Answer 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()))

В противном случае, отредактируйте ваш вопрос с помощью кода, который используется в вашем меню, чтобы я мог помочь вам в дальнейшем.

Answer 2

В функции.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" />');