Skip to content

Все для WordPress, веб-розробки — і не тільки

🔑 Кнопка входу та виходу в меню WordPress: 2 робочих способи

🔑 Кнопка входу та виходу в меню WordPress: 2 робочих способи

Потрібна кнопка «Увійти» в меню, яка сама перетворюється на «Вийти» після авторизації? Задача трапляється на кожному другому сайті з реєстрацією: форуми, інтернет-магазини, LMS, membership-портали, навіть блоги з коментаторами.

Раніше її закривав плагін baw-login-logout-menu. У червні 2025 автор запросив видалення з каталогу WordPress.org, плагін не оновлювався 9 років, використовував вилучену з PHP 8 функцію create_function та містив XSS-вразливість. На практиці два сайти з трьох, де ми його зустрічали, вже переїхали на сучасні рішення.

Нижче два робочі способи, які роблять точно те саме: швидко через плагін і повністю своїм кодом. Обидва перевірені на актуальних версіях WordPress і PHP.

💡 Швидкий огляд:

  • Встановіть плагін Login Logout Menu, перетягніть пункт у меню та налаштуйте редіректи.
  • Додайте фільтр wp_nav_menu_items у functions.php дочірньої теми для повного контролю.
  • Підключіть іконки Font Awesome через Better Font Awesome або рядком wp_enqueue_style.

Спосіб 1: плагін Login Logout Menu, швидко і без коду

Сучасна заміна померлому baw-login-logout-menu, плагін Login Logout Menu від WPBrigade. Версія 1.5.2, сумісний з WordPress 6.9 і PHP 8.3. На відміну від попередника, не потребує шаманства з #bawloginout# у полі URL, усе працює через рідний інтерфейс меню.

Налаштування входу та виходу в меню WordPress через плагін

Встановіть через Плагіни → Додати новий, введіть у пошуку login-logout-menu. Після активації відкрийте Зовнішній вигляд → Меню. У лівій колонці з’явиться блок Login/Logout/Register/Profile із шістьма пунктами. Найходовіший, Login | Logout: він автоматично показує «Увійти» гостю та «Вийти» авторизованому.

Перетягніть його в потрібне меню. Розгорніть доданий пункт і пропишіть URL для редіректу після логіну та після виходу. Залиште поля порожніми, користувач залишиться на тій самій сторінці. Вкажіть /my-account/, після входу потрапить до особистого кабінету.

Плагін додає також пункти «Register», «Profile», «Username» і «Reset Password». Вони опціональні, але для membership-сайту профіль і реєстрація в меню доречні.

  • Плюси: нуль коду, налаштування за хвилину, працює з будь-яким блоковим і класичним меню.
  • Мінуси: ще один плагін в адмінці. Для 90% сайтів це не проблема.
  • Ціна: безплатно, завантажити на WordPress.org.

Спосіб 2: фільтр wp_nav_menu_items, повний контроль над розміткою

Не хочете ставити плагін заради однієї кнопки, задача вирішується фільтром wp_nav_menu_items. Код додається у functions.php дочірньої теми або через плагін Code Snippets. В основній темі файл перезатреться під час оновлення.

Додайте у functions.php дочірньої теми:

1/**
2 * Добавляет кнопку входа/выхода в указанное меню.
3 */
4add_filter( 'wp_nav_menu_items', 'sdstudio_add_loginout_link', 10, 2 );
5
6function sdstudio_add_loginout_link( $items, $args ) {
7 // Замените 'primary' на slug вашего меню
8 if ( 'primary' !== $args->theme_location ) {
9 return $items;
10 }
11
12 if ( is_user_logged_in() ) {
13 $link = '<li class="menu-item menu-item-logout">';
14 $link .= '<a href="' . wp_logout_url( home_url() ) . '">Выйти</a>';
15 $link .= '</li>';
16 } else {
17 $link = '<li class="menu-item menu-item-login">';
18 $link .= '<a href="' . wp_login_url( get_permalink() ) . '">Войти</a>';
19 $link .= '</li>';
20 }
21
22 return $items . $link;
23}

Фільтр wp_nav_menu_items спрацьовує під час виведення кожного меню. Перевірка theme_location потрібна, щоб кнопка з’явилася тільки в одному місці, а не в усіх меню одразу. is_user_logged_in() визначає статус: true для авторизованого, false для гостя. Функції wp_login_url() і wp_logout_url() віддають коректні URL з nonce-токеном, безпечніше, ніж жорстко прописана /wp-login.php.

Кнопка входу в меню WordPress з іконкою

Після додавання коду в меню з’явиться текстове посилання «Увійти» або «Вийти». Без додаткових стилів воно успадковує оформлення теми.

Кнопка виходу в меню WordPress з іконкою
  • Плюси: нуль плагінів, повний контроль над HTML і CSS.
  • Мінуси: потрібно знати theme_location меню. Якщо не знаєте, відкрийте header.php теми, знайдіть виклик wp_nav_menu() і подивіться параметр theme_location. Найчастіше це primary, header або main.
  • Ціна: безплатно, код ваш.

Бонус: іконки Font Awesome для кнопок входу та виходу

Текстові «Увійти» та «Вийти» працюють, але кнопка з іконкою помітніша. Найпростіший шлях, плагін Better Font Awesome (понад 200 000 встановлень). Встановіть, активуйте, іконки доступні одразу, плагін сам підтягує свіжу версію.

Для кодового методу додамо іконки FA 6 прямо в розмітку фільтра:

1if ( is_user_logged_in() ) {
2 $link = '<li class="menu-item menu-item-logout">';
3 $link .= '<a href="' . wp_logout_url( home_url() ) . '">';
4 $link .= '<i class="fa-solid fa-right-from-bracket" aria-hidden="true"></i> Выйти';
5 $link .= '</a></li>';
6} else {
7 $link = '<li class="menu-item menu-item-login">';
8 $link .= '<a href="' . wp_login_url( get_permalink() ) . '">';
9 $link .= '<i class="fa-solid fa-user" aria-hidden="true"></i> Войти';
10 $link .= '</a></li>';
11}

Класи fa-solid fa-user і fa-solid fa-right-from-bracket, актуальний синтаксис Font Awesome 6. Старі fa fa-user / fa fa-sign-out працюють за інерцією, але на свіжих збірках можуть не відобразитися.

Якщо не хочете ставити окремий плагін для іконок, підключіть FA одним рядком у functions.php:

1add_action( 'wp_enqueue_scripts', function() {
2 wp_enqueue_style(
3 'font-awesome',
4 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css'
5 );
6});

Налаштування редіректів після логіну та логауту

Обидва способи за замовчуванням повертають користувача туди ж, де він був. Але іноді потрібне інше: після логіну, в особистий кабінет, після виходу, на головну.

Поля редіректів у налаштуваннях плагіна Login Logout Menu

У плагіні Login Logout Menu поля редіректу є прямо в налаштуваннях пункту меню, розгорніть доданий пункт і пропишіть URL.

Для кодового методу wp_login_url() приймає параметр $redirect, URL, куди відправити після входу. wp_logout_url() працює так само:

1$login_url = wp_login_url( home_url( '/my-account/' ) );
2$logout_url = wp_logout_url( home_url( '/' ) );

Якщо логіка редіректів складніша, різні сторінки для різних ролей, відстеження переходів, підключіть Redirection. Два мільйони встановлень, рейтинг 4,5, практично стандарт індустрії для WordPress. Плагін не про кнопку входу, а про управління всіма редіректами: 301/302, відстеження 404, імпорт із CSV.

Панель керування редіректами Redirection у WordPress

⁉️🤔 Часті запитання

Чи можна зробити кнопку взагалі без плагінів і без правки коду?

Так, але лише в темах, де меню дозволяє вибрати «Увійти» з готового списку. Перевірте в Зовнішній вигляд → Меню вкладку «Довільні посилання»: в Astra, GeneratePress і Kadence така опція є. Якщо випадного списку немає, використовуйте спосіб 2 із фільтром. Він не складніший за заміну посилання.

Чому старий плагін baw-login-logout-menu зник із каталогу?

Автор запросив закриття в червні 2025. Плагін не оновлювався 9 років, використовував вилучену з PHP 8 функцію create_function і містив XSS-уразливість. Якщо він ще стоїть на сайті, видаліть і замініть на той самий Login Logout Menu: налаштування не перенесуться, але сама кнопка налаштовується заново за хвилину.

Як зробити кнопку з іконкою і без окремого плагіна для іконок?

Підключіть Font Awesome через wp_enqueue_style (рядок у бонус-секції вище) і додайте тег <i> з потрібним класом усередину посилання у фільтрі. Іконка fa-user для входу, fa-right-from-bracket для виходу. Стилізуйте через CSS-класи menu-item-login і menu-item-logout.

Що робити, якщо меню збирається в блочному редакторі (FSE)?

У блочних темах (Twenty Twenty-Four, Ollie) меню будується через редактор сайту, а не через класичний Зовнішній вигляд → Меню. Плагін Login Logout Menu з блочним меню поки не працює. Використовуйте спосіб 2 з фільтром, wp_nav_menu_items викликається і в блочних темах, якщо меню рендериться через навігаційний блок.

Чи безпечно тягнути Font Awesome з CDN на бойовому сайті?

Cloudflare CDN для Font Awesome, один із найнадійніших публічних CDN, обслуговує мільярди запитів на день. Якщо потрібен повний контроль, завантажте лише потрібні іконки (user, right-from-bracket) і завантажте в тему локально. Для більшості сайтів CDN-варіант простіший і не створює проблем.

Що обрати під вашу задачу?

Якщо на сайті є реєстрація, форум, магазин, LMS, membership-портал, кнопка входу та виходу в меню економить користувачеві кліки та знижує відмови через «не знайшов як зайти».

Вибір між способами простий:

  • Потрібно швидко і без коду, ставте цей плагін. Активно підтримується, легкий, не конфліктує з темами.
  • Хочете тримати плагіни на мінімумі або потрібне нестандартне верстання, беріть фільтр wp_nav_menu_items. П'ять рядків PHP, і кнопка виглядає рівно так, як задумано.

Для іконок Better Font Awesome покриває більшість сценаріїв. Якщо плагін не ставите, один рядок wp_enqueue_style вирішує питання. Redirection підключайте, коли логіка редіректів складніша за «після входу в кабінет, після виходу на головну», для простого випадку вистачає wp_login_url( $redirect ).

Обидва способи перевірені на темах Astra, GeneratePress, Kadence та стандартних темах WordPress. П'ятнадцять хвилин, і кнопка в меню живе своїм життям: гостю «Увійти», користувачеві «Вийти».