Реєстрація та виведення меню у WordPress

Навігаційне меню — один із базових елементів будь-якої WordPress-теми. Якщо ви розробляєте власну класичну або hybrid-тему, найзручніше зареєструвати окремі позиції меню та виводити їх у потрібних частинах шаблону.

У цій статті розберемо, як правильно зареєструвати та вивести меню у WordPress 7.1.

Реєстрація меню у WordPress

Для створення позицій меню використовується функція:

register_nav_menus();

Наприклад, створимо дві області:

• головне меню в шапці;
• меню у футері.

Код додаємо у functions.php теми:

function wp_hunter_setup() {

	register_nav_menus(
		array(
			'primary' => __( 'Головне меню', 'wp-hunter' ),
			'footer'  => __( 'Меню у футері', 'wp-hunter' ),
		)
	);

}
add_action( 'after_setup_theme', 'wp_hunter_setup' );

Після цього WordPress буде знати про дві позиції:

primary
footer

primary та footer — це системні ідентифікатори позицій. Їх ми будемо використовувати під час виведення меню в шаблоні.

Функція register_nav_menus() автоматично активує підтримку меню для теми, тому додатково викликати:

add_theme_support( 'menus' );

не потрібно.

Реєстрація одного меню

Якщо потрібна лише одна позиція, можна використати:

register_nav_menu();

Наприклад:

function wp_hunter_setup() {

	register_nav_menu(
		'primary',
		__( 'Головне меню', 'wp-hunter' )
	);

}
add_action( 'after_setup_theme', 'wp_hunter_setup' );

Але якщо тема має декілька меню, зручніше одразу використовувати register_nav_menus().

Виведення меню в темі

Для виведення зареєстрованого меню використовується:

wp_nav_menu();

Наприклад, у header.php:

<?php
wp_nav_menu(
	array(
		'theme_location' => 'primary',
	)
);
?>

Параметр:

'theme_location' => 'primary'

вказує WordPress, яку саме зареєстровану позицію потрібно вивести.

Налаштовуємо HTML меню

У реальному проєкті зазвичай потрібно контролювати класи та HTML-обгортку.

Наприклад:

<?php
wp_nav_menu(
	array(
		'theme_location'  => 'primary',
		'container'       => 'nav',
		'container_class' => 'header-nav',
		'menu_class'      => 'header-menu',
		'menu_id'         => 'header-menu',
		'fallback_cb'     => false,
	)
);
?>

У результаті отримаємо приблизно таку структуру:

<nav class="header-nav">
	<ul id="header-menu" class="header-menu">
		<li class="menu-item">
			<a href="/">Головна</a>
		</li>

		<li class="menu-item">
			<a href="/blog/">Блог</a>
		</li>
	</ul>
</nav>

Основні параметри тут:

'theme_location'

визначає позицію меню.

'container'

задає HTML-елемент навколо меню.

'container_class'

додає клас контейнеру.

'menu_class'

задає клас для <ul>.

'menu_id'

задає його id.

А:

'fallback_cb' => false

забороняє WordPress автоматично підставляти інше меню або список сторінок, якщо меню для цієї позиції ще не призначене.

Перевірка, чи призначене меню

Перед виведенням меню можна перевірити, чи користувач справді призначив меню для потрібної області.

Для цього використовується:

has_nav_menu();

Приклад:

<?php if ( has_nav_menu( 'primary' ) ) : ?>

	<nav class="header-nav">

		<?php
		wp_nav_menu(
			array(
				'theme_location' => 'primary',
				'container'      => false,
				'menu_class'     => 'header-menu',
				'fallback_cb'    => false,
			)
		);
		?>

	</nav>

<?php endif; ?>

Цей варіант особливо зручний, якщо ви не хочете виводити порожній <nav>.

Виведення меню у футері

З другою позицією працюємо аналогічно.

Наприклад, у footer.php:

<?php
wp_nav_menu(
	array(
		'theme_location' => 'footer',
		'container'      => 'nav',
		'menu_class'     => 'footer-menu',
		'fallback_cb'    => false,
	)
);
?>

Таким чином одне меню можна використовувати в шапці сайту, інше — у футері.

Додавання класів до посилань меню

За замовчуванням WordPress додає багато класів до <li>, але іноді потрібно додати власний клас безпосередньо до <a>.

Наприклад:

function wp_hunter_menu_link_attributes( $atts, $menu_item, $args ) {

	if ( isset( $args->theme_location ) && 'primary' === $args->theme_location ) {
		$atts['class'] = 'header-menu__link';
	}

	return $atts;
}
add_filter( 'nav_menu_link_attributes', 'wp_hunter_menu_link_attributes', 10, 3 );

Тепер посилання головного меню матимуть вигляд:

<a class="header-menu__link" href="/">
	Головна
</a>

Це значно спрощує стилізацію меню.

Клас активного пункту меню

WordPress автоматично додає спеціальні класи до активних пунктів:

current-menu-item
current-menu-parent
current-menu-ancestor

Тому поточний пункт можна оформити звичайним CSS:

.header-menu .current-menu-item > a {
	font-weight: 600;
}

Наприклад, можна додати підкреслення:

.header-menu .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 6px;
}

Додаткова PHP-логіка для визначення активної сторінки в більшості випадків не потрібна.

Повний приклад

У functions.php:

function wp_hunter_setup() {

	register_nav_menus(
		array(
			'primary' => __( 'Головне меню', 'wp-hunter' ),
			'footer'  => __( 'Меню у футері', 'wp-hunter' ),
		)
	);

}
add_action( 'after_setup_theme', 'wp_hunter_setup' );

У header.php:

<?php if ( has_nav_menu( 'primary' ) ) : ?>

	<nav class="header-nav" aria-label="<?php esc_attr_e( 'Головна навігація', 'wp-hunter' ); ?>">

		<?php
		wp_nav_menu(
			array(
				'theme_location' => 'primary',
				'container'      => false,
				'menu_class'     => 'header-menu',
				'fallback_cb'    => false,
			)
		);
		?>

	</nav>

<?php endif; ?>

І у footer.php:

<?php
wp_nav_menu(
	array(
		'theme_location' => 'footer',
		'container'      => false,
		'menu_class'     => 'footer-menu',
		'fallback_cb'    => false,
	)
);
?>

Цього достатньо для реалізації стандартної системи меню у власній WordPress-темі.

А як щодо Block Themes?

Важливо розділяти класичні та блокові WordPress-теми.

Для classic themes WordPress рекомендує систему:

register_nav_menus()

wp_nav_menu()

У повноцінних Block Themes навігація будується переважно через блок Navigation (core/navigation) у Site Editor, тому вручну реєструвати PHP-позиції меню зазвичай не потрібно.

Якщо ж ви розробляєте власну класичну або hybrid-тему з header.php, footer.php та PHP-шаблонами, register_nav_menus() і wp_nav_menu() залишаються простим і зручним рішенням.

Підсумок

Для роботи з меню у класичній WordPress-темі достатньо двох основних функцій:

register_nav_menus();

— реєструє позиції меню;

wp_nav_menu();

— виводить меню у потрібному місці шаблону.

А зв’язок між ними відбувається через:

theme_location

Наприклад:

'primary'

реєструємо у functions.php, а потім цю ж позицію передаємо в wp_nav_menu().

Такий підхід дозволяє залишити структуру навігації керованою через WordPress, а HTML, CSS та логіку відображення — повністю контролювати на рівні власної теми.