Хук nav_menu_link_attributes в WordPress позволяет разработчикам изменять HTML-атрибуты элемента меню <a> (например, title, target, rel, href). Благодаря этому хуку можно добавлять кастомные классы, менять цели ссылки или добавлять любые другие атрибуты для управления внешним видом и поведением ссылок.
apply_filters( 'nav_menu_link_attributes', array $atts, WP_Post $menu_item, stdClass $args, int $depth );
Описание параметров
$atts(array): Ассоциативный массив HTML-атрибутов для элемента<a>, например:title— Атрибут заголовка.target— Цель открытия ссылки.rel— Атрибут для описания отношения к целевой странице.href— Ссылка.aria-current— Атрибут для текущего состояния.
$menu_item(WP_Post): Объект текущего пункта меню.$args(stdClass): Объект с аргументамиwp_nav_menu().$depth(int): Уровень вложенности пункта меню.
Этот фильтр выполняется для каждого элемента меню отдельно, что дает гибкость при управлении атрибутами каждого пункта.
Пример 1: Открытие всех внешних ссылок в новом окне
Чтобы обеспечить открытие внешних ссылок в новом окне, мы можем добавить атрибут target="_blank" ко всем ссылкам, которые ведут на сторонние сайты:
add_filter( 'nav_menu_link_attributes', 'open_external_links_in_new_tab', 10, 4 );
function open_external_links_in_new_tab( $atts, $menu_item, $args, $depth ) {
if ( strpos( $atts['href'], home_url() ) === false ) {
$atts['target'] = '_blank';
}
return $atts;
}
Пример 2: Добавление класса для активного пункта меню
Этот пример показывает, как добавить дополнительный класс для текущего активного элемента меню, что полезно для стилизации активной ссылки:
add_filter( 'nav_menu_link_attributes', 'add_active_class_to_current_menu_item', 10, 4 );
function add_active_class_to_current_menu_item( $atts, $menu_item, $args, $depth ) {
if ( $menu_item->current ) {
$class = 'menu-link--active';
$atts['class'] = isset( $atts['class'] ) ? "{$atts['class']} $class" : $class;
}
return $atts;
}
Пример 3: Преобразование всех ссылок меню в относительные
Если необходимо сделать все ссылки меню относительными, можно использовать данный фильтр. Это будет полезно для сайтов, которые переключаются между разными доменами:
add_filter( 'nav_menu_link_attributes', 'make_menu_links_relative', 10, 2 );
function make_menu_links_relative( $atts, $menu_item ) {
$atts['href'] = str_replace( home_url(), '', $menu_item->url );
return $atts;
}
Пример 4: Добавление атрибутов для открытия попапа при клике
Этот пример показывает, как добавить атрибуты для открытия модального окна при нажатии на определенные элементы меню. Мы предполагаем, что есть JavaScript-код, который отслеживает ссылки с классом js-open-modal и открывает модальное окно на основе атрибута data-modal:
add_filter( 'nav_menu_link_attributes', function ( $atts, $menu_item ) {
if ( empty( $menu_item->classes ) ) {
return $atts;
}
foreach ( $menu_item->classes as $class ) {
if ( strpos( $class, 'modal-window-' ) !== false ) {
$atts['class'] = isset( $atts['class'] ) ? "{$atts['class']} js-open-modal" : 'js-open-modal';
$atts['data-modal'] = preg_replace( '/[^0-9]/', '', $class );
break;
}
}
return $atts;
}, 10, 2 );
Заключение
Хук nav_menu_link_attributes предоставляет мощный инструмент для настройки ссылок в меню WordPress, что особенно полезно для гибкого управления атрибутами HTML. С его помощью можно добавлять кастомные классы, изменять цели ссылок, добавлять атрибуты для взаимодействия с JavaScript и многое другое, позволяя настроить поведение элементов меню под различные нужды сайта.