Фильтр nav_menu_item_title в WordPress позволяет разработчикам модифицировать заголовок пункта меню, используя его для добавления дополнительных HTML-элементов, иконок или визуальных эффектов. Этот фильтр особенно полезен при необходимости изменить заголовок отдельных пунктов меню в зависимости от их типа, уровня вложенности или других параметров. Давайте разберем, как это сделать.
apply_filters( 'nav_menu_item_title', string $title, WP_Post $menu_item, stdClass $args, int $depth )
Параметры хука
$title(строка): Текущий заголовок пункта меню.$menu_item(объектWP_Post): Объект пункта меню, содержащий его ID, тип, URL и прочие данные.$args(объектstdClass): Аргументы, переданные в функциюwp_nav_menu().$depth(число): Уровень вложенности пункта меню, где верхний уровень имеет значение 0, а подменю — 1 и выше.
Пример 1: Добавление иконки перед заголовком пункта меню
Этот пример добавляет иконку перед заголовком каждого пункта меню, используя иконки из набора Dashicons:
add_filter( 'nav_menu_item_title', 'add_icon_to_menu_item', 10, 4 );
function add_icon_to_menu_item( $title, $menu_item, $args, $depth ) {
// Добавляем иконку перед заголовком
$icon_html = '<span class="dashicons dashicons-admin-site"></span> ';
return $icon_html . $title;
}
Пример 2: Добавление стрелки для пунктов с подменю
Если у пункта меню есть подменю, можно добавить к его заголовку иконку стрелки вниз, чтобы показать, что он является выпадающим меню.
add_filter( 'nav_menu_item_title', 'add_dropdown_arrow_to_menu_item', 10, 2 );
function add_dropdown_arrow_to_menu_item( $title, $menu_item ) {
// Проверяем, содержит ли пункт меню подменю
if ( in_array( 'menu-item-has-children', $menu_item->classes ) ) {
$title .= ' <span class="dropdown-arrow">▼</span>';
}
return $title;
}
Пример 3: Изменение заголовков для пунктов определенного уровня
Для того чтобы заголовки пунктов меню определенного уровня, например верхнего (где $depth = 0), выделялись визуально, можно использовать следующий код:
add_filter( 'nav_menu_item_title', 'highlight_top_level_menu_item', 10, 4 );
function highlight_top_level_menu_item( $title, $menu_item, $args, $depth ) {
if ( $depth === 0 ) {
$title = '<strong>' . $title . '</strong>';
}
return $title;
}
Пример 4: Добавление класса CSS к заголовкам меню в зависимости от настроек wp_nav_menu()
В этом примере изменим заголовок в зависимости от theme_location (расположения темы), переданного в $args, добавляя CSS-класс, чтобы различать пункты меню, если меню используется в нескольких областях.
add_filter( 'nav_menu_item_title', 'modify_menu_title_based_on_location', 10, 4 );
function modify_menu_title_based_on_location( $title, $menu_item, $args, $depth ) {
if ( isset( $args->theme_location ) && $args->theme_location === 'header_menu' ) {
$title = '<span class="header-menu-item">' . $title . '</span>';
}
return $title;
}
Когда использовать nav_menu_item_title?
Этот фильтр полезен для следующих задач:
- Добавление иконок или визуальных меток к заголовкам пунктов меню.
- Выделение заголовков меню с подменю.
- Настройка заголовков пунктов для разных областей темы.
Заключение
Фильтр nav_menu_item_title — это мощный инструмент для кастомизации заголовков меню в WordPress, который позволяет добавлять к ним стили, иконки и другие элементы, делая меню более привлекательным и информативным для пользователей.