Функция wp_nav_menu() в WordPress с примерами

Функция wp_nav_menu() используется для отображения навигационного меню в WordPress. Она позволяет гибко настроить внешний вид меню, задать стили, классы, контейнеры и многое другое.

wp_nav_menu( array $args = array() ): void|string|false

Функция выводит меню на экран (или возвращает его в виде строки), используя различные параметры настройки.

Параметры $args

• menu (int|string|WP_Term)
  Идентификатор, слаг, название или объект меню, которое нужно вывести.
• menu_class (string)
  CSS-класс, который будет применён к элементу <ul>, формирующему меню. По умолчанию 'menu'.
• menu_id (string)
  ID, который будет применён к элементу <ul>, формирующему меню. По умолчанию — слаг меню.
• container (string)
  Тег, в который будет обёрнуто меню. По умолчанию 'div'. Можно установить false, чтобы не использовать контейнер.
• container_class (string)
  Класс, применённый к контейнеру. По умолчанию menu-{menu slug}-container.
• container_id (string)
  ID, применённый к контейнеру.
• fallback_cb (callable|false)
  Функция обратного вызова, если меню не существует. По умолчанию — wp_page_menu(). Можно установить в false, чтобы не было замены.
• before (string)
  Текст перед разметкой ссылки.
• after (string)
  Текст после разметки ссылки.
• link_before (string)
  Текст перед текстом ссылки.
• link_after (string)
  Текст после текста ссылки.
• echo (bool)
  Определяет, выводить меню или возвращать его как строку. По умолчанию true.
• depth (int)
  Количество уровней вложенности для меню. По умолчанию — все уровни.
• walker (object)
  Экземпляр класса Walker, который будет использован для создания меню.
• theme_location (string)
  Локация меню, зарегистрированная через функцию register_nav_menu(). Используется для вывода меню, заданного для этой локации.
• items_wrap (string)
  Формат обёртки для элементов меню, использует форматирование printf(). По умолчанию это <ul> с классами и идентификатором.
• item_spacing (string)
  Указывает, нужно ли сохранять пробелы в HTML меню. Принимает preserve или discard. По умолчанию preserve.

Возвращаемое значение

• void — если параметр 'echo' установлен в true, меню выводится сразу.
• string — если параметр 'echo' установлен в false, меню возвращается как строка.
• false — если не найдено ни одного элемента меню.

Пример 1: Простое меню с параметрами по умолчанию

wp_nav_menu();

Пример 2: Вывод меню с кастомными классами и контейнером

wp_nav_menu( array(
    'menu'           => 'main-menu',
    'menu_class'     => 'custom-menu-class',
    'container'      => 'nav',
    'container_class'=> 'menu-container-class',
    'echo'           => true,
    'depth'          => 2
) );

Этот код отобразит меню с двумя уровнями вложенности в теге <nav> с кастомными классами.

Пример 3: Отображение разных меню для авторизованных и неавторизованных пользователей

wp_nav_menu( array(
    'theme_location' => is_user_logged_in() ? 'logged-in-menu' : 'logged-out-menu',
) );

Пример 4: Добавление текста перед и после ссылок

wp_nav_menu( array(
    'theme_location' => 'main-menu',
    'before'         => '<span>',
    'after'          => '</span>',
    'link_before'    => '<strong>',
    'link_after'     => '</strong>',
) );

Пример 5: Использование кастомного walker для создания меню

wp_nav_menu( array(
    'menu'   => 'main-menu',
    'walker' => new My_Custom_Walker()
) );

class My_Custom_Walkerextends Walker_Nav_Menu {

	// add classes to ul sub-menus
	function start_lvl( &$output, $depth = 0, $args = NULL ) {
		// depth dependent classes
		$indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
		$display_depth = ( $depth + 1); // because it counts the first submenu as 0
		$classes = array(
			'sub-menu',
			( $display_depth % 2  ? 'menu-odd' : 'menu-even' ),
			( $display_depth >=2 ? 'sub-sub-menu' : '' ),
			'menu-depth-' . $display_depth
		);
		$class_names = implode( ' ', $classes );

		// build html
		$output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";
	}

	// add main/sub classes to li's and links
	function start_el( &$output, $data_object, $depth = 0, $args = null, $current_object_id = 0 ) {
		global $wp_query;

		// Restores the more descriptive, specific name for use within this method.
		$item = $data_object;

		$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent

		// depth dependent classes
		$depth_classes = array(
			( $depth == 0 ? 'main-menu-item' : 'sub-menu-item' ),
			( $depth >=2 ? 'sub-sub-menu-item' : '' ),
			( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),
			'menu-item-depth-' . $depth
		);
		$depth_class_names = esc_attr( implode( ' ', $depth_classes ) );

		// passed classes
		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
		$class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

		// build html
		$output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">';

		// link attributes
		$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
		$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
		$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
		$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
		$attributes .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';

		$item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
			$args->before,
			$attributes,
			$args->link_before,
			apply_filters( 'the_title', $item->title, $item->ID ),
			$args->link_after,
			$args->after
		);

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

}

Классы CSS для элементов меню

В WordPress автоматически добавляются CSS-классы к элементам меню в зависимости от того, на какой странице находится пользователь, а также от типа контента, связанного с меню. Эти классы помогают стилизовать меню и выделять активные или родительские элементы.

CSS-классы для всех элементов меню:

1. .menu-item — применяется ко всем элементам меню.
2. .menu-item-object-{object} — заменяется на тип записи или таксономии. Например:
   • .menu-item-object-category — для категорий.
   • .menu-item-object-tag — для меток.
   • .menu-item-object-page — для постоянных страниц.
   • .menu-item-object-custom — для произвольных элементов меню.
3. .menu-item-type-{type} — заменяется на тип ссылки:
   • .menu-item-type-post_type — для страниц или произвольных типов записи.
   • .menu-item-type-taxonomy — для таксономий (категории, метки).
   • .menu-item-type-custom — для произвольных элементов.

CSS-классы на текущей странице:

1. .current-menu-item — используется, когда элемент меню соответствует текущему URL.
2. .current-menu-parent — для родительских элементов текущей страницы.
3. .current-{taxonomy}-ancestor и .current-{post_type}-ancestor — для предков таксономий и типов записей.

CSS-классы для связанных с текущей страницей элементов:

1. .current-menu-ancestor — предки текущего элемента меню.
2. .menu-item-home — для элементов меню, связанных с главной страницей.

Дополнительные CSS-классы:

1. .menu-item-has-children — если у элемента есть вложенные пункты меню.
2. ul.sub-menu — используется для вложенных списков.
3. .menu-item-privacy-policy — для пункта меню с «Политикой конфиденциальности».
4. .menu-item-home — для ссылки на главную страницу.

Совместимость с функцией wp_page_menu():

1. .page_item — для элементов меню, созданных через wp_page_menu().
2. .current_page_item — для текущей страницы.
3. .current_page_parent и .current_page_ancestor — для родительских элементов.

Объект $item и его параметры:

Для каждого элемента меню WordPress создает объект $item, содержащий различные данные:

• ID — идентификатор элемента меню.
• menu_item_parent — ID родительского элемента меню.
• classes — массив CSS-классов.
• title — заголовок элемента меню.
• url — ссылка.
• current — равен 1, если элемент активен на текущей странице.
• current_item_parent — родитель текущего элемента меню.
• menu_order — порядок элемента в меню.
• object_id — ID связанного объекта (например, запись или категория).
• object — тип объекта (например, page, category).

Эти параметры используются для кастомизации и добавления логики в вывод меню, позволяя настроить поведение каждого элемента индивидуально.

Заключение

Функция wp_nav_menu() предоставляет мощный и гибкий способ создания и отображения меню в WordPress. С её помощью можно выводить как простые меню, так и сложные структуры с вложенностью и кастомными стилями.