Как добавить собственные элементы в определенное меню WordPress

Меню в WordPress — вещь реально замечательная. Drag’n’drop интерфейс упрощает жизнь как разработчикам тем, так и конечным пользователям. В предыдущих статьях уже рассматривались добавление собственных меню и его стилизация. Есть только лишь одна вещь, ограничивающая меню — можно добавлять исключительно ссылки (на страницы, рубрики или собственные ссылки). А если нужно добавить собственный элемент? Возможно, это будет строка поиска, или ссылка для вход/выхода в профиль пользователя, текущая дата или что-то еще… И то, что для этого всего нет визуального интерфейса, не означает, что это невозможно. В этой статье покажу, как использовать хук em>wp_nav_menu_items для добавления собственных элементов во все меню на сайте, или только в определенные вами.

Внимание: Статья больше ориентирована на разработчиков тем для CMS WordPress, поэтому предполагаются хотя бы базовые знания html/css и четкого понимания того, как работает CMS WordPress.
Очевидно, что у вас должны быть включены меню в теме.

Начнем с основного. Нам нужно добавить собственный фильтр в хук wp_nav_menu_items. Пример должен выглядеть так:

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if (is_single() && $args->theme_location == 'primary') {
        $items .= '<li>Что угодно</li>';
    }
    return $items;
}

Как мы видим, можно использовать условные операторы наряду с аргументом theme_location. Это позволяем вам указать определенное расположение меню с любым необходимым условием. Если вам не нужны условные операторы, то и использовать их необязательно. Просто добавьте определенное местоположение для меню, или наоборот…

Теперь, когда вы увидели общий пример, давайте рассмотрим определенные варианты того, как работают собственные элементы в меню.

Добавляем ссылки Войти/Выйти

Если вы хотите предоставить вашим пользователям возможность логиниться/разлогиниваться, то можно добавить эти ссылки в свои меню. Сниппет ниже отобразит «Войти/Выйти» пользователям в определенном меню: primary. Можно его изменить при необходимости.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. wp_logout_url() .'">Выйти</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Войти</a></li>';
    }
    return $items;
}

Добавляем поле поиска

Хотите поиск в своем меню? Пожалуйста! Вставляем следующий сниппет:

add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2);
function add_search_box_to_menu( $items, $args ) {
    if( $args->theme_location == 'primary' )
        return $items."<li class='menu-header-search'><form action='http://site.ru/' id='searchform' method='get'><input type='text' name='s' id='s' placeholder='Поиск'></form></li>";

    return $items;
}

Добавляем сегодняшнюю дату

Сниппет ниже добавит текущую дату в ваше меню. Сам формат даты настраивается в date(‘l jS F Y‘) (стандартная php-функция)

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {
		
		$todaysdate = date('l jS F Y');
        $items .=  '<li>' . $todaysdate .  '</li>';

	}
    return $items;
}

Надеюсь, статья будет полезна начинающим разработчикам тем для расширения функционала своих творений.