Skip to content

Wszystko o WordPressie, tworzeniu stron — i nie tylko

🔑 Przycisk logowania i wylogowania w menu WordPress: 2 działające sposoby

🔑 Przycisk logowania i wylogowania w menu WordPress: 2 działające sposoby

Potrzebują Państwo przycisku „Zaloguj się" w menu, który sam zmienia się na „Wyloguj się" po autoryzacji? To zadanie pojawia się na co drugiej stronie z rejestracją: forach, sklepach internetowych, LMS, portalach membership, a nawet blogach z komentarzami.

Wcześniej zamykała je wtyczka baw-login-logout-menu. W czerwcu 2025 autor poprosił o usunięcie z katalogu WordPress.org, wtyczka nie była aktualizowana od 9 lat, używała usuniętej z PHP 8 funkcji create_function i zawierała podatność XSS. W praktyce dwie z trzech stron, na których ją spotykaliśmy, przeszły już na nowoczesne rozwiązania.

Poniżej dwa działające sposoby, które robią dokładnie to samo: szybko przez wtyczkę i całkowicie własnym kodem. Oba sprawdzone na aktualnych wersjach WordPress i PHP.

💡 Szybki przegląd:

  • Zainstaluj wtyczkę Login Logout Menu, przeciągnij element do menu i skonfiguruj przekierowania.
  • Dodaj filtr wp_nav_menu_items w functions.php motywu potomnego dla pełnej kontroli.
  • Podłącz ikony Font Awesome przez Better Font Awesome lub linią wp_enqueue_style.

Sposób 1: wtyczka Login Logout Menu, szybko i bez kodu

Nowoczesny zamiennik martwego baw-login-logout-menu, wtyczka Login Logout Menu od WPBrigade. Wersja 1.5.2, kompatybilna z WordPress 6.9 i PHP 8.3. W przeciwieństwie do poprzednika, nie wymaga czarów z #bawloginout# w polu URL, wszystko działa przez natywny interfejs menu.

Ustawienia logowania i wylogowania w menu WordPress przez wtyczkę

Zainstaluj przez Wtyczki → Dodaj nową, wpisz w wyszukiwarkę login-logout-menu. Po aktywacji otwórz Wygląd → Menu. W lewej kolumnie pojawi się blok Login/Logout/Register/Profile z sześcioma elementami. Najpopularniejszy, Login | Logout: automatycznie pokazuje „Zaloguj się" gościowi i „Wyloguj się" zalogowanemu.

Przeciągnij go do wybranego menu. Rozwiń dodany element i wpisz URL do przekierowania po zalogowaniu i po wylogowaniu. Pozostaw pola puste, a użytkownik zostanie na tej samej stronie. Wskaż /my-account/, a po zalogowaniu trafi do panelu klienta.

Wtyczka dodaje również elementy „Register", „Profile", „Username" i „Reset Password". Są opcjonalne, ale dla strony membership profil i rejestracja w menu są na miejscu.

  • Plusy: zero kodu, konfiguracja w minutę, działa z każdym menu blokowym i klasycznym.
  • Minusy: kolejna wtyczka w panelu administracyjnym. Dla 90% stron to nie problem.
  • Cena: bezpłatnie, pobierz na WordPress.org.

Sposób 2: filtr wp_nav_menu_items, pełna kontrola nad znacznikami

Jeśli nie chcą Państwo instalować wtyczki dla jednego przycisku, zadanie rozwiązuje filtr wp_nav_menu_items. Kod dodaje się w functions.php motywu potomnego lub przez wtyczkę Code Snippets. W motywie głównym plik zostanie nadpisany podczas aktualizacji.

Dodaj w functions.php motywu potomnego:

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}

Filtr wp_nav_menu_items uruchamia się podczas wyświetlania każdego menu. Sprawdzenie theme_location jest potrzebne, aby przycisk pojawił się tylko w jednym miejscu, a nie we wszystkich menu naraz. is_user_logged_in() określa status: true dla zalogowanego, false dla gościa. Funkcje wp_login_url() i wp_logout_url() zwracają poprawne adresy URL z tokenem nonce, bezpieczniej niż wpisany na sztywno /wp-login.php.

Przycisk logowania w menu WordPress z ikoną

Po dodaniu kodu w menu pojawi się tekstowy link „Zaloguj się" lub „Wyloguj się". Bez dodatkowych stylów dziedziczy on formatowanie motywu.

Przycisk wylogowania w menu WordPress z ikoną
  • Zalety: zero wtyczek, pełna kontrola nad HTML i CSS.
  • Wady: trzeba znać theme_location menu. Jeśli Pan/Pani nie zna, proszę otworzyć header.php motywu, znaleźć wywołanie wp_nav_menu() i sprawdzić parametr theme_location. Najczęściej jest to primary, header lub main.
  • Cena: bezpłatnie, kod jest Pana/Pani.

Bonus: ikony Font Awesome dla przycisków logowania i wylogowania

Tekstowe „Zaloguj się" i „Wyloguj się" działają, ale przycisk z ikoną jest bardziej widoczny. Najprostsza droga to wtyczka Better Font Awesome (ponad 200 000 instalacji). Proszę zainstalować, aktywować, ikony są dostępne od razu, wtyczka sama pobiera najnowszą wersję.

Dla metody kodowej dodamy ikony FA 6 bezpośrednio do znaczników filtra:

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}

Klasy fa-solid fa-user i fa-solid fa-right-from-bracket, aktualna składnia Font Awesome 6. Stare fa fa-user / fa fa-sign-out działają siłą rozpędu, ale na świeżych kompilacjach mogą się nie wyświetlić.

Jeśli nie chce Pan/Pani instalować osobnej wtyczki do ikon, proszę podłączyć FA jedną linijką w 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});

Konfiguracja przekierowań po logowaniu i wylogowaniu

Obie metody domyślnie zwracają użytkownika tam, gdzie był. Czasem jednak potrzebne jest coś innego: po logowaniu do panelu klienta, po wylogowaniu na stronę główną.

Pola przekierowań w ustawieniach wtyczki Login Logout Menu

We wtyczce Login Logout Menu pola przekierowania znajdują się bezpośrednio w ustawieniach pozycji menu, proszę rozwinąć dodaną pozycję i wpisać URL.

Dla metody kodowej wp_login_url() przyjmuje parametr $redirect, czyli URL, na który wysłać po zalogowaniu. wp_logout_url() działa tak samo:

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

Jeśli logika przekierowań jest bardziej złożona, różne strony dla różnych ról, śledzenie przejść, proszę podłączyć Redirection. Dwa miliony instalacji, ocena 4,5, praktycznie standard branżowy dla WordPressa. Wtyczka nie dotyczy przycisku logowania, ale zarządzania wszystkimi przekierowaniami: 301/302, śledzenie 404, import z CSV.

Panel zarządzania przekierowaniami Redirection w WordPress

⁉️🤔 Często zadawane pytania

Czy można zrobić przycisk całkowicie bez wtyczek i bez edycji kodu?

Tak, ale tylko w motywach, gdzie menu pozwala wybrać „Zaloguj się" z gotowej listy. Proszę sprawdzić w Wygląd → Menu zakładkę „Linki niestandardowe": w Astra, GeneratePress i Kadence taka opcja istnieje. Jeśli nie ma listy rozwijanej, proszę użyć sposobu 2 z filtrem. Nie jest on trudniejszy niż podmiana linku.

Dlaczego stara wtyczka baw-login-logout-menu zniknęła z katalogu?

Autor poprosił o zamknięcie w czerwcu 2025. Wtyczka nie była aktualizowana od 9 lat, używała usuniętej z PHP 8 funkcji create_function i zawierała podatność XSS. Jeśli nadal jest na stronie, proszę ją usunąć i zastąpić tą samą wtyczką Login Logout Menu: ustawienia nie zostaną przeniesione, ale sam przycisk konfiguruje się od nowa w minutę.

Jak zrobić przycisk z ikoną bez osobnej wtyczki do ikon?

Proszę podłączyć Font Awesome przez wp_enqueue_style (linijka w sekcji bonusowej powyżej) i dodać tag <i> z odpowiednią klasą wewnątrz linku w filtrze. Ikona fa-user dla logowania, fa-right-from-bracket dla wylogowania. Proszę stylizować przez klasy CSS menu-item-login i menu-item-logout.

Co zrobić, jeśli menu jest tworzone w edytorze blokowym (FSE)?

W motywach blokowych (Twenty Twenty-Four, Ollie) menu buduje się przez edytor witryny, a nie przez klasyczne Wygląd → Menu. Wtyczka Login Logout Menu nie współpracuje jeszcze z menu blokowym. Proszę użyć sposobu 2 z filtrem, wp_nav_menu_items jest wywoływany również w motywach blokowych, jeśli menu jest renderowane przez blok nawigacji.

Czy bezpiecznie jest pobierać Font Awesome z CDN na produkcyjnej witrynie?

Cloudflare CDN dla Font Awesome, jeden z najbardziej niezawodnych publicznych CDN, obsługuje miliardy żądań dziennie. Jeśli potrzebna jest pełna kontrola, proszę pobrać tylko potrzebne ikony (user, right-from-bracket) i załadować je lokalnie w motywie. Dla większości witryn wariant CDN jest prostszy i nie stwarza problemów.

Co wybrać do swojego zadania?

Jeśli na stronie jest rejestracja, forum, sklep, LMS, portal członkowski, przycisk logowania i wylogowania w menu oszczędza użytkownikowi kliknięcia i zmniejsza odrzucenia z powodu „nie mogłem znaleźć, jak się zalogować".

Wybór między sposobami jest prosty:

  • Potrzebuje Pan/Pani szybko i bez kodu, proszę zainstalować tę wtyczkę. Jest aktywnie wspierana, lekka, nie koliduje z motywami.
  • Chce Pan/Pani ograniczyć wtyczki do minimum lub potrzebne jest niestandardowe ostylowanie, proszę użyć filtra wp_nav_menu_items. Pięć linii PHP i przycisk wygląda dokładnie tak, jak zaplanowano.

Jeśli chodzi o ikony, Better Font Awesome pokrywa większość scenariuszy. Jeśli nie instaluje Pan/Pani wtyczki, jedna linia wp_enqueue_style rozwiązuje sprawę. Redirection proszę włączać, gdy logika przekierowań jest bardziej złożona niż „po zalogowaniu do panelu, po wylogowaniu na stronę główną", w prostym przypadku wystarczy wp_login_url( $redirect ).

Oba sposoby są przetestowane na motywach Astra, GeneratePress, Kadence oraz standardowych motywach WordPress. Piętnaście minut i przycisk w menu żyje własnym życiem: gość widzi „Zaloguj się", użytkownik „Wyloguj się".