nav_menu_link_attributes │ хук-фільтр │ WP 3.6.0

Дозволяє змінити 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 HTML attributes applied to menu menu's `<a>` element, empty strings є ignored.
 * @param WP_Post $menu_item Текущее меню елемент об'єкта.
 * @param stdClass $args An object of wp_nav_menu() arguments.
 * @param int $depth Відомості про меню. Використовується для 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)

Об’єкт поточного меню. Приклад:

WP_Post Object
(
	[ID] => 265
	[post_author] => 1
	[post_date] => 2018-04-07 09:45:46
	[post_date_gmt] => 2018-04-07 06:45:46
	[post_content] =>
	[post_title] => Зворотній зв'язок
	[post_excerpt] =>
	[post_status] => publish
	[comment_status] => closed
	[ping_status] => closed
	[post_password] =>
	[post_name] => 265
	[to_ping] =>
	[pinged] =>
	[post_modified] => 2018-04-19 00:20:29
	[post_modified_gmt] => 2018-04-18 21:20:29
	[post_content_filtered] =>
	[post_parent] => 0
	[guid] => http://wp-test.ru/?p=265
	[menu_order] => 1
	[post_type] => nav_menu_item
	[post_mime_type] =>
	[comment_count] => 0
	[filter] => raw
	[db_id] => 265
	[menu_item_parent] => 0
	[object_id] => 214
	[object] => page
	[type] => post_type
	[type_label] => Сторінка
	[url] => http://wp-test.ru/post-99
	[title] => Зворотній зв'язок
	[target] =>
	[attr_title] =>
	[description] =>
	[classes] => Array
		(
			[0] =>
			[1] => menu-item
			[2] => menu-item-type-post_type
			[3] => menu-item-object-page
		)

	[xfn] =>
	[current] =>
	[current_item_ancestor] =>
	[current_item_parent] =>
)

$args (stdClass)

Об’єкт з аргументами функції wp_nav_menu() . Приклад:

stdClass Object
(
	[menu] => WP_Term Object
		(
			[term_id] => 21
			[name] => Моє перше меню
			[slug] => moe-pervoe-menu
			[term_group] => 0
			[term_taxonomy_id] => 21
			[taxonomy] => nav_menu
			[description] =>
			[parent] => 0
			[count] => 3
			[filter] => raw
		)

	[container] => div
	[container_class] =>
	[container_id] =>
	[menu_class] => primary-menu
	[menu_id] =>
	[echo] => 1
	[fallback_cb] => wp_page_menu
	[before] =>
	[after] =>
	[link_before] =>
	[link_after] =>
	[items_wrap] => <ul id="%1$s" class="%2$s">%3$s</ul>
	[item_spacing] => preserve
	[depth] => 0
	[walker] =>
	[theme_location] => primary
)

$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);