en Реєстрація та виведення меню у WordPress 7.0
Навігаційне меню — один із базових елементів будь-якого сайту на WordPress. Воно допомагає користувачам швидко переходити між основними сторінками, категоріями, розділами магазину, блогом або контактною інформацією. У WordPress 7.0 робота з меню залишається зручною для розробників: ми можемо зареєструвати одну або кілька областей меню в темі, а потім вивести їх у потрібному місці шаблону.
У цій статті розглянемо, як правильно зареєструвати меню у WordPress, як вивести його в header.php, footer.php або іншому шаблоні, а також як додати власні CSS-класи для подальшої стилізації.
Що таке область меню у WordPress
Важливо розуміти різницю між самим меню та областю меню.
Меню — це набір посилань, який адміністратор створює в адмін-панелі WordPress. Наприклад: “Головна”, “Про нас”, “Послуги”, “Блог”, “Контакти”.
Область меню — це місце в темі, куди це меню можна прикріпити. Наприклад: головне меню в шапці сайту, меню у футері або мобільне меню.
Розробник теми реєструє області меню в коді, а адміністратор сайту вже обирає, яке саме меню до якої області прив’язати.
Реєстрація одного меню
Найпростіший приклад — зареєструвати одну область меню для шапки сайту. Для цього потрібно додати код у файл functions.php активної теми.
<?php
add_action( 'after_setup_theme', 'theme_register_menus' );
function theme_register_menus() {
register_nav_menus(
array(
'primary_menu' => esc_html__( 'Головне меню', 'your-theme-textdomain' ),
)
);
}У цьому прикладі:
primary_menu — це системний ідентифікатор області меню. Саме його ми будемо використовувати в коді для виведення меню.
Головне меню — це назва, яку побачить адміністратор у панелі керування WordPress.
your-theme-textdomain — текстовий домен теми. Його варто замінити на власний.
Після додавання цього коду в адмін-панелі WordPress з’явиться нова область меню, до якої можна буде прив’язати створене меню.
Реєстрація кількох меню
На практиці часто потрібно мати не одну, а кілька областей меню. Наприклад, окреме меню для шапки, футера та мобільної версії.
<?php
add_action( 'after_setup_theme', 'theme_register_menus' );
function theme_register_menus() {
register_nav_menus(
array(
'primary_menu' => esc_html__( 'Головне меню', 'your-theme-textdomain' ),
'footer_menu' => esc_html__( 'Меню у футері', 'your-theme-textdomain' ),
'mobile_menu' => esc_html__( 'Мобільне меню', 'your-theme-textdomain' ),
)
);
}
Такий підхід зручний, тому що кожну область можна використовувати в окремому місці теми. Наприклад, primary_menu — у шапці, footer_menu — у нижній частині сайту, а mobile_menu — всередині мобільного бургер-меню.
Виведення меню в шаблоні
Після реєстрації меню його потрібно вивести в потрібному місці теми. Для цього використовується функція wp_nav_menu().
Наприклад, щоб вивести головне меню в header.php, можна використати такий код:
<nav class="site-navigation" aria-label="<?php esc_attr_e( 'Головне меню', 'your-theme-textdomain' ); ?>">
<?php
wp_nav_menu(
array(
'theme_location' => 'primary_menu',
'menu_id' => 'primary-menu',
'menu_class' => 'primary-menu',
'container' => false,
'fallback_cb' => false,
)
);
?>
</nav>
Розберемо основні параметри:
theme_location — вказує, яку саме зареєстровану область меню потрібно вивести.
menu_id — додає ID для елемента <ul>.
menu_class — додає CSS-клас для елемента <ul>.
container — дозволяє вимкнути зайву обгортку навколо меню. Якщо встановити false, WordPress не буде додавати додатковий <div>.
fallback_cb — визначає, що показувати, якщо меню ще не призначене. Значення false означає, що нічого не буде виведено.
У результаті WordPress сформує HTML-структуру меню приблизно такого вигляду:
<nav class="site-navigation" aria-label="Головне меню">
<ul id="primary-menu" class="primary-menu">
<li class="menu-item"><a href="/">Головна</a></li>
<li class="menu-item"><a href="/about/">Про нас</a></li>
<li class="menu-item"><a href="/contacts/">Контакти</a></li>
</ul>
</nav>
Виведення меню у футері
Для футера можна використати окрему область меню. Наприклад, у файлі footer.php:
<nav class="footer-navigation" aria-label="<?php esc_attr_e( 'Меню у футері', 'your-theme-textdomain' ); ?>">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer_menu',
'menu_id' => 'footer-menu',
'menu_class' => 'footer-menu',
'container' => false,
'fallback_cb' => false,
)
);
?>
</nav>
Це дозволяє мати в футері інший набір посилань. Наприклад, там можна розмістити “Політику конфіденційності”, “Умови використання”, “Доставку та оплату”, “Повернення товару” або інші службові сторінки.
Перевірка, чи меню призначене
Іноді потрібно виводити меню тільки тоді, коли воно реально призначене в адмін-панелі. Для цього можна використати функцію has_nav_menu().
<?php if ( has_nav_menu( 'primary_menu' ) ) : ?>
<nav class="site-navigation" aria-label="<?php esc_attr_e( 'Головне меню', 'your-theme-textdomain' ); ?>">
<?php
wp_nav_menu(
array(
'theme_location' => 'primary_menu',
'menu_id' => 'primary-menu',
'menu_class' => 'primary-menu',
'container' => false,
'fallback_cb' => false,
)
);
?>
</nav>
<?php endif; ?>
Це корисно для чистого шаблону: якщо адміністратор ще не створив або не призначив меню, на сторінці не буде зайвої порожньої розмітки.
Базова стилізація меню
Після виведення меню можна додати CSS. Наприклад:
.site-navigation {
display: flex;
align-items: center;
}
.primary-menu {
display: flex;
align-items: center;
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
.primary-menu .menu-item {
position: relative;
}
.primary-menu .menu-item a {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #111;
font-size: 16px;
font-weight: 500;
transition: color 0.25s ease;
}
.primary-menu .menu-item a:hover,
.primary-menu .current-menu-item > a {
color: #0066cc;
}
WordPress автоматично додає до пунктів меню корисні класи, наприклад:
.current-menu-item
.current-menu-parent
.current-menu-ancestor
.menu-item-has-children
Завдяки цьому можна окремо стилізувати активний пункт меню, батьківські елементи або пункти з підменю.
Просте випадаюче підменю
Якщо в меню є вкладені пункти, WordPress автоматично створює підменю з класом sub-menu. Його можна оформити так:
.primary-menu .menu-item-has-children {
position: relative;
}
.primary-menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 20;
min-width: 220px;
margin: 0;
padding: 12px 0;
list-style: none;
background: #fff;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.primary-menu .menu-item-has-children:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.primary-menu .sub-menu a {
display: block;
padding: 10px 16px;
white-space: nowrap;
}
Це базовий варіант для десктопної версії. Для мобільного меню краще використовувати JavaScript, щоб підменю відкривалося по кліку, а не тільки при наведенні.
Виведення меню з власною обгорткою
У деяких випадках потрібно, щоб WordPress сам створив контейнер навколо меню. Наприклад:
<?php
wp_nav_menu(
array(
'theme_location' => 'primary_menu',
'menu_id' => 'primary-menu',
'menu_class' => 'primary-menu',
'container' => 'nav',
'container_class' => 'site-navigation',
'container_id' => 'site-navigation',
'fallback_cb' => false,
)
);
?>
У такому випадку WordPress сам виведе <nav> з потрібними класами та ID. Але в кастомних темах часто зручніше писати обгортку вручну, щоб повністю контролювати HTML-структуру.
Приклад повної реалізації
Нижче — простий готовий приклад для теми WordPress.
Код у functions.php:
<?php
add_action( 'after_setup_theme', 'theme_register_menus' );
function theme_register_menus() {
register_nav_menus(
array(
'primary_menu' => esc_html__( 'Головне меню', 'your-theme-textdomain' ),
'footer_menu' => esc_html__( 'Меню у футері', 'your-theme-textdomain' ),
)
);
}
Код у header.php:
<?php if ( has_nav_menu( 'primary_menu' ) ) : ?>
<nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Головне меню', 'your-theme-textdomain' ); ?>">
<?php
wp_nav_menu(
array(
'theme_location' => 'primary_menu',
'menu_id' => 'primary-menu',
'menu_class' => 'primary-menu',
'container' => false,
'fallback_cb' => false,
)
);
?>
</nav>
<?php endif; ?>
Код у footer.php:
<?php if ( has_nav_menu( 'footer_menu' ) ) : ?>
<nav class="footer-navigation" aria-label="<?php esc_attr_e( 'Меню у футері', 'your-theme-textdomain' ); ?>">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer_menu',
'menu_id' => 'footer-menu',
'menu_class' => 'footer-menu',
'container' => false,
'fallback_cb' => false,
)
);
?>
</nav>
<?php endif; ?>
Де налаштувати меню в адмін-панелі
Після реєстрації областей меню потрібно перейти в адмін-панель WordPress і створити саме меню.
Зазвичай це робиться в розділі:
Вигляд → Меню
Там можна створити нове меню, додати до нього сторінки, записи, категорії або довільні посилання, а потім призначити його до потрібної області: “Головне меню”, “Меню у футері” або іншої зареєстрованої області.
Якщо використовується блокова тема, частина навігації може редагуватися через редактор сайту та блок Navigation. Але для кастомних, класичних і гібридних тем підхід із register_nav_menus() та wp_nav_menu() залишається актуальним і дуже зручним.
Висновок
Реєстрація та виведення меню у WordPress 7.0 — це базовий, але дуже важливий етап розробки теми. Спочатку ми реєструємо одну або кілька областей меню через register_nav_menus(), після цього виводимо потрібну область у шаблоні за допомогою wp_nav_menu().
Такий підхід дозволяє розділити логіку теми та керування контентом. Розробник визначає місця для меню в шаблоні, а адміністратор сайту може самостійно змінювати пункти меню через адмін-панель WordPress без редагування коду.