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

WordPress — настолько удобная платформа, что даже новички могут довольно быстро создать сайт . Однако в этой статье мы нацелены на аудиторию, обладающую знаниями о кодах и шорткодах (HTML, CSS, PHP и т. д.). Причина этого в том, что добавить пользовательские элементы в меню WordPress немного сложно.

Однако, даже если вы новичок, вы можете продолжить чтение этой статьи. Мы собираемся показать вам примеры того, как добавлять пользовательские элементы в меню вашего сайта — и сделаем этот процесс максимально простым.

Как настроить меню WordPress

Некоторые примеры настраиваемых элементов для вашего веб-сайта WordPress включают использование панели поиска, наличие параметров входа и выхода, а также отображение текущей даты (вместо ежемесячного календаря на боковой панели).

Фактически, вы можете найти темы WordPress, которые содержат виджеты для всех вышеупомянутых элементов. Однако, если вы очень щепетильно относитесь к уникальности и уделяете приоритетное внимание пользовательскому опыту, когда они посещают ваш веб-сайт, вы можете выбрать создание настраиваемых элементов для меню вашего сайта.

В следующем разделе мы научим вас создавать собственные элементы для меню WordPress. Обратите внимание, что для достижения этой цели мы в основном будем использовать ловушку wp_nav_menu_items.

Шаги по созданию пользовательских элементов для вашего меню WordPress

1. Прежде всего, включите функцию Custom Menu в вашей текущей теме.
2. Затем нам нужно добавить фильтр в ловушку wp_nav_menu_items (для этого требуются коды и шорткоды). В коды включены условия (в форме условных операторов) и местоположение (где разместить элемент в вашем меню).
3. Сохраните изменения, которые вы только что внесли в раздел ловушки 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 .= '</pre>
<ul>
<li>Добавьте что-нибудь здесь</li>
</ul>
<pre>
 
';
    }
    return $items;
}

Как добавить сегодняшнюю дату в меню WordPress

Хотя большинство тем WordPress содержат виджет календаря, вам может потребоваться опция сегодняшней даты в одной из настроек меню. Ниже приведен пример фрагмента кода для создания элемента сегодняшней даты. Опять же, вы можете использовать его как есть или дополнительно настроить в соответствии с вашими требованиями.

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 .=  '</pre>
<ul>
<li>' . $todaysdate . '</li>
</ul>
<pre>
 
';
 
    }
    return $items;
}

Как создать пункт меню входа/выхода

Если у вас есть сайт с панелью входа для зарегистрированных пользователей, необходимы ссылки для входа и выхода. Ниже приведен пример фрагмента кода входа/выхода, настроенного для размещения в основном меню вашей темы. Вы можете скопировать коды напрямую или дополнительно настроить их (например, вы можете изменить местоположение).

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 .= '</pre>
<ul>
<li><a href="'. wp_logout_url() .'">Выход</a></li>
</ul>
<pre>
 
';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '</pre>
<ul>
<li><a href="'. site_url('wp-login.php') .'">Вход</a></li>
</ul>
<pre>
';
    }
    return $items;
}

Стоит ли добавлять настраиваемые элементы в меню WordPress?

Хотя темы WordPress и без того красивы и функциональны, некоторые люди просто чувствуют необходимость дополнительной настройки своих тем.

В этом посте мы предоставили образцы, которые могут быть использованы разработчиками тем. Пользователи WordPress, которые просто хотят сделать свои сайты более эффективными и полезными для своей аудитории, тоже получат пользу от этой статьи.

Редактор: AndreyEx