Walker_Nav_Menu

Базовый класс Walker для реализации HTML-списка элементов навигационного меню
Класс WordPress
INT 3.0.0
WordPress Icon

Описание класса

Класс Walker_Nav_Menu является основным классом, используемым в WordPress для реализации HTML-списка элементов навигационного меню. Он предоставляет методы для создания и обработки элементов меню, а также для управления их выводом.

Этот класс является частью ядра WordPress и используется внутри функции wp_nav_menu() для генерации HTML-кода навигационного меню. Он позволяет разработчикам создавать свои собственные классы-наследники, чтобы настроить вывод и поведение навигационного меню в соответствии с требованиями проекта.

Методы

  • build_atts() — Строит строку HTML-атрибутов из массива пар ключ/значение.
  • end_el() — Завершает вывод элемента, если это необходимо.
  • end_lvl() — Завершает список после добавления элементов.
  • start_el() — Начинает вывод элемента.
  • start_lvl() — Начинает список перед добавлением элементов.

Метод build_atts() используется для построения строки HTML-атрибутов из массива пар ключ/значение. Он принимает массив атрибутов и возвращает строку, содержащую HTML-код атрибутов.

Метод end_el() вызывается для завершения вывода элемента меню. Он проверяет, нужно ли закрыть открытый тег элемента, и если это необходимо, закрывает его.

Метод end_lvl() вызывается для завершения списка после добавления всех элементов. Он закрывает открытый тег списка, если это необходимо.

Метод start_el() вызывается для начала вывода элемента меню. Он открывает тег элемента и выводит его содержимое.

Метод start_lvl() вызывается для начала списка перед добавлением элементов. Он открывает тег списка, если это необходимо.

Методы

build_atts()

Метод build_atts() используется для создания строки HTML атрибутов из массива пар ключ/значение.

Метод принимает массив $atts с опциональными HTML атрибутами и возвращает строку HTML атрибутов.

Метод build_atts() используется в классе Walker_Nav_Menu для формирования атрибутов HTML элементов меню.

Walker_Nav_Menu::build_atts( array $atts = array() ): string

Метод build_atts() принимает массив $atts с опциональными HTML атрибутами и возвращает строку HTML атрибутов.

$atts (array) (Optional) — Массив пар ключ/значение HTML атрибутов. По умолчанию: array().

Метод build_atts() возвращает строку HTML атрибутов.

<?php
/**
 * Пример использования метода build_atts()
 */
// Массив атрибутов
$atts = array(
    'class' => 'menu-item',
    'id' => 'menu-item-1',
    'data-url' => 'http://example.com',
);
// Вызов метода build_atts()
$attributes = Walker_Nav_Menu::build_atts( $atts );
// Вывод строки атрибутов
echo $attributes;
?>

В данном примере создается массив атрибутов $atts с ключами ‘class’, ‘id’ и ‘data-url’ и соответствующими значениями. Затем вызывается метод build_atts() класса Walker_Nav_Menu с передачей массива атрибутов. Результатом работы метода будет строка атрибутов, которая выводится на экран.

end_el()

Метод end_el() используется для завершения вывода элемента меню. Он вызывается после вывода содержимого элемента и позволяет добавить дополнительный контент, если это необходимо.

Метод работает внутри класса Walker_Nav_Menu, который используется для создания HTML-списка элементов навигационного меню.

Walker_Nav_Menu::end_el( string $output, WP_Post $data_object, int $depth, stdClass $args = null )

Метод end_el() принимает следующие параметры:

  • $output (обязательный) — используется для добавления дополнительного контента (передается по ссылке).
  • $data_object (обязательный) — объект данных элемента меню. В данном методе не используется.
  • $depth (обязательный) — глубина вложенности элемента. В данном методе не используется.
  • $args (необязательный) — объект аргументов функции wp_nav_menu(). В данном методе не используется.
<?php
/**
 * Пример использования метода end_el()
 *
 * @param string      $output      Используется для добавления дополнительного контента (передается по ссылке).
 * @param WP_Post     $data_object Объект данных элемента меню. В данном методе не используется.
 * @param int         $depth       Глубина вложенности элемента. В данном методе не используется.
 * @param stdClass|null $args       Объект аргументов функции wp_nav_menu(). В данном методе не используется.
 */
function custom_end_el( &$output, $data_object, $depth, $args ) {
    // Добавить дополнительный контент к выводу элемента
    $output .= '<span class="additional-content">Дополнительный контент</span>';
}
add_action( 'walker_nav_menu_end_el', 'custom_end_el', 10, 4 );
?>

В приведенном примере кода мы создаем функцию custom_end_el(), которая добавляет дополнительный контент к выводу элемента меню. Функция привязывается к хуку walker_nav_menu_end_el с приоритетом 10 и принимает 4 аргумента.

Внутри функции мы используем переменную $output, которая передается по ссылке, чтобы добавить дополнительный контент к выводу элемента. В данном случае мы добавляем тег <span> с классом «additional-content» и текстом «Дополнительный контент».

end_lvl()

Метод end_lvl() является частью класса Walker_Nav_Menu и используется для завершения списка элементов меню после добавления элементов.

Метод работает следующим образом: после добавления всех элементов меню в список, метод end_lvl() вызывается для завершения списка. Он не принимает никаких аргументов и не возвращает значения.

Метод end_lvl() используется внутри функции walk() класса Walker_Nav_Menu для генерации HTML-кода списка элементов меню.

Walker_Nav_Menu::end_lvl( string $output, int $depth, stdClass $args = null )

Метод end_lvl() не принимает никаких аргументов и не возвращает значения.

$output (string) — Обязательный. Используется для добавления дополнительного контента (передается по ссылке).

$depth (int) — Обязательный. Глубина элемента меню. Используется для добавления отступов.

$args (stdClass) — Необязательный. Объект аргументов функции wp_nav_menu(). Содержит дополнительные аргументы из функции wp_nav_menu().

Аргументы из функции wp_nav_menu():

  • menu (int|string|WP_Term) — Желаемое меню. Принимает ID, слаг, название или объект меню.
  • menu_class (string) — CSS-класс для элемента ul, который формирует меню. По умолчанию ‘menu’.
  • menu_id (string) — ID, применяемый к элементу ul, который формирует меню. По умолчанию — слаг меню, увеличенный на единицу.
  • container (string) — Обернуть ли ul и каким элементом. По умолчанию ‘div’.
  • container_class (string) — Класс, применяемый к контейнеру. По умолчанию ‘menu-{slug меню}-container’.
  • container_id (string) — ID, применяемый к контейнеру.
  • container_aria_label (string) — Значение атрибута aria-label, применяемого к контейнеру, если он является элементом nav.
  • fallback_cb (callable|false) — Если меню не существует, будет вызвана функция обратного вызова. По умолчанию ‘wp_page_menu’. Установите значение false, чтобы отключить резервное меню.
  • before (string) — Текст перед разметкой ссылки.
  • after (string) — Текст после разметки ссылки.
  • link_before (string) — Текст перед текстом ссылки.
  • link_after (string) — Текст после текста ссылки.
  • echo (bool) — Выводить меню или возвращать его. По умолчанию true.
  • depth (int) — Сколько уровней иерархии должно быть включено. 0 означает все. По умолчанию 0.
  • walker (object) — Экземпляр пользовательского класса обходчика.
  • theme_location (string) — Используемое местоположение темы. Должно быть зарегистрировано с помощью register_nav_menu(), чтобы пользователь мог выбрать его.
  • items_wrap (string) — Как обернуть элементы списка. Использует формат printf() с номерованными заполнителями. По умолчанию — ul с ID и классом.
  • item_spacing (string) — Сохранять ли пробелы в HTML-разметке меню. Принимает значения ‘preserve’ или ‘discard’. По умолчанию ‘preserve’.
<?php
/**
 * Пример использования метода end_lvl() класса Walker_Nav_Menu
 */
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
  /**
   * Завершает список после добавления элементов
   *
   * @param string $output    Используется для добавления дополнительного контента (передается по ссылке).
   * @param int    $depth     Глубина элемента меню. Используется для добавления отступов.
   * @param object $args      Объект аргументов функции wp_nav_menu().
   */
  public function end_lvl( &$output, $depth = 0, $args = null ) {
    // Код метода end_lvl()
  }
}
// Использование пользовательского класса обходчика
wp_nav_menu( array(
  'theme_location' => 'primary',
  'walker'         => new Custom_Walker_Nav_Menu(),
) );
?>

start_el()

Метод start_el() используется в классе Walker_Nav_Menu для вывода элемента меню. Он вызывается для каждого элемента меню и отвечает за формирование его HTML-кода. Метод позволяет настроить вывод элемента меню в соответствии с требованиями проекта.

Walker_Nav_Menu::start_el( string $output, WP_Post $data_object, int $depth, stdClass $args = null, int $current_object_id )

Метод start_el() принимает следующие параметры:

  • $output (строка, обязательный) — используется для добавления дополнительного контента (передается по ссылке).
  • $data_object (WP_Post, обязательный) — объект данных элемента меню.
  • $depth (целое число, обязательный) — уровень вложенности элемента меню. Используется для отступов.
  • $args (stdClass, необязательный) — объект аргументов функции wp_nav_menu(). Содержит дополнительные параметры для настройки вывода меню.
  • $current_object_id (целое число, необязательный) — ID текущего элемента меню.
<?php
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
  public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    // Ваш код для формирования HTML-кода элемента меню
  }
}
?>

В приведенном примере показано, как создать пользовательский класс Custom_Walker_Nav_Menu, который наследуется от Walker_Nav_Menu. Метод start_el() переопределяется в пользовательском классе для настройки вывода элемента меню.

start_lvl()

Метод start_lvl() используется в классе Walker_Nav_Menu для начала списка перед добавлением элементов. Он вызывается перед каждым уровнем вложенности элементов меню.

Метод принимает следующие параметры:

  • $output (обязательный) — используется для добавления дополнительного контента (передается по ссылке).
  • $depth (обязательный) — глубина элемента меню. Используется для отступов.
  • $args (необязательный) — объект аргументов функции wp_nav_menu().

Метод не возвращает значения.

Walker_Nav_Menu::start_lvl( string $output, int $depth, stdClass $args = null )

Код метода start_lvl() с комментариями:

<?php
/**
 * Начинает список перед добавлением элементов.
 *
 * @param string   $output Используется для добавления дополнительного контента (передается по ссылке).
 * @param int      $depth  Глубина элемента меню. Используется для отступов.
 * @param stdClass $args   Объект аргументов функции wp_nav_menu().
 */
public function start_lvl( &$output, $depth = 0, $args = null ) {
    // Код метода start_lvl() здесь
}
?>

Метод start_lvl() принимает следующие параметры:

  • $output (string, обязательный) — используется для добавления дополнительного контента (передается по ссылке).
  • $depth (int, обязательный) — глубина элемента меню. Используется для отступов.
  • $args (stdClass, необязательный) — объект аргументов функции wp_nav_menu().

Аргументы из функции wp_nav_menu():

  • menu (int|string|WP_Term, обязательный) — идентификатор, слаг, название или объект меню.
  • menu_class (string) — CSS-класс для элемента ul, формирующего меню. По умолчанию ‘menu’.
  • menu_id (string) — ID, применяемый к элементу ul, формирующему меню. По умолчанию — слаг меню, увеличенный на единицу.
  • container (string) — обернуть ли ul и каким элементом. По умолчанию ‘div’.
  • container_class (string) — класс, применяемый к контейнеру. По умолчанию ‘menu-{menu slug}-container’.
  • container_id (string) — ID, применяемый к контейнеру.
  • container_aria_label (string) — атрибут aria-label, применяемый к контейнеру, если он является элементом nav.
  • fallback_cb (callable|false) — функция обратного вызова, которая будет вызвана, если меню не существует. По умолчанию ‘wp_page_menu’. Установите значение false для отсутствия резервного варианта.
  • before (string) — текст перед разметкой ссылки.
  • after (string) — текст после разметки ссылки.
  • link_before (string) — текст перед текстом ссылки.
  • link_after (string) — текст после текста ссылки.
  • echo (bool) — выводить ли меню или возвращать его. По умолчанию true.
  • depth (int) — сколько уровней иерархии должно быть включено. 0 означает все уровни. По умолчанию 0.
  • walker (object) — экземпляр пользовательского класса обходчика.
  • theme_location (string) — местоположение темы, которое будет использоваться. Должно быть зарегистрировано с помощью функции register_nav_menu(), чтобы быть доступным для выбора пользователем.
  • items_wrap (string) — как должны быть обернуты элементы списка. Использует формат printf() с номерованными заполнителями. По умолчанию — ul с id и class.
  • item_spacing (string) — сохранять ли пробелы в HTML-разметке меню. Принимает значения ‘preserve’ или ‘discard’. По умолчанию ‘preserve’.
<?php
/**
 * Начинает список перед добавлением элементов.
 *
 * @param string   $output Используется для добавления дополнительного контента (передается по ссылке).
 * @param int      $depth  Глубина элемента меню. Используется для отступов.
 * @param stdClass $args   Объект аргументов функции wp_nav_menu().
 */
public function start_lvl( &$output, $depth = 0, $args = null ) {
    // Ваш код здесь
}
?>

Примеры использования

Создание HTML-атрибутов из массива ключ/значение


/**
 * Builds a string of HTML attributes from an array of key/value pairs.
 *
 * @param array $atts The array of attributes.
 * @return string The string of HTML attributes.
 */
public function build_atts( $atts ) {
    $html_atts = '';
    foreach ( $atts as $key => $value ) {
        $html_atts .= ' ' . $key . '="' . esc_attr( $value ) . '"';
    }
    return $html_atts;
}

Метод build_atts используется для создания строки HTML-атрибутов из массива ключ/значение. Он принимает массив атрибутов $atts и возвращает строку HTML-атрибутов.

В примере кода выше, метод проходит по каждому элементу массива $atts и добавляет его в строку $html_atts в формате ключ="значение". Значение атрибута также проходит через функцию esc_attr, чтобы быть безопасным для вывода в HTML.

Завершение вывода элемента, если необходимо


/**
 * Ends the element output, if needed.
 *
 * @param string $item_output The HTML output for the current menu item.
 * @param object $item The current menu item.
 * @param int $depth Depth of the current menu item.
 * @param array $args An array of arguments.
 */
public function end_el( &$output, $item, $depth = 0, $args = array() ) {
    $output .= "</li>n";
}

Метод end_el используется для завершения вывода элемента меню, если это необходимо. Он принимает следующие параметры: $item_output — HTML-вывод для текущего элемента меню, $item — текущий элемент меню, $depth — глубина текущего элемента меню, $args — массив аргументов.

В примере кода выше, метод добавляет закрывающий тег </li> в конец строки $output, чтобы завершить вывод элемента меню.

Завершение списка после добавления элементов


/**
 * Ends the list of after the elements are added.
 *
 * @param string $output The HTML output for the menu.
 * @param int $depth Depth of the menu.
 * @param array $args An array of arguments.
 */
public function end_lvl( &$output, $depth = 0, $args = array() ) {
    $output .= "</ul>n";
}

Метод end_lvl используется для завершения списка после добавления элементов. Он принимает следующие параметры: $output — HTML-вывод для меню, $depth — глубина меню, $args — массив аргументов.

В примере кода выше, метод добавляет закрывающий тег </ul> в конец строки $output, чтобы завершить список после добавления элементов.

Начало вывода элемента


/**
 * Starts the element output.
 *
 * @param string $output The HTML output for the menu item.
 * @param object $item The current menu item.
 * @param int $depth Depth of the current menu item.
 * @param array $args An array of arguments.
 * @param int $id Current menu item ID.
 */
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $output .= "<li" . $this->build_atts( $item->classes ) . ">n";
}

Метод start_el используется для начала вывода элемента меню. Он принимает следующие параметры: $output — HTML-вывод для текущего элемента меню, $item — текущий элемент меню, $depth — глубина текущего элемента меню, $args — массив аргументов, $id — ID текущего элемента меню.

В примере кода выше, метод добавляет открывающий тег <li> в конец строки $output и вызывает метод build_atts для создания HTML-атрибутов из массива классов элемента меню.

Начало списка перед добавлением элементов


/**
 * Starts the list before the elements are added.
 *
 * @param string $output The HTML output for the menu.
 * @param int $depth Depth of the menu.
 * @param array $args An array of arguments.
 */
public function start_lvl( &$output, $depth = 0, $args = array() ) {
    $output .= "<ul class="sub-menu">n";
}

Метод start_lvl используется для начала списка перед добавлением элементов. Он принимает следующие параметры: $output — HTML-вывод для меню, $depth — глубина меню, $args — массив аргументов.

В примере кода выше, метод добавляет открывающий тег <ul class="sub-menu"> в конец строки $output, чтобы начать список перед добавлением элементов.

Вопросы и ответы

Как изменить HTML-разметку элементов меню?

Для изменения HTML-разметки элементов меню в WordPress можно использовать класс Walker_Nav_Menu. Этот класс предоставляет различные методы, которые можно переопределить для настройки вывода HTML-кода.

Метод start_el используется для начала вывода каждого элемента меню. В нем можно изменить HTML-разметку элемента меню, добавить или изменить классы и атрибуты.

Пример кода:


class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $output .= '<li>';
        $output .= '<a href="' . $item->url . '">' . $item->title . '</a>';
        $output .= '</li>';
    }
}

Как добавить класс к элементу меню?

Чтобы добавить класс к элементу меню, можно использовать метод start_el класса Walker_Nav_Menu. В этом методе можно проверить условия и добавить нужный класс к элементу меню.

Пример кода:


class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'custom-class';
        $output .= '<li class="' . esc_attr( implode( ' ', $classes ) ) . '">';
        $output .= '<a href="' . $item->url . '">' . $item->title . '</a>';
        $output .= '</li>';
    }
}

Как изменить атрибуты элемента меню?

Для изменения атрибутов элемента меню можно использовать метод start_el класса Walker_Nav_Menu. В этом методе можно изменить или добавить нужные атрибуты к элементу меню.

Пример кода:


class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $atts = array();
        $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, $depth );
        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $attributes .= ' ' . $attr . '="' . esc_attr( $value ) . '"';
            }
        }
        $output .= '<li>';
        $output .= '<a' . $attributes . '>' . $item->title . '</a>';
        $output .= '</li>';
    }
}

Как добавить иконку к элементу меню?

Чтобы добавить иконку к элементу меню в WordPress, необходимо использовать фильтр nav_menu_item_title. Этот фильтр позволяет изменить заголовок элемента меню перед его выводом.


function add_menu_item_icon($title, $item) {
    // Получаем иконку из метаданных элемента меню
    $icon = get_post_meta($item->ID, '_menu_item_icon', true);
    
    // Проверяем, есть ли иконка
    if ($icon) {
        // Добавляем иконку к заголовку элемента меню
        $title .= ' <i class="' . $icon . '"></i>';
    }
    
    return $title;
}
add_filter('nav_menu_item_title', 'add_menu_item_icon', 10, 2);

Как изменить порядок элементов меню?

Для изменения порядка элементов меню в WordPress можно использовать фильтр wp_nav_menu_objects. Этот фильтр позволяет изменить массив объектов элементов меню перед его обработкой и выводом.


function change_menu_order($sorted_menu_items, $args) {
    // Перемешиваем элементы меню в случайном порядке
    shuffle($sorted_menu_items);
    
    return $sorted_menu_items;
}
add_filter('wp_nav_menu_objects', 'change_menu_order', 10, 2);

Как добавить подменю к элементу меню?

Для добавления подменю к элементу меню в WordPress необходимо использовать фильтр walker_nav_menu_start_el. Этот фильтр позволяет изменить вывод элемента меню перед его открытием.


function add_submenu($item_output, $item, $depth, $args) {
    // Проверяем, есть ли подменю у элемента меню
    if (in_array('menu-item-has-children', $item->classes)) {
        // Получаем ID родительского элемента меню
        $parent_id = $item->ID;
        
        // Получаем HTML-код подменю
        $submenu = wp_nav_menu(array(
            'theme_location' => $args->theme_location,
            'menu' => $item->menu,
            'container' => '',
            'menu_class' => 'sub-menu',
            'menu_id' => 'submenu-' . $parent_id,
            'depth' => $depth + 1,
            'echo' => false
        ));
        
        // Добавляем подменю к элементу меню
        $item_output .= $submenu;
    }
    
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'add_submenu', 10, 4);

Как изменить стиль активного элемента меню?

Для изменения стиля активного элемента меню в классе Walker_Nav_Menu можно использовать метод start_el(). В этом методе можно добавить дополнительный класс к активному элементу, чтобы применить нужные стили.


class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        // Добавляем класс "active" к активному элементу
        if ( in_array( 'current-menu-item', $item->classes ) ) {
            $output .= '<li class="active">';
        } else {
            $output .= '<li>';
        }
        // Выводим содержимое элемента меню
        $output .= $item->title;
        // Закрываем тег li
        $output .= '</li>';
    }
}

Как скрыть определенные элементы меню?

Для скрытия определенных элементов меню в классе Walker_Nav_Menu можно использовать метод start_el(). В этом методе можно проверить условие и не выводить элементы, которые нужно скрыть.


class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        // Проверяем условие и не выводим элементы с определенным ID
        if ( $item->ID == 2 || $item->ID == 3 ) {
            return;
        }
        // Выводим содержимое элемента меню
        $output .= $item->title;
    }
}

Как добавить дополнительные классы к списку меню?

Для добавления дополнительных классов к списку меню в классе Walker_Nav_Menu можно использовать метод start_lvl(). В этом методе можно добавить нужные классы к открывающему тегу списка меню.


class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        // Добавляем дополнительные классы к списку меню
        $output .= '<ul class="custom-menu">';
    }
}

Класс Walker_Nav_Menu является ядром для реализации HTML-списка элементов меню. Он предоставляет методы для изменения стиля активного элемента меню, скрытия определенных элементов и добавления дополнительных классов к списку меню. Используя эти методы, разработчики WordPress могут легко настраивать и управлять выводом меню на своих сайтах.

Обсуждение