Хук walker_nav_menu_start_el в WordPress позволяет разработчикам изменять начальный HTML-вывод элементов навигационного меню. Этот хук может быть использован для добавления дополнительного HTML-кода, обертывания ссылок в контейнеры и создания динамически генерируемых подменю.
apply_filters( 'walker_nav_menu_start_el', string $item_output, WP_Post $menu_item, int $depth, stdClass $args );
Данный хук позволяет вносить изменения в HTML-код, который генерируется для каждого элемента меню. Он охватывает только часть вывода, связанную с атрибутами, заголовками и окружением ссылки, но не включает открывающие и закрывающие теги <li>.
Параметры
$item_output(строка): HTML-код начального элемента пункта меню.$menu_item(WP_Post): Объект данных элемента меню.$depth(int): Уровень вложенности элемента меню, используемый для управления отступами.$args(stdClass): Объект, содержащий аргументы, переданные вwp_nav_menu().
Пример 1: Обертывание ссылок в контейнер
В этом примере мы добавим обертку для каждой ссылки в меню, используя тег <div>. Это может помочь в стилизации и управлении отображением.
add_filter( 'walker_nav_menu_start_el', 'wrap_links_in_div', 10, 4 );
function wrap_links_in_div( $item_output, $item, $depth, $args ) {
return '<div class="link-wrapper">' . $item_output . '</div>';
}
Пример 2: Добавление кастомного класса к элементам меню
Можно также добавить кастомный класс к каждому элементу меню на основе его ID или класса.
add_filter( 'walker_nav_menu_start_el', 'add_custom_class_to_menu_item', 10, 4 );
function add_custom_class_to_menu_item( $item_output, $item, $depth, $args ) {
if ( $item->ID === 123 ) { // Замените 123 на ваш ID элемента меню
$item_output = str_replace( '<a', '<a class="special-class"', $item_output );
}
return $item_output;
}
Пример 3: Создание кастомного подменю
В этом примере мы добавим кастомное подменю к элементу меню с классом menu-item-target.
<?php
add_filter( 'walker_nav_menu_start_el', 'add_custom_submenu', 10, 4 );
function add_custom_submenu( $item_output, $item, $depth, $args ) {
$menu_item_classes = $item->classes;
if ( empty( $menu_item_classes ) || !in_array( 'menu-item-target', $menu_item_classes ) ) {
return $item_output;
}
ob_start();
?>
<ul class="custom-sub-menu">
<li class="custom-menu-item">
<a href="#custom-url"><?php _e( 'Custom Link', 'text-domain' ); ?></a>
</li>
</ul>
<?php
$custom_sub_menu_html = ob_get_clean();
// Добавляем подменю после основного элемента
$item_output .= $custom_sub_menu_html;
return $item_output;
}
Пример 4: Условное добавление HTML к элементам меню
Этот пример показывает, как можно добавлять HTML-код к элементам меню в зависимости от состояния пользователя (например, авторизован он или нет).
add_filter( 'walker_nav_menu_start_el', 'conditional_html_based_on_user', 10, 4 );
function conditional_html_based_on_user( $item_output, $item, $depth, $args ) {
if ( !is_user_logged_in() && $item->title === 'Private Section' ) {
$item_output .= '<span class="login-required"> (Login Required)</span>';
}
return $item_output;
}
Пример 5: Изменение атрибутов ссылок
Можно также изменить атрибуты ссылок, добавляя к ним, например, target="_blank" для открытия в новой вкладке.
add_filter( 'walker_nav_menu_start_el', 'change_link_attributes', 10, 4 );
function change_link_attributes( $item_output, $item, $depth, $args ) {
if ( $item->ID === 456 ) { // Замените 456 на ваш ID элемента меню
$item_output = str_replace( '<a', '<a target="_blank"', $item_output );
}
return $item_output;
}
Заключение
Хук walker_nav_menu_start_el является мощным инструментом для кастомизации вывода элементов навигационного меню в WordPress. С его помощью можно легко добавлять, изменять или удалять элементы и атрибуты, создавая уникальные и адаптированные под ваши нужды структуры меню. Надеюсь, приведенные примеры помогут вам эффективно использовать этот хук в своих проектах.