Jak stworzyć modalne okno logowania w WordPressie (krok po kroku)

Dodanie modalnego wyskakującego okienka logowania WordPress do Twojej witryny może ułatwić logowanie użytkownikom. Pozwala odwiedzającym logować się bez opuszczania bieżącej strony, co poprawia ich ogólne wrażenia.

Widzieliśmy kilka udanych stron internetowych, które wykorzystały tę funkcję, aby utrzymać zaangażowanie użytkowników i poprawić interakcję na stronie. Jest to prosty, ale skuteczny sposób na usprawnienie procesu logowania.

W tym artykule przeprowadzimy Cię przez kroki tworzenia okna modalnego logowania WordPress.

Dlaczego tworzyć wysuwany formularz logowania w WordPressie?

Powinieneś utworzyć modalne okno logowania, ponieważ sprawia ono, że logowanie jest szybsze i płynniejsze dla użytkowników, bez przekierowywania ich na osobną stronę.

Większość stron internetowych, po kliknięciu przez użytkownika linku logowania, przekierowuje go do domyślnej strony logowania WordPress lub do niestandardowej strony logowania. Po zalogowaniu następuje kolejne przekierowanie.

To tam i z powrotem może wydawać się powolne i zakłócać doświadczenie użytkownika. Modalne okno logowania rozwiązuje ten problem. Otwiera formularz logowania w małym oknie na tej samej stronie.

Użytkownicy mogą logować się natychmiast, a Ty możesz przekierować ich w dowolne miejsce po zalogowaniu. Proces wydaje się szybszy i bardziej profesjonalny, co może poprawić doświadczenie użytkownika, a nawet zwiększyć liczbę konwersji.

Mając to na uwadze, pokażemy Ci, jak łatwo utworzyć modalne okno logowania w WordPressie, korzystając zarówno z darmowej wtyczki, jak i narzędzi premium. Możesz przejść do metody, która najlepiej Ci odpowiada:

Gotowi? Zanurzmy się od razu!

Metoda 1: Utwórz wyskakujące okienko logowania modalnego za pomocą wyskakującego okienka logowania/rejestracji.

W pierwszej metodzie użyjemy wtyczki Login/Signup Popup, darmowej wtyczki, która pozwala użytkownikom łatwo logować się lub rejestrować w Twojej witrynie.

Najpierw musisz zainstalować i aktywować wtyczkę Login/Signup Popup. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.

Po aktywacji możesz przejść do Login/Signup Popup » Ustawienia z panelu administracyjnego WordPress.

W ustawieniach „Ogólne” możesz włączyć rejestrację, automatycznie logować użytkowników po ich rejestracji i obsługiwać resetowanie hasła.

Oprócz tego wtyczka pozwala wybrać rolę użytkownika WordPress, która zostanie przypisana nowo zarejestrowanym użytkownikom. Domyślnie będzie to rola „Subskrybent”.

Jeśli przewiniesz w dół, zobaczysz więcej ustawień. Na przykład, możesz dodać adres URL przekierowania, gdy użytkownik się zaloguje lub zarejestruje.

Nie zapomnij kliknąć przycisku „Zapisz”, jeśli dokonałeś jakichkolwiek zmian.

Następnie możesz przejść do zakładki „Styl” i edytować okno modalne logowania/rejestracji. Wtyczka pozwala zmienić pozycję okna, szerokość, wysokość, kolor tła, kolor tekstu i inne.

Po tym możesz również dostosować pola formularza w wyskakującym okienku modalnym.

Po prostu przejdź do Login/Signup Popup » Pola z panelu administracyjnego WordPress. Tutaj możesz aktywować różne pola formularza, edytować ich etykiety, oznaczyć je jako wymagane i wiele więcej.

Poza tym istnieje również opcja dodania większej liczby pól do wyskakującego okienka logowania/rejestracji.

Po prostu kliknij przycisk „+ Dodaj pole” na górze i wybierz dodatkowe pola formularza do dodania do swojego wyskakującego okienka logowania.

Po dostosowaniu pól formularza możesz teraz dodać wyskakujące okienko logowania modalnego do swojej witryny. Wtyczka oferuje różne sposoby dodawania wyskakującego okienka do swojej witryny.

Dodaj modalne okno logowania do menu

Najpierw możesz przejść do Wygląd » Menu z panelu administracyjnego WordPress.

Po tym zobaczysz pozycje menu „Logowanie/Rejestracja Popup”. Po prostu wybierz pozycje, które chcesz pokazać i kliknij przycisk „Dodaj do menu”.

Więcej szczegółów znajdziesz w naszym przewodniku jak dodać menu nawigacyjne w WordPress.

Dodaj modalne okno logowania jako linki kotwiczące

Następnie możesz dodać #login lub #register na końcu adresu URL Twojej strony internetowej i umieścić wyskakujące okienko logowania jako link wewnętrzny.

Na przykład, aby utworzyć link do logowania, użyłbyś kodu HTML w następujący sposób:

<a href="https://www.myawesomesite.com/#login">Login</a>

Aby to zrobić, możesz edytować post lub stronę.

Gdy już znajdziesz się w edytorze treści, kliknij trzy kropki i wybierz opcję „Edytuj jako HTML”.

Następnie możesz dodać wewnętrzny link do tekstu kotwicy logowania.

Więcej informacji znajdziesz w naszym przewodniku jak dodać linki kotwiczące w WordPress.

Użyj krótkich kodów, aby dodać modalne okno logowania

Innym sposobem dodania okna logowania/rejestracji jest użycie shortcode'ów.

Możesz po prostu wprowadzić krótki kod [xoo_el_action] w dowolnym miejscu na swojej stronie, aby utworzyć link/przycisk otwierający wyskakujące okienko.

Na przykład, możesz przejść do Wygląd » Widżety i dodać blok „Krótki kod”, aby wyświetlić modalne okno logowania w pasku bocznym Twojej witryny.

Po zakończeniu po prostu kliknij przycisk „Zaktualizuj”.

Teraz możesz odwiedzić swoją stronę internetową, aby zobaczyć wyskakujące okienko logowania w akcji.

Metoda 2: Utwórz okno modalne logowania za pomocą WPForms i OptinMonster

Ta metoda jest świetna dla tych, którzy chcą mieć większą kontrolę nad wyglądem i działaniem swojego wyskakującego okienka logowania.

Używanie WPForms i OptinMonster razem daje potężne opcje projektowania, zaawansowane zasady wyświetlania (takie jak wyświetlanie okna po kliknięciu przez użytkownika określonego linku) i lepszą integrację z usługami e-mail marketingu.

WPForms to najlepsza wtyczka do formularzy kontaktowych WordPress, a do uzyskania dostępu do dodatku „Rejestracja użytkowników” będziesz potrzebować co najmniej ich planu Pro.

OptinMonster to najlepsza wtyczka do tworzenia okien pop-up w WordPress na rynku. Pomaga przekształcić odwiedzających witrynę w subskrybentów i klientów. W WPBeginner wielokrotnie używaliśmy jej do tworzenia interaktywnych okien pop-up i mieliśmy doskonałe doświadczenia. Więcej szczegółów znajdziesz w naszej pełnej recenzji OptinMonster.

Pamiętaj, że będziesz potrzebować co najmniej planu Plus, aby uzyskać dostęp do funkcji MonsterLinks narzędzia, którą pokazujemy w tym artykule.

Używanie WPForms do tworzenia formularza logowania użytkownika

Najpierw zainstalujmy i aktywujmy wtyczkę WPForms. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku jak zainstalować wtyczkę WordPress.

Po aktywacji musisz przejść do WPForms » Ustawienia z panelu administratora WordPress i wprowadzić licencję.

Klucz znajdziesz w obszarze konta WPForms.

Następnie przejdź do WPForms » Dodatki, aby zainstalować i aktywować „Dodatek Rejestracja użytkownika”.

Po aktywacji dodatku przejdź do WPForms » Dodaj nowy i utwórz nowy formularz.

Na następnym ekranie najpierw musisz nazwać swój formularz.

Następnie wybierzesz gotowy szablon formularza z galerii szablonów. Możesz użyć paska wyszukiwania, aby łatwo znaleźć szablon „Formularz logowania użytkownika”.

Po jego znalezieniu możesz kliknąć przycisk „Użyj szablonu”.

Ten szablon formularza logowania zawiera pola e-mail i hasło, które będą działać podobnie do domyślnego formularza logowania WordPress.

Możesz przeciągać i upuszczać dowolne dodatkowe pola z lewej strony ekranu, w razie potrzeby.

Następnie możesz kliknąć pole „Hasło”, a opcje pola pojawią się po lewej stronie.

Możesz dodać poniższy kod do pola opisu pola „Hasło”, aby wyświetlić opcje takie jak „zapomniałem hasła” i „rejestracja użytkownika”.

Can't remember your password? <a href="{url_lost_password}">Click here</a>. Don't have an account? <a href="{url_register}">Register here</a>.

Następnie musisz kliknąć przycisk „Zapisz”, aby zachować zmiany, i możesz opublikować formularz.

Aby rozpocząć, możesz po prostu kliknąć przycisk „Osadź”.

Otworzy się okno podręczne z opcjami dodania formularza logowania.

Wybierz opcję „użyj krótkiego kodu”. Pojawi się ona jako link w oknie, a nie jako przycisk.

Powinieneś teraz zobaczyć kod osadzania dla swojego formularza.

Tutaj będziesz chciał skopiować krótki kod i zapisać go do późniejszego wykorzystania.

Tworzenie wyskakującego okienka modalnego za pomocą OptinMonster

W tym momencie Twój formularz logowania jest gotowy. Następnym krokiem jest utworzenie wyskakującego okienka modalnego za pomocą OptinMonster.

Najpierw musisz odwiedzić stronę internetową OptinMonster i zarejestrować konto.

Następnie musisz zainstalować i aktywować wtyczkę OptinMonster. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku jak zainstalować wtyczkę WordPress.

Wtyczka działa jako łącznik między Twoją witryną WordPress a OptinMonster.

Po aktywacji powinieneś zobaczyć ekran powitalny. Kliknij przycisk „Połącz istniejące konto”.

Otworzy się nowe okno.

Po prostu kliknij przycisk „Połącz z WordPress”.

Po połączeniu będziesz gotowy do utworzenia swojego wyskakującego okienka modalnego.

Po prostu przejdź do sekcji OptinMonster w obszarze administracyjnym WordPress i kliknij przycisk „Utwórz swoją pierwszą kampanię”.

Na następnym ekranie wybierzesz kampanię i szablon.

Ponieważ tworzymy wyskakujące okienko modalne, wybierzmy „Popup” jako typ kampanii.

Jeśli chodzi o szablony, OptinMonster oferuje wiele gotowych szablonów, dzięki czemu możesz szybko dostosować jeden z nich w razie potrzeby.

Po wybraniu szablonu otworzy się okno podręczne. Zostaniesz poproszony o dodanie nazwy do swojej kampanii.

Po wprowadzeniu nazwy możesz kliknąć przycisk „Rozpocznij tworzenie”.

Po wykonaniu tej czynności zostaniesz przekierowany do kreatora kampanii OptinMonster.

Możesz dodawać różne bloki do swojego szablonu z menu po lewej stronie. Zatem dodaj blok WPForms.

Po tym powinieneś zobaczyć opcje bloku WPForms w menu po lewej stronie.

Możesz wybrać formularz logowania, który właśnie utworzyłeś, z menu rozwijanego „Wybór formularza”.

Jeśli nie widzisz swojego formularza, po prostu wybierz opcję „Dodaj krótki kod ręcznie” i wprowadź krótki kod, który skopiowałeś wcześniej podczas tworzenia formularza w WPForms.

Nie martw się, jeśli nie możesz wyświetlić podglądu formularza w kreatorze kampanii; formularz pojawi się po opublikowaniu kampanii.

Następnie możesz przejść do zakładki „Zasady wyświetlania”. OptinMonster oferuje zaawansowane opcje targetowania.

Stąd wybierz regułę wyświetlania „MonsterLink™” (po kliknięciu).

Po wybraniu opcji powinieneś zobaczyć MonsterLink jako regułę wyświetlania.

Kliknij przycisk „Kopiuj kod MonsterLink”, a następnie zachowaj link w bezpiecznym miejscu. Będzie Ci potrzebny później.

Teraz jesteś gotowy, aby uruchomić kampanię.

Po prostu przejdź do zakładki „Publikuj” na górze kreatora kampanii. Stąd możesz ustawić „Status publikacji” na „Opublikuj”.

Gdy to zrobisz, nie zapomnij kliknąć przycisku „Zapisz” w prawym górnym rogu, aby zachować zmiany.

Dodawanie modalnego logowania w WordPress

Teraz możesz utworzyć nową stronę WordPress lub edytować istniejącą.

Gdy znajdziesz się w edytorze treści, możesz kliknąć przycisk „+” i dodać blok „Niestandardowy HTML”.

Następnie będziesz musiał wkleić MonsterLink w bloku niestandardowego HTML. Powinno to wyglądać mniej więcej tak:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Domyślnie tekst linku w kodzie MonsterLink będzie brzmiał „Zapisz się teraz”, ponieważ jest on często używany do zapisów na listy mailingowe.

Oto przykład domyślnego kodu:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">Subscribe Now</a>

Ponieważ jest to formularz logowania, będziesz chciał zmienić ten tekst. W tym samouczku zmieniliśmy go na „zaloguj się lub zarejestruj”, jak widać w poniższym fragmencie kodu.

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Możesz również dodać powyższy kod do menu WordPress, paska bocznego lub dowolnego innego obszaru na swojej stronie.

Po prostu upewnij się, że zapisałeś zmiany na stronie WordPress i odwiedź swoją witrynę, aby zobaczyć modal logowania w akcji.

Dodatkowa wskazówka: Śledź ścieżkę użytkownika w formularzach leadów WordPress

Teraz, gdy już wiesz, jak utworzyć wyskakujące okienko modalne logowania w WordPress, przyjrzyjmy się, jak śledzić ścieżki użytkowników dla Twoich formularzy WordPress.

Może to być szczególnie pomocne w przypadku formularza logowania, ponieważ może ujawnić, jakie treści użytkownicy przeglądają tuż przed podjęciem decyzji o zalogowaniu się lub zarejestrowaniu. Te informacje mogą pomóc w ulepszeniu nawigacji i doświadczenia użytkownika na Twojej stronie.

Wiedza o tym, co zachęca użytkowników do wypełniania formularzy, pozwala odtworzyć ten proces, aby uzyskać więcej leadów i rozwijać swój biznes. Chociaż Google Analytics może pokazać pewną aktywność użytkowników, nie powiąże ona zachowania bezpośrednio z konkretnym użytkownikiem, który przesłał formularz.

Właśnie dlatego WPForms jest do tego idealny. Jest to popularna wtyczka do tworzenia formularzy, która zawiera dodatek „Podróż użytkownika” (dostępny w planie Elite), pozwalający zobaczyć, skąd pochodzili użytkownicy, jaką ścieżkę wybrali i ile czasu spędzili na każdej stronie przed przesłaniem formularza.

Jeśli chcesz dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat śledzenia podróży użytkownika w formularzach leadów WordPress.

Najczęściej zadawane pytania dotyczące tworzenia modalnego okna logowania w WordPressie

Oto kilka pytań, które często zadają nasi czytelnicy dotyczące dodawania modalnego okna logowania w WordPressie:

Czy mogę dostosować wygląd mojego wyskakującego okienka logowania w WordPress?

Tak, absolutnie. Obie omówione przez nas metody oferują opcje dostosowywania, aby dopasować je do brandingu Twojej strony internetowej. Zazwyczaj możesz zmieniać kolory, czcionki, rozmiary i dodawać własne logo, aby uzyskać spójny wygląd.

Czy wyskakujący formularz logowania będzie działał na urządzeniach mobilnych?

Tak. Nowoczesne wtyczki typu popup, takie jak OptinMonster, są w pełni responsywne. Oznacza to, że Twój modal logowania automatycznie dostosuje się, aby świetnie wyglądać na komputerach stacjonarnych, tabletach i smartfonach.

Czy wyskakujące okienka logowania spowalniają witrynę?

Kiedy używasz dobrze napisanych i zoptymalizowanych wtyczek, takich jak WPForms i OptinMonster, nie powinno być zauważalnego wpływu na wydajność Twojej witryny. Narzędzia te są zaprojektowane tak, aby były lekkie i ładowały się wydajnie.

Czy mogę dodać przyciski logowania społecznościowego do mojego wyskakującego okienka?

Niektóre wtyczki oferują funkcjonalność logowania społecznościowego jako wbudowaną lub płatną funkcję. Na przykład wersja pro wtyczki Login/Signup Popup obsługuje logowanie społecznościowe. Może to ułatwić użytkownikom logowanie.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak utworzyć modalne okno logowania w WordPress. Możesz również zapoznać się z naszą pełną listą najlepszych wtyczek do stron logowania WordPress oraz naszym przewodnikiem na temat przekierowywania użytkowników po pomyślnym zalogowaniu w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.