Хук wp_nav_menu_items в WordPress позволяет изменять сгенерированный HTML-код пунктов меню перед его отображением. С помощью этого фильтра можно добавлять, удалять или модифицировать элементы меню, что делает его мощным инструментом для кастомизации навигации на сайте.
apply_filters( 'wp_nav_menu_items', string $items, stdClass $args );
Этот фильтр позволяет разработчикам программно вмешиваться в HTML-код меню. Вы можете, например, добавлять дополнительные элементы, такие как формы поиска, или изменять существующие ссылки.
Параметры
$items(строка): HTML-код с элементами меню.$args(объектstdClass): объект с аргументами, переданными функцииwp_nav_menu().
Пример 1: Добавление формы поиска в меню
Этот пример показывает, как добавить форму поиска в меню, которое привязано к области меню с идентификатором header-menu. Вы можете изменять стили формы поиска по своему усмотрению.
add_filter( 'wp_nav_menu_items', 'add_search_form_to_menu', 10, 2 );
function add_search_form_to_menu( $items, $args ) {
if ( 'header-menu' === $args->theme_location ) {
$items .= '<li class="menu-item search-form">' . get_search_form( false ) . '</li>';
}
return $items;
}
Пример 2: Добавление дополнительных пунктов меню в зависимости от статуса пользователя
В этом примере добавляется пункт меню «Мой аккаунт» для авторизованных пользователей и «Вход / Регистрация» для неавторизованных. Этот код также позволяет легко адаптировать меню под разных пользователей.
add_filter( 'wp_nav_menu_items', 'add_account_links_to_menu', 10, 2 );
function add_account_links_to_menu( $items, $args ) {
if ( $args->menu === 'main-navigation' ) {
if ( is_user_logged_in() ) {
$items .= '<li><a href="'. esc_url( get_permalink( get_option('woocommerce_myaccount_page_id') ) ) .'">Мой аккаунт</a></li>';
} else {
$items .= '<li><a href="'. esc_url( wc_get_page_permalink( 'myaccount' ) ) .'">Вход / Регистрация</a></li>';
}
}
return $items;
}
Пример 3: Добавление пользовательского CSS-класса к пунктам меню
С помощью этого примера вы можете добавить класс к определенным пунктам меню, чтобы стилизовать их по своему усмотрению. Например, добавим класс highlight к элементу меню «Специальные предложения».
add_filter( 'wp_nav_menu_items', 'add_custom_class_to_menu_item', 10, 2 );
function add_custom_class_to_menu_item( $items, $args ) {
if ( strpos( $items, 'Специальные предложения' ) !== false ) {
$items = str_replace( 'menu-item-', 'menu-item highlight ', $items );
}
return $items;
}
Пример 4: Добавление ссылки на контактную страницу в меню
Этот пример демонстрирует, как добавить пункт меню «Контакты» в конце списка существующих пунктов.
add_filter( 'wp_nav_menu_items', 'add_contact_link_to_menu', 10, 2 );
function add_contact_link_to_menu( $items, $args ) {
if ( $args->theme_location === 'footer-menu' ) {
$items .= '<li><a href="'. esc_url( get_permalink( get_page_by_path( 'contact' ) ) ) .'">Контакты</a></li>';
}
return $items;
}
Пример 5: Удаление пунктов меню для определенной роли пользователя
Вы можете скрывать пункты меню в зависимости от роли пользователя. В этом примере мы скрываем пункт меню «Административная панель» для пользователей с ролью «подписчик».
add_filter( 'wp_nav_menu_items', 'remove_admin_menu_item_for_subscribers', 10, 2 );
function remove_admin_menu_item_for_subscribers( $items, $args ) {
if ( current_user_can( 'subscriber' ) && strpos( $items, 'Административная панель' ) !== false ) {
$items = str_replace( '<li class="menu-item"><a href="/admin">Административная панель</a></li>', '', $items );
}
return $items;
}
Заключение
Хук wp_nav_menu_items предоставляет разработчикам гибкость в настройке навигации на сайте. Вы можете добавлять новые элементы, изменять существующие, удалять ненужные и кастомизировать внешний вид меню, чтобы соответствовать требованиям вашего проекта. С помощью приведенных примеров вы сможете легко адаптировать меню под нужды своих пользователей и улучшить их взаимодействие с сайтом.