Изменить разметку подменю

Содержание

Вопрос или проблема
Ответ или решение
Шаги для создания кастомного класс-ходока:
Рекомендации:
Заключение

Вопрос или проблема

Я видел, как люди рекомендуют редактировать стандартный класс Walker в WordPress, чтобы изменить разметку меню и создать свое собственное.

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

В функции walker я увидел только функции start_lvl и end_lvl, относящиеся к созданию подменю.
Сами функции недостаточно прокомментированы… так что я понял, что lvl означает “уровень”, и с этим они имеют в виду “подменю”…

Но, похоже, нет никакой конкретной функции для рендеринга подменю. Кажется, они используют одну и ту же для родительского меню и подменю.

Есть какие-либо рекомендации?
Я хотел бы создать меню, как на изображении, и у меня возникают трудности.

Вся идея создания пользовательского класса walker заключается в том, что вы можете детально настраивать меню. Таким образом, вы также можете оставить основное меню таким, какое оно есть, и построить подменю так, как показано на изображении.

Тем не менее, как указывает Хариш в комментариях, это требует довольно много настройки, особенно если вы хотите, чтобы ваша тема имела широкую применимость (это означает, что вам придется учитывать ошибки, такие как отсутствие изображений в подменю). Это может быть приятным местом для начала понимания класса walker.

Ответ или решение

Чтобы изменить разметку подменю в WordPress, не затрагивая при этом основное меню, вам потребуется создать расширенный класс-ходок (Walker). Этот класс позволит вам настроить вывод подменю, используя функции start_lvl и end_lvl, но также необходимо переопределить методы, отвечающие за вывод элементов подменю.

Шаги для создания кастомного класс-ходока:

Создание нового файла для класса:
Начните с создания нового PHP-файла в вашей дочерней теме или в плагине. Например, вы можете назвать его custom-walker.php.

Определение класса:
Определите новый класс, который будет расширять стандартный класс Walker. Например:

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
   // Начало уровня подменю
   function start_lvl( &$output, $depth = 0, $args = null ) {
       $indent = str_repeat("\t", $depth);
       $output .= "\n$indent<ul class=\"sub-menu custom-sub-menu\">\n";
   }

   // Конец уровня подменю
   function end_lvl( &$output, $depth = 0, $args = null ) {
       $indent = str_repeat("\t", $depth);
       $output .= "$indent</ul>\n";
   }

   // Переопределите метод для вывода элементов подменю
   function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
       $indent = ($depth) ? str_repeat("\t", $depth) : '';

       $classes = empty($item->classes) ? [] : (array) $item->classes;
       $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
       $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';

       $id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args);
       $id = $id ? ' id="' . esc_attr($id) . '"' : '';

       $output .= $indent . '<li' . $id . $class_names .'>';

       $atts = [];
       $atts['title']  = ! empty($item->attr_title) ? $item->attr_title : '';
       $atts['target'] = ! empty($item->target)     ? $item->target     : '';
       $atts['rel']    = ! empty($item->xfn)        ? $item->xfn        : '';
       $atts['href']   = ! empty($item->url)        ? $item->url        : '';

       $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args);

       $item_output = $args->before;
       $item_output .= '<a'. $this->attributes_to_string($atts) .'>';
       $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
       $item_output .= '</a>';
       $item_output .= $args->after;

       $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
   }

   private function attributes_to_string($atts) {
       $attributes = '';
       foreach ($atts as $key => $value) {
           if (! empty($value)) {
               $attributes .= ' ' . esc_attr($key) . '="' . esc_attr($value) . '"';
           }
       }
       return $attributes;
   }
}

Использование нового класса:
Теперь вам нужно будет использовать созданный класс вместо стандартного при вызове функции wp_nav_menu(). Например:
```
wp_nav_menu(array(
   'theme_location' => 'your-menu-location',
   'walker' => new Custom_Walker_Nav_Menu()
));
```

Заключение

Создав кастомный класс-ходок, вы получите возможность детально настраивать разметку подменю в WordPress. Этот подход гарантирует, что основное меню останется нетронутым, а подменю будет отображаться согласно вашим требованиям. Не стесняйтесь обращаться к документации WordPress и использовать ресурсы сообщества для получения дополнительных идей и поддержки.

Изменить разметку подменю

Вопрос или проблема

Ответ или решение

Шаги для создания кастомного класс-ходока:

Рекомендации:

Заключение