Wyobraź sobie, że użytkownik próbuje zresetować swoje hasło na Twojej witrynie WordPress, ale wita go ogólny formularz, który w niczym nie przypomina Twojej pięknie zaprojektowanej witryny internetowej. Może to być mylące dla odwiedzających, zwłaszcza jeśli masz witrynę, w której ludzie stają się członkami lub logują się często.
Przez lata pracowaliśmy z wieloma witrynami internetowymi. Widzieliśmy, jak strona resetowania hasła wygląda jak reszta witryny, co pomaga użytkownikom i sprawia, że czują się bardziej komfortowo, gdy muszą zmienić hasło.
W tym artykule pokażemy, jak zmienić wygląd strony resetowania hasła WordPress, tworząc spójne, atrakcyjne wizualnie doświadczenie, które uspokaja użytkowników.

Dlaczego warto dostosować stronę resetowania hasła w WordPress?
Twoja witryna WordPress jest wyposażona w potężny system zarządzania użytkownikami, który umożliwia tworzenie konta użytkownika, logowanie się i resetowanie hasła.
Strony te domyślnie wyświetlają branding i logo WordPress. Czasami nie stanowi to większego problemu, zwłaszcza jeśli ty lub twój zespół jesteście jedynymi osobami logującymi się do obszaru administracyjnego.

Jeśli jednak prowadzisz sklep e-handel lub witrynę członkowską, klienci mogą również potrzebować logowania.
Możesz zapewnić znacznie lepsze wrażenia użytkownika, dostosowując te strony do projektu i marki Twojej witryny internetowej. Jeśli chcesz, możesz również dodać dodatkowe treści, takie jak twoje logo lub lista ostatnich wpisów.
Być może śledziłeś już nasze inne przewodniki dotyczące dodawania niestandardowego formularza rejestracji użytkownika i strony logowania.
Przyjrzyjmy się teraz, jak dostosować stronę resetowania hasła. Po prostu skorzystaj z poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:
Metoda 1: Dostosowanie strony resetowania hasła przy użyciu Formidable Forms (Easy)
Najprostszym sposobem na zastąpienie strony resetowania hasła WordPress jest użycie Formidable Forms. Ta wtyczka pozwala zastąpić domyślną stronę resetowania hasła za pomocą krótkiego kodu.
Ta metoda nie pozwala na edycję formularza resetowania hasła, ale możesz dodać twoją własną treść wokół niego. Można na przykład dodawać tekst, obrazki i inne treści za pomocą standardowego edytora wpisów WordPress.

Najpierw musisz zainstalować wtyczkę Formidable Forms. Aby dowiedzieć się więcej, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu należy również zainstalować Formidable Forms Lite. Ta darmowa wtyczka stanowi rdzeń dla bardziej zaawansowanych funkcji wtyczki premium.
Gdy to zrobisz, przejdź do strony Formidable Forms ” Ustawienia globalne w twoim kokpicie i wybierz opcję „Kliknij, aby ręcznie wpisz klucz licencyjny”.

Klucz licencyjny można znaleźć na Twoim koncie w witrynie internetowej Formidable Forms. Po wpiszeniu tych informacji, kliknij przycisk „Zapisz licencję”.
Następnie należy zainstalować dodatek User Registration, przechodząc do Formidable ” Add-Ons. Na tym ekranie znajdź dodatek User Registration i kliknij jego przycisk „Zainstaluj”.

Teraz możesz utworzyć własną stronę resetowania hasła, przechodząc do Strony ” Dodaj nowy.
Aby rozpocząć, nadaj stronie tytuł, a następnie kliknij przycisk +. W wyskakującym okienku, które się pojawi, zacznij wpisywać „Krótki kod”.

Wystarczy kliknąć odpowiedni blok, aby dodać go do strony.
Możesz teraz dodać następujący krótki kod: [frm-reset-password]
.

W tym momencie możesz dodać dowolną treść, którą chcesz wyświetlić na stronie resetowania hasła.
Gdy będziesz zadowolony z układu strony, kliknij przycisk „Opublikuj”, aby ją uruchomić.
Na koniec musisz powiedzieć WordPressowi, aby używał tej strony zamiast domyślnej strony resetowania hasła. Aby to zrobić, przejdź do Formidable ” Ustawienia globalne i kliknij kartę „Rejestracja” w menu.
W tym miejscu otwórz menu rozwijane „Resetuj stronę hasła” i wybierz właśnie utworzoną stronę.

Nie zapomnij kliknąć przycisku „Aktualizuj” u góry ekranu, aby zapisać twoje ustawienia.
Możesz teraz przejść na swoją witrynę internetową WordPress, aby zobaczyć własną stronę resetowania hasła w działaniu.
Metoda 2: Dostosuj wszystkie strony członkowskie za pomocą „Theme My Login” (za darmo)
Aby zapewnić spójne wrażenia użytkownika, dobrym pomysłem jest użycie tego samego stylu na wszystkich twoich stronach członkowskich. Theme My Login to darmowa wtyczka, która pozwala zastąpić wbudowany kokpit WordPress, strony logowania, wylogowania, rejestracji, zapomniałem hasła i resetowania hasła.
Nie jest to najbardziej konfigurowalne rozwiązanie, ale wszystkie jego strony będą korzystać z motywu WordPress.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć wtyczkę Theme My Login. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu, Theme My Login automatycznie tworzy adresy URL dla własnych ekranów logowania, wylogowania, rejestracji, utraty hasła i resetowania hasła. Możesz zobaczyć te adresy URL, przechodząc do strony Motyw Moje logowanie ” Ogólne.

Aby zastąpić którąkolwiek z tych stron, wystarczy utworzyć nową stronę o dokładnie tym adresie URL.
Aby utworzyć własną stronę resetowania hasła WordPress, przejdź do Strona ” Dodaj nowy. Tutaj kliknij ikonkę „+” i zacznij wpisywać „Krótki kod”.
Gdy pojawi się odpowiedni blok, kliknij go, aby dodać go do strony.

Wewnątrz bloku dodaj następujący krótki kod:
[theme-my-login action="lostpassword"]
Możesz teraz dodać wszelkie dodatkowe treści, które chcesz wyświetlić na stronie resetowania hasła, takie jak twoje logo. Kiedy będziesz zadowolony z konfiguracji strony, kliknij „Zapisz wersję roboczą”.

Następnie przejdź do Strony ” Wszystkie strony i znajdź stronę resetowania hasła, którą właśnie utworzyłeś.
Po prostu najedź kursorem myszy na stronę i kliknij przycisk „Szybka edycja”, gdy się pojawi.

W polu „Uproszczona nazwa” wpisz „lostpassword”.
Następnie otwórz listę rozwijaną „Status” i wybierz „Opublikowane”.

Po wykonaniu tej czynności kliknij przycisk „Aktualizuj”. Teraz, jeśli odwiedzisz swój blog WordPress, zobaczysz stronę utraconego hasła na żywo.
Aby zastąpić inne wbudowane strony członkowskie WordPress, wystarczy wykonać kroki opisane powyżej, ale upewnij się, że używasz odpowiedniej uproszczonej nazwy adresu URL i krótkiego kodu.
Na przykład, jeśli chcesz utworzyć własną stronę resetowania hasła, musisz użyć krótkiego kodu [theme-my-login action="resetpass"]
. Należy również zmienić uproszczoną nazwę adresu URL na resetpassword
.
Metoda 3: Utwórz stronę resetowania hasła za pomocą WPForms (w pełni konfigurowalna)
Jeśli chcesz zastąpić domyślną stronę resetowania hasła całkowicie własnym formularzem, zalecamy skorzystanie z WPForms.
Wtyczka ta posiada szablon „User Password Reset Form”, który można konfigurować za pomocą własnego tekstu, obrazków i brandingu. Możesz nawet dodawać i usuwać pola, aby zbierać dokładnie te informacje, które chcesz od członków.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki WPForms. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu przejdź do WPForms ” Ustawienia i wpisz swój klucz licencyjny. Informacje te można znaleźć na Twoim koncie w witrynie internetowej WPForms.

Po wpiszeniu klucza licencyjnego należy zainstalować dodatek User Registration, który umożliwia tworzenie własnych formularzy rejestracji użytkowników, resetowania hasła i logowania dla twojej witryny.
W kokpicie przejdź do WPForms ” Addons i znajdź User Registration Addon.

Wystarczy kliknąć „Zainstaluj dodatek”, aby go pobrać, a następnie kliknąć „Włączanie”, aby go uruchomić.
Teraz możesz utworzyć swój własny formularz resetowania hasła, przechodząc do strony WPForms ” Dodaj nowy. Tutaj należy wpisać rodzaj tytułu dla nowego formularza.
Po wykonaniu tej czynności przewiń do szablonu „User Password Reset Form” i kliknij przycisk „Use Template”.

WPForms będzie teraz wczytywać szablon formularza resetowania hasła użytkownika.
Aby dostosować dowolne pole do własnego tekstu, etykiety lub opisu, wystarczy kliknąć, aby je zaznaczyć, a następnie skorzystać z ustawień w menu po lewej stronie.
Na przykład szablon ma przycisk „Prześlij”. Aby wyświetlić inną etykietę przycisku, wystarczy kliknąć, aby zaznaczyć pole, a następnie wpisać nowy rodzaj wiadomości w polu „Submit Button Text”.

Możesz także zmienić to, co dzieje się, gdy użytkownik przesyła prośbę o zresetowanie hasła, przechodząc do Ustawienia ” Potwierdzenia.
W tym miejscu otwórz menu rozwijane „Rodzaj potwierdzenia” i wybierz, czy chcesz przekierować użytkownika na inną stronę lub adres URL, czy po prostu wyświetlić wiadomość z prośbą o sprawdzenie skrzynki odbiorczej w poszukiwaniu e-maila z resetem hasła.

Wiadomość można również dostosować do własnych potrzeb, wpisując jej rodzaj w małym edytorze tekstu. Na przykład, możesz przypomnieć użytkownikom o sprawdzeniu ich katalogów spamu.
Pro Tip: Jeśli twoje wiadomości e-mail są regularnie wysyłane do spamu, zalecamy skorzystanie z dostawcy usług SMTP, aby poprawić wskaźniki dostarczalności wiadomości e-mail.
Gdy będziesz zadowolony z konfiguracji formularza, kliknij przycisk „Zapisz” w prawym górnym rogu ekranu.
Aby zastąpić domyślną stronę resetowania hasła WordPress, utwórz stronę z hasłem „jedno hasło”. Następnie dodaj formularz do tej strony.
Najprostszym sposobem jest kliknięcie przycisku „Osadź” w edytorze WPForms i wybranie opcji „Utwórz nową stronę”.

Teraz wpisz rodzaj tytułu dla nowej strony. Uproszczona nazwa zostanie zmieniona w późniejszym kroku, więc możesz użyć dowolnego elementu.
Gdy to zrobisz, kliknij „Let’s Go”.

Spowoduje to przejście do edytora stron WordPress, w którym formularz został już dodany do nowej strony. Możesz teraz wprowadzić dowolne zmiany na tej stronie, takie jak dodanie większej ilości tekstu, niestandardowego logo lub kategorii i tagów.
Kiedy będziesz zadowolony z wyglądu strony, kliknij przycisk „Zapisz wersję roboczą”.

Następnie przejdź do Strony ” Wszystkie strony i znajdź stronę resetowania hasła, którą właśnie utworzyłeś.
Tutaj kliknij przycisk „Szybka edycja”.

W polu „Uproszczona nazwa” wpisz „lostpassword”.
Następnie otwórz listę rozwijaną „Status” i wybierz „Opublikowane”.

Teraz musisz przekierować klientów na własną stronę resetowania hasła, a nie na wbudowaną stronę WordPress. Najłatwiej to zrobić za pomocą darmowej wtyczki WPCode.
WPCode to najlepsza wtyczka fragmentów kodu używana przez ponad 2 miliony witryn internetowych WordPress. Ułatwia ona dodawanie własnego kodu w WordPressie bez konieczności edytowania pliku functions.php.
Dzięki WPCode nawet początkujący mogą edytować kod swojej witryny internetowej bez ryzyka błędów i literówek, które mogą powodować wiele typowych błędów WordPress.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć darmową wtyczkę WPCode. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu udaj się do Code Snippets ” Add Snippet.

Znajdziesz tu gotowe fragmenty kodu, które umożliwiają przesyłanie dodatkowych rodzajów plików do WordPressa, wyłączanie stron z załącznikami, całkowite wyłączanie komentarzy i nie tylko.
Po prostu najedź kursorem myszy na „Dodaj swój własny kod”, a następnie kliknij „Użyj fragmentu kodu”, gdy się pojawi.

Na początek wpisz tytuł własnego fragmentu kodu. Może to być cokolwiek, co pomoże zidentyfikować fragment kodu w kokpicie WordPress.
Następnie otwórz listę rozwijaną „Rodzaj kodu” i wybierz „Fragment kodu PHP”.

W edytorze kodu dodaj następujący fragment kodu:
1 2 3 4 | add_filter( 'lostpassword_url' , 'my_lostpassword_url' ); function my_lostpassword_url() { return site_url( '/lostpassword/' ); } |
Następnie przewiń do sekcji „Wstawienie”. WPCode może dodawać kod w różnych miejscach, takich jak po każdym wpisie, tylko frontend lub tylko administrator.
Aby użyć własnego kodu PHP w całej witrynie internetowej, blogu lub sklepie WooCommerce, kliknij opcję „Automatyczne wstawienie”, jeśli nie jest jeszcze wybrana. Następnie otwórz listę rozwijaną „Lokalizacja” i wybierz „Uruchom wszędzie”.

Następnie możesz przewinąć do góry ekranu i kliknąć przełącznik „Nieaktywny”, aby zmienić go na „Aktywny”.
Na koniec kliknij „Zapisz fragment”, aby uruchomić fragment kodu PHP.

Teraz spróbuj przejść na wbudowany ekran logowania WordPress.
Jeśli klikniesz odnośnik „Zgubiłeś hasło?”, zostaniesz przekierowany na własną stronę resetowania hasła, którą właśnie utworzyłeś.

W zależności od tego, jak skonfigurowana jest twoja witryna, może być konieczne zaktualizowanie odnośników do resetowania hasła na innych stronach.
Jeśli utworzyłeś własną stronę logowania do WordPressa za pomocą wtyczki, takiej jak WPForms, zalecamy również dodanie nowego odnośnika do resetowania hasła do tego formularza.

Przewodniki ekspertów na temat dostosowywania stron WordPressa
Mamy nadzieję, że ten poradnik pomógł ci dowiedzieć się, jak dostosować stronę resetowania hasła WordPress. Możesz również zapoznać się z poradnikami na temat poprawy zabezpieczeń logowania do WordPressa:
- Jak stworzyć własną stronę logowania do WordPressa (Ultimate Guide)
- Jak i dlaczego należy ograniczyć próby logowania w WordPress?
- Jak dodać pytania dotyczące zabezpieczeń do ekranu logowania WordPress
- Jak dodać własny adres URL logowania w WordPress (krok po kroku)
- Ważne wskazówki dotyczące ochrony twojego obszaru administracyjnego WordPress
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Rowdy
Hello, do I need to have a paid license for the first method with Formidable Forms ?
WPBeginner Support
Yes, at the moment user registration is part of the paid plan.
Admin
Lennon
your article is nice and helpful
WPBeginner Support
Glad you found our guide helpful!
Admin