Jak dodać stronę logowania i widżety na froncie w WordPressie

Domyślna strona logowania WordPress nie zapewnia najlepszych wrażeń i może nawet wprowadzać użytkowników w błąd. Dlatego zalecamy dodanie strony logowania front-end, aby umożliwić użytkownikom logowanie się bezpośrednio z głównej części Twojej witryny.

Poprawia to dostępność i ogólną satysfakcję użytkowników. Ponadto jest to wygodne, umożliwiając użytkownikom dostęp do formularzy logowania z różnych części witryny, takich jak paski boczne lub stopki.

Stworzyliśmy wiele sklepów internetowych i stron internetowych, na których oferujemy tę funkcjonalność dla lepszej użyteczności. Nauczyło nas to, co działa, a co nie w przypadku stron logowania front-end.

W tym artykule pokażemy, jak łatwo dodać stronę logowania front-end i widżety w WordPress.

Dlaczego i kiedy potrzebujesz logowania front-end w WordPress?

Domyślnie strona logowania WordPress wyświetla branding WordPress i zazwyczaj nie pasuje do projektu Twojej obecnej witryny WordPress.

Działa to w przypadku mniejszych blogów WordPress i stron internetowych.

Jednakże, jeśli posiadasz witrynę członkowską, sklep internetowy lub inną witrynę, na której użytkownicy mogą się rejestrować i logować, dodanie strony logowania na froncie i widżetu zapewni lepsze wrażenia użytkownikom.

Możesz nawet dostosować tę stronę do swojej marki lub dodać prosty formularz logowania do paska bocznego WordPress.

Mając to na uwadze, zobaczmy, jak łatwo dodać stronę logowania front-end i widżet logowania w WordPress. W tym samouczku pokażemy 3 najprostsze sposoby, a poniższe linki pozwolą Ci przejść do wybranej metody:

• Metoda 1: Dodaj stronę logowania front-endowego i widżety w WordPress za pomocą WPForms
• Metoda 2: Dodaj stronę logowania na froncie w WordPressie za pomocą SeedProd
• Metoda 3: Dodaj stronę logowania front-end i widżety w WordPress za pomocą Theme My Login
• Wskazówka eksperta: Dodaj przycisk logowania do menu Twojej witryny WordPress
• Bonus: Dodaj CAPTCHA do formularza logowania WordPress
• Samouczek wideo
• Najczęściej zadawane pytania (FAQ)

Metoda 1: Dodaj stronę logowania front-endowego i widżety w WordPress za pomocą WPForms

WPForms to najlepsza wtyczka formularzy kontaktowych WordPress na rynku, używana przez ponad 6 milionów stron internetowych. Pozwala łatwo stworzyć niestandardową stronę logowania front-end i widżet logowania na Twojej stronie.

W WPBeginner używaliśmy go do tworzenia formularzy kontaktowych i corocznych ankiet i mieliśmy doskonałe doświadczenia. Aby dowiedzieć się więcej, zapoznaj się z naszą szczegółową recenzją WPForms.

Najpierw musisz zainstalować i aktywować wtyczkę WPForms. Szczegółowe instrukcje znajdziesz w naszym przewodniku dla początkujących na temat jak zainstalować wtyczkę WordPress.

Po aktywacji odwiedź stronę WPForms » Ustawienia z paska bocznego administratora WordPress, aby wprowadzić swój klucz licencyjny.

Klucz ten możesz uzyskać ze swojego konta na stronie WPForms.

Gdy to zrobisz, przejdź do strony WPForms » Dodatki z panelu administracyjnego WordPress, aby znaleźć dodatek Rejestracja użytkowników.

Następnie kliknij przycisk „Zainstaluj dodatek”, aby pobrać i aktywować go na swojej stronie internetowej.

Po aktywacji dodatku User Registration przejdź do ekranu WPForms » Dodaj nowy z paska bocznego administratora, aby uruchomić kreator formularzy.

Stąd zacznij od wpisania nazwy formularza, który zamierzasz utworzyć. Następnie po prostu wybierz szablon „Formularz logowania użytkownika”, aby rozpocząć tworzenie formularza logowania użytkownika.

Spowoduje to uruchomienie szablonu w kreatorze formularzy, gdzie po prawej stronie zobaczysz podgląd formularza, a po lewej kolumnę dostępnych pól.

Szablon już zawiera potrzebne pola nazwy użytkownika i hasła. Jednak jeśli chcesz dostosować formularz, możesz przeciągać i upuszczać dodatkowe pola z paska bocznego.

Więcej informacji znajdziesz w naszym przewodniku jak stworzyć niestandardową stronę logowania dla WordPress.

Gdy będziesz zadowolony z ustawień, po prostu kliknij przycisk „Zapisz”, aby zachować zmiany.

Dodaj formularz logowania do strony/wpisu

Teraz, aby dodać formularz logowania do strony lub wpisu, otwórz wybraną stronę/wpis w edytorze bloków WordPress z obszaru administracyjnego.

Gdy tam będziesz, kliknij przycisk „+”, aby otworzyć menu bloków i dodać blok WPForms.

Następnie wybierz utworzony formularz logowania z menu rozwijanego w samym bloku.

Na koniec kliknij przycisk „Opublikuj” lub „Zaktualizuj”, aby zapisać swoje ustawienia.

Dodaj formularz logowania do paska bocznego strony internetowej

Jeśli chcesz dodać formularz logowania do paska bocznego swojej witryny, odwiedź stronę Wygląd » Widżety z panelu administracyjnego WordPress.

Tutaj kliknij przycisk „+” w lewym górnym rogu ekranu, aby otworzyć menu bloków.

Stąd musisz znaleźć i dodać blok WPForms do paska bocznego.

Po wykonaniu tej czynności wybierz formularz logowania z menu rozwijanego w samym bloku.

Na koniec kliknij przycisk „Zaktualizuj”, aby zapisać ustawienia. Więcej szczegółów znajdziesz w naszym poradniku jak dodać formularz logowania do paska bocznego WordPress.

Teraz możesz odwiedzić swoją witrynę WordPress, aby zobaczyć formularz logowania w pasku bocznym.

Dodaj formularz logowania w edytorze pełnej witryny

Jeśli używasz motywu opartego na blokach, nie będziesz mógł dodać logowania do paska bocznego witryny za pomocą powyższej metody.

Aby dodać formularz logowania w FSE, przejdź do strony Wygląd » Edytor z poziomu panelu administracyjnego WordPress.

Spowoduje to uruchomienie FSE, gdzie musisz kliknąć przycisk „+”, aby otworzyć menu bloków.

Stąd zlokalizuj i dodaj blok WPForms w dowolnym miejscu na swojej stronie internetowej.

Następnie wybierz utworzony formularz logowania z menu rozwijanego w samym bloku.

Na koniec kliknij przycisk „Zapisz”, aby zapisać swoje ustawienia.

Dodatkowa wskazówka: Aby dalej dostosowywać formularz logowania, zapoznaj się z naszym samouczkiem na temat jak stylizować formularze WordPress.

Metoda 2: Dodaj stronę logowania na froncie w WordPressie za pomocą SeedProd

SeedProd to najlepszy kreator stron WordPress metodą przeciągnij i upuść na rynku, używany przez ponad 1 milion stron internetowych.

Pozwala stworzyć całkowicie niestandardową stronę logowania, która może pasować do projektu Twojej obecnej witryny lub być czymś unikalnym.

Jest bardzo przyjazny dla początkujących i zawiera mnóstwo profesjonalnie zaprojektowanych szablonów stron logowania, których możesz użyć do zbudowania swojej strony logowania.

Kilka naszych marek partnerskich zaprojektowało całe swoje strony internetowe, w tym strony logowania, za pomocą tego narzędzia. Aby uzyskać więcej informacji, zobacz naszą pełną recenzję SeedProd.

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Szczegółowe informacje znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do ekranu SeedProd » Landing Pages z paska bocznego administracji WordPress i wybierz opcję „Strona logowania”, klikając przycisk „Skonfiguruj stronę logowania”.

Przekieruje Cię to do ekranu „Szablony”, gdzie możesz wybrać szablon i użyć kreatora przeciągnij i upuść, aby dostosować stronę.

Używając pustego szablonu, możesz nawet zaprojektować niestandardową stronę logowania front-end od podstaw.

Po wybraniu szablonu według własnego uznania, zostaniesz poproszony o podanie nazwy strony. SeedProd użyje następnie nazwy strony jako adresu URL dla strony docelowej formularza logowania.

Po wykonaniu tej czynności kliknij przycisk „Zapisz i rozpocznij edycję strony”, aby kontynuować.

Spowoduje to uruchomienie kreatora przeciągnij i upuść SeedProd, gdzie zobaczysz podgląd strony logowania po prawej stronie z dostępnymi polami po lewej.

Stąd możesz dodać dowolny blok do strony, po prostu przeciągając go z lewego menu i umieszczając go w dowolnym miejscu.

Więcej szczegółów znajdziesz w naszym przewodniku: jak stworzyć niestandardową stronę logowania WordPress.

Po zakończeniu projektowania strony nie zapomnij kliknąć przycisku „Opublikuj” w menu rozwijanym na górze, aby zapisać swoje ustawienia.

Następnie wróć do panelu administracyjnego WordPress i przejdź do SeedProd » Strony docelowe.

Stąd znajdź sekcję „Strona logowania” i kliknij przełącznik, aby zmienić ją z „Nieaktywna” na „Aktywna”. Twoja strona logowania będzie teraz aktywna na Twojej stronie internetowej.

Metoda 3: Dodaj stronę logowania front-end i widżety w WordPress za pomocą Theme My Login

Jeśli chcesz dodać bardzo prostą stronę logowania front-end do swojej witryny, możesz użyć darmowej wtyczki Theme My Login.

Najpierw musisz zainstalować i aktywować wtyczkę. Aby uzyskać więcej informacji, zobacz nasz przewodnik dla początkujących na temat jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczka automatycznie utworzy strony logowania, wylogowania, zapomnianego hasła i rejestracji.

Możesz przejść do strony Theme My Login » Ogólne z menu administratora i wyświetlić ustawienia wtyczki.

Najpierw możesz ustawić typ logowania. Ustawienie „Domyślne” jest najbezpieczniejsze, ponieważ wymaga podania adresu e-mail i hasła do zalogowania.

Następnie możesz wybrać ustawienia rejestracji. Tutaj zachowaliśmy domyślne ustawienia, ponieważ wymagają one zarówno adresu e-mail, jak i hasła do zalogowania.

Możesz również zaznaczyć pole „Hasła”, aby umożliwić użytkownikom tworzenie własnych haseł, oraz pole „Automatyczne logowanie”, które automatycznie loguje użytkowników po ich rejestracji.

Następnie możesz zmienić adresy URL logowania i rejestracji w ustawieniach „Slugs”.

Te automatycznie tworzą przekierowania. Zatem standardowy adres URL logowania „twojastrona.com/wp-admin” przekieruje do „twojastrona.com/login”.

Możesz pozostawić te adresy URL bez zmian lub je zmienić.

Po zakończeniu wprowadzania zmian upewnij się, że kliknąłeś przycisk „Zapisz zmiany”.

Nie można dodać znacznie bardziej zaawansowanych funkcji, chyba że zaktualizujesz wersję, aby korzystać z ich rozszerzeń premium.

Niemniej jednak jest to dobre rozwiązanie dla użytkowników z ograniczonym budżetem, którzy chcą stworzyć prostą stronę logowania front-end.

Dodaj formularz logowania do strony/wpisu

Teraz, aby dodać formularz logowania utworzony przez Theme My Login, otwórz stronę/post w edytorze bloków WordPress.

Stąd kliknij przycisk „+”, aby otworzyć menu bloków i dodać blok kodu krótkiego do strony.

Następnie dodaj następujący skrócony kod do bloku:

[theme-my-login]

Na koniec kliknij przycisk „Aktualizuj” lub „Opublikuj”, aby zapisać swoje ustawienia.

Teraz odwiedź swoją stronę internetową, aby zobaczyć formularz logowania.

Dodaj formularz logowania do obszaru widżetu

Możesz również dodać formularz logowania do obszarów widżetów WordPress, korzystając z bloku Theme My Login.

Po prostu przejdź do strony Wygląd » Widżety i otwórz menu bloków, klikając przycisk „+”.

Stąd musisz znaleźć i dodać blok Theme My Login do wybranego obszaru widżetów.

Następnie wybierz formularz, który chcesz dodać, z menu rozwijanego w samym bloku.

Na koniec kliknij przycisk „Zaktualizuj”, aby zapisać swoje ustawienia. Teraz odwiedź swoją stronę WordPress, aby zobaczyć formularz logowania w obszarze widżetów.

Wskazówka eksperta: Dodaj przycisk logowania do menu Twojej witryny WordPress

Teraz, gdy utworzyłeś stronę logowania front-end, zalecamy ułatwienie do niej dostępu, dodając przycisk logowania do swojego menu nawigacyjnego.

Zapewnia to, że użytkownicy mogą znaleźć i uzyskać dostęp do swoich kont bez wyszukiwania strony logowania.

Aby dodać przycisk logowania do menu swojej witryny, po prostu odwiedź stronę Wygląd » Menu z panelu administracyjnego WordPress.

Tutaj rozwiń zakładkę „Niestandardowe linki” z lewej kolumny i dodaj adres URL swojej strony logowania front-end. Możesz również dodać tekst linku dla przycisku logowania.

Kliknij przycisk „Dodaj do menu”.

Następnie kliknij przycisk „Zapisz menu”.

Teraz odwiedź swoją witrynę WordPress, aby zobaczyć przycisk Logowanie w akcji. Gdy użytkownicy klikną go, zostaną automatycznie przeniesieni na stronę Twojego formularza logowania na froncie.

Jednak powyższa metoda nie zadziała, jeśli używasz motywu blokowego.

W takim przypadku przejdź do strony Wygląd » Edytor z paska bocznego administracji WordPress.

Spowoduje to uruchomienie Edytora pełnej witryny. W głównym panelu projektowania po lewej stronie wybierz „Nawigacja”, aby rozpocząć edycję głównego menu witryny.

Spowoduje to otwarcie menu nawigacyjnego w pełnym edytorze witryny. Tutaj kliknij przycisk „+” obok niego. Otworzy się okno, w którym musisz wpisać nazwę swojej strony logowania front-end.

Gdy pojawi się w wynikach, kliknij na nią, aby dodać link do menu nawigacyjnego.

Następnie przełącz się na zakładkę „Blok” z panelu po lewej stronie.

Możesz teraz zmienić tekst kotwicy dla przycisku logowania według własnego uznania.

Po zakończeniu kliknij przycisk „Zapisz”, aby zachować swoje ustawienia.

Teraz odwiedź swoją stronę internetową, aby zobaczyć przycisk logowania w akcji.

Bonus: Dodaj CAPTCHA do formularza logowania WordPress

Po dodaniu niestandardowego formularza logowania, dobrym pomysłem jest dodanie do niego CAPTCHA, ponieważ ta strona jest często celem hakerów i spamerów.

Dodanie CAPTCHA może zablokować spamboty i zabezpieczyć Twoją stronę. Możesz to łatwo zrobić za pomocą WPForms.

Po aktywacji wtyczki po prostu przejdź do strony WPForms » Ustawienia z poziomu panelu WordPress i przejdź do zakładki „CAPTCHA”.

Następnie wybierz opcję „reCAPTCHA” jako typ CAPTCHA.

Po wykonaniu tej czynności musisz odwiedzić stronę Google reCAPTCHA, aby utworzyć klucz witryny i klucz tajny. Te klucze pomogą zintegrować reCAPTCHA z Twoją witryną WordPress.

Po dodaniu tych kluczy po prostu edytuj formularz WordPress, który utworzyłeś wcześniej i przejdź do zakładki „Ustawienia”.

Następnie wybierz opcję „Ochrona przed spamem i bezpieczeństwo” i włącz przełącznik „Włącz Google v3 reCAPTCHA”. Następnie kliknij przycisk „Zapisz”, aby zachować ustawienia.

Pomyślnie dodałeś CAPTCHA do swojego formularza logowania w WordPressie, czyniąc go znacznie bezpieczniejszym przed botami spamowymi i zautomatyzowanymi atakami.

Bardziej szczegółowe instrukcje znajdziesz w naszym poradniku jak dodać CAPTCHA do formularzy logowania i rejestracji w WordPressie.

Samouczek wideo

Jeśli nie preferujesz pisemnych instrukcji, obejrzyj nasz samouczek wideo:

Subskrybuj WPBeginner

Najczęściej zadawane pytania (FAQ)

Oto kilka pytań, które często zadają nasi czytelnicy dotyczące dodawania stron logowania front-end i widżetów w WordPress:

Czy strona logowania front-endowego jest konieczna dla każdej strony WordPress?

Nie, wcale nie. Prosty blog lub strona firmowa, na którą loguje się tylko administrator lub redaktorzy, może bez problemu korzystać z domyślnej strony logowania WordPress.

Strony logowania front-end są najbardziej wartościowe dla witryn, w których użytkownicy regularnie się logują, takich jak witryny członkowskie, sklepy internetowe lub fora.

Jak mogę przekierować użytkowników na konkretną stronę po zalogowaniu?

Większość wtyczek do stron logowania, w tym WPForms i SeedProd, ma wbudowane ustawienia do obsługi przekierowań po zalogowaniu.

Zazwyczaj można znaleźć opcję w ustawieniach formularza lub strony, aby wprowadzić konkretny adres URL, na który chcesz przekierować użytkowników, taki jak ich pulpit konta lub strona tylko dla członków.

Aby zacząć, możesz zapoznać się z naszym poradnikiem na temat jak przekierować użytkowników po pomyślnym zalogowaniu w WordPress

Czy mogę dodać przyciski logowania przez media społecznościowe do mojego formularza front-endowego?

Tak, możesz. Wiele wtyczek do rejestracji i logowania użytkowników oferuje rozszerzenia lub integracje dla logowania społecznościowego.

Na przykład WPForms integruje się z usługami, które pozwalają dodawać przyciski „Zaloguj się przez Google” lub „Zaloguj się przez Facebook”, co jeszcze bardziej ułatwia proces dla Twoich użytkowników.

Jeśli jesteś zainteresowany, mamy samouczek na temat jak dodać logowanie społecznościowe do WordPressa, który może Ci pomóc.

Czy niestandardowa strona logowania wpłynie na szybkość mojej witryny?

Po zbudowaniu za pomocą wysokiej jakości wtyczki, takiej jak SeedProd lub WPForms, niestandardowa strona logowania powinna mieć minimalny wpływ na szybkość Twojej witryny.

Narzędzia te są zoptymalizowane pod kątem wydajności. Kluczem jest użycie dobrze zakodowanego wtyczki i unikanie dodawania nadmiernie dużych obrazów lub ciężkich skryptów do projektu strony logowania.

Mamy nadzieję, że ten artykuł pomógł Ci dodać stronę logowania front-end i widżety w WordPress. Możesz również zapoznać się z naszymi rekomendacjami najlepszych wtyczek do stron logowania WordPress oraz naszym przewodnikiem jak dodać niestandardowy adres URL logowania 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.