nav_menu_link_attributes
Позволяет изменить HTML атрибуты <a> элемента меню: title, target, rel, href.
По умолчанию эти атрибуты устанавливаются в админке в разделе редактирования меню:
Атрибут href
является ссылкой и назначается автоматически на основе выбранного элемента (запись, рубрика и т.д.) или указывается вручную, если выбран элемент "Произвольная ссылка".
Использование
add_filter( 'nav_menu_link_attributes', 'wp_kama_nav_menu_link_attributes_filter', 10, 4 ); /** * Function for `nav_menu_link_attributes` filter-hook. * * @param array $atts The HTML attributes applied to the menu item's `<a>` element, empty strings are ignored. * @param WP_Post $menu_item The current menu item object. * @param stdClass $args An object of wp_nav_menu() arguments. * @param int $depth Depth of menu item. Used for padding. * * @return array */ function wp_kama_nav_menu_link_attributes_filter( $atts, $menu_item, $args, $depth ){ // filter... return $atts; }
- $atts(массив)
HTML атрибуты <a> элемента меню. Атрибуты с пустыми значениями не будут выведены на экран.
-
$title(строка)
Атрибут title. Например "Этот пункт очень важный". -
$target(строка)
Атрибут target. Например_blank
. -
$rel(строка)
Атрибут rel. Напримерnofollow
. - $href(строка)
Атрибут href.
-
- $item(WP_Post)
Объект текущего пункта меню. Пример:
- $args(stdClass)
Объект с аргументами из функции wp_nav_menu(). Пример:
- $depth(число)
- Уровень пункта меню. Добавлен в версии 4.1.0. Используется для отступов. Верхние пункты меню имеют $depth = 0, вложенные в них $depth = 1 и так далее.
Примеры
#1 Открывать внешние ссылки в отдельной вкладке
add_filter( 'nav_menu_link_attributes', 'change_nav_menu_link_attributes' ); function change_nav_menu_link_attributes( $atts ) { if ( strpos( $atts['href'], home_url() ) === false ) { $atts['target'] = '_blank'; } return $atts; }
#2 Добавляет атрибут class активной ссылке
Этот пример показывает как можно дополнить список классов у элемента меню WordPress и добавить туда свой класс к текущему активному элементу меню.
// Добавляем классы ссылкам add_filter( 'nav_menu_link_attributes', 'filter_nav_menu_link_attributes', 10, 4 ); function filter_nav_menu_link_attributes( $atts, $item, $args, $depth ) { if ( $item->current ) { $class = 'menu-link--active'; $atts['class'] = isset( $atts['class'] ) ? "{$atts['class']} $class" : $class; } return $atts; }
#3 Сделать все ссылки в меню относительными
Учитываем, что если будет ссылка на сторонний сайт wp_make_link_relative() её нужно пропустить.
add_filter( 'nav_menu_link_attributes', 'change_nav_menu_atts', 10, 2 ); function change_nav_menu_atts( $atts, $item ) { $atts['href'] = str_replace( home_url(), '', $item->url ); return $atts; }
#4 Добавить к ссылкам атрибуты для открытия попапа по клику
Пусть у нас есть js скрипт, который мониторит ссылки с классом js-open-modal
и, если по ним кликнули, считывает их атрибут data-modal
и открывает попап под таким номером.
/** * Позволяет ссылкам в меню добавить класс и номер попапа для его открытия при клике. * Укажите у пункта меню в админке класс modal-window-1, чтобы открыть попап #1. Изменяя цифру, изменяете попап. */ 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 ) { if ( isset( $atts['class'] ) ) { $atts['class'] .= ' js-open-modal'; } else { $atts['class'] = 'js-open-modal'; } $atts['data-modal'] = preg_replace( '/[^0-9]/', '', $class ); break; } } return $atts; }, 11, 2 );
Заметки
- C версии 4.1.0 был добавлен параметр $depth.
Список изменений
С версии 3.6.0 | Введена. |
С версии 4.1.0 | The $depth parameter was added. |
Где вызывается хук
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $menu_item, $args, $depth );