Jak utworzyć niestandardową stronę logowania WordPress (Ultimate Guide)

Czy chcesz utworzyć niestandardową stronę logowania WordPress dla swojej witryny?

Jeśli prowadzisz witrynę członkowską WordPress lub sklep internetowy, wielu użytkowników często zobaczy stronę logowania. Dostosowywanie domyślnej strony logowania WordPress pozwala zaoferować lepsze wrażenia użytkownika.

W tym ostatecznym przewodniku pokażemy różne sposoby tworzenia niestandardowej strony logowania WordPress. Możesz również użyć tego samouczka do utworzenia niestandardowej strony logowania WooCommerce.

Oto, czego dowiesz się z tego przewodnika.

• Dlaczego warto utworzyć niestandardową stronę logowania WordPress
• Przykłady projektowania stron logowania WordPress
• Tworzenie strony logowania WordPress za pomocą motywu mój Login
• Tworzenie niestandardowej strony logowania WordPress za pomocą WPForms
• Tworzenie niestandardowej strony logowania WordPress za pomocą SeedProd
• Zmiana logo logowania na stronie logowania WordPress
• Zmień logo logowania WordPress i adres URL za pomocą wtyczki
• Zmień logo logowania WordPress i adres URL bez wtyczki (kod)

Dlaczego warto utworzyć niestandardową stronę logowania WordPress?

WordPress jest wyposażony w potężny system zarządzania użytkownikami. Pozwala to użytkownikom na tworzenie kont w sklepach eCommerce, witrynach członkowskich lub na blogu.

Domyślnie strona logowania pokazuje markę i logo WordPress. Jest to w porządku, jeśli prowadzisz małego bloga lub jesteś jedyną osobą z dostępem administratora.

Jeśli jednak witryna umożliwia użytkownikom rejestrację i logowanie, niestandardowa strona logowania oferuje lepsze wrażenia użytkownika.

Korzystanie z własnego logo i projektu sprawia, że użytkownicy czują się jak w domu. Natomiast przekierowanie ich do domyślnego ekranu logowania WordPress, który nie wygląda jak twoja witryna, może wyglądać podejrzanie dla użytkowników.

Na koniec, domyślny ekran logowania nie zawiera niczego poza formularzem logowania. Tworząc niestandardową stronę logowania, możesz wykorzystać ją do promowania innych stron lub specjalnych promocji.

Mając to na uwadze, rzućmy okiem na kilka przykładów niestandardowych projektów stron logowania WordPress.

Przykłady Projektowania Stron Logowania WordPress

Właściciele witryn mogą dostosować stronę logowania WordPress za pomocą różnych stylów i technik.

Niektórzy tworzą niestandardową stronę logowania, która wykorzystuje motyw i kolory swojej witryny. Inne modyfikują domyślną stronę logowania, dodając niestandardowe tło, kolory i logo.

1. WPForms

WPForms to najlepsza wtyczka do formularzy kontaktowych WordPress na rynku. Przypadkowo ich wtyczka zawiera również dodatek do tworzenia pięknych formularzy logowania i rejestracji WordPress, które pokażemy Ci w dalszej części tego artykułu.

Ich niestandardowa strona logowania wykorzystuje układ dwukolumnowy. Lewa kolumna zawiera formularz logowania, a prawa kolumna służy do wyróżniania promocji i innych wezwań do działania.

W powyższym przykładzie używają strony logowania, aby udostępnić swój raport roczny. Wykorzystuje Niestandardowy branding, ilustrację tła i kolory marki, aby stworzyć unikalne doświadczenie logowania.

2. Rock My Wedding

Strona Rock My Wedding wykorzystuje wyskakujące okienko, aby wyświetlić formularz logowania i rejestracji.

Zaletą korzystania z wyskakującego okienka jest to, że użytkownicy mogą się zalogować bez opuszczania strony. Oszczędza je przed nowym ładowaniem strony i oferuje szybsze wrażenia użytkownika.

3. Jacquelynne Steves

Jacquelynne Steeves to strona artystyczno-rzemieślnicza, na której autor publikuje treści o dekorowaniu domu, robieniu kołder, wzorów, haftów i innych.

Ich strona logowania używa niestandardowego obrazu tła pasującego do motywu ich witryny z formularzem logowania po prawej stronie.

4. Church Motion Graphics

Strona logowania tej firmy zajmującej się projektowaniem grafiki ruchowej używa kolorowego tła odzwierciedlającego to, na czym polega jej działalność.

Używa tego samego nagłówka witryny, stopki i menu nawigacji na ekranie logowania. Sam formularz logowania jest dość prosty z ciemnym tłem.

5. MITSLoan Management Review

Witryna MITSLoan Management Review korzysta z domyślnego ekranu logowania WordPress. Używa również niestandardowego CSS z własnym logo, aby ukryć markę WordPress.

Teraz, czy jesteś gotowy, aby dowiedzieć się, jak utworzyć niestandardową stronę logowania w WordPress?

Tworzenie strony logowania WordPress za pomocą motywu mój Login

Theme My Login to darmowa wtyczka, która zmienia stronę logowania, aby pasowała do Twojego motywu WordPress.

Nie jest to zbyt konfigurowalne, ale zastąpi domyślną stronę logowania marki WordPress i będzie wyglądać nieco bardziej profesjonalnie.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować motyw mój plugin logowania. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji, Theme my Login automatycznie tworzy adresy URL dla niestandardowego logowania, wylogowania, rejestracji, Zapomniałem hasła i resetowania hasła.

Możesz dostosować te adresy URL logowania WordPress, odwiedzając Temat Mój Login ” Ogólne strona. Przewiń w dół do sekcji „ślimaki”, aby zmodyfikować te adresy URL używane przez wtyczkę do akcji logowania.

Theme My Login pozwala również na używanie skrótów do tworzenia niestandardowych stron logowania i rejestracji. Możesz po prostu utworzyć stronę dla każdej akcji, a następnie dodać tutaj slug strony, aby wtyczka mogła poprawnie wyszukiwać i przekierowywać użytkowników.

Zacznijmy od strony logowania.

Przejdź do Strona ” Dodaj Nowy aby utworzyć nową stronę WordPress. Następnie musisz nadać swojej stronie tytuł, a następnie wprowadzić następujący Skrót „[theme-my-login]” w obszarze zawartości.

Możesz teraz opublikować swoją stronę i wyświetlić jej podgląd, aby zobaczyć swoją niestandardową stronę logowania w akcji.

Powtórz proces tworzenia innych stron, używając następujących skrótów.

[theme-my-login action = "register"] do formularza rejestracyjnego.

[theme-my-login action = "lostpassword"]dla strony utracone hasło.

[theme-my-login action = "resetpass"] użyj go na stronie Resetuj hasło.

Tworzenie niestandardowej strony logowania WordPress za pomocą WPForms

WPForms to najlepsza wtyczka do tworzenia formularzy WordPress na rynku. Umożliwia łatwe tworzenie niestandardowych formularzy logowania i rejestracji dla Twojej witryny.

WPForms to wtyczka premium WordPress i będziesz potrzebował przynajmniej swojego planu pro, aby uzyskać dostęp do dodatku do rejestracji użytkowników. Użytkownicy WPBeginner mogą uzyskać zniżkę 50%, korzystając z naszego kodu kuponu WPForms: SAVE50

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę WPForms. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić WPForms ” Ustawienia strona, aby wprowadzić klucz licencyjny. Możesz znaleźć te informacje w swoim koncie na stronie WPForms.

Po wprowadzeniu klucza licencyjnego będziesz mógł zainstalować dodatki. Śmiało, odwiedź WPForms ” Dodatki stronę i zlokalizuj dodatek do rejestracji użytkownika.

Następnie kliknij przycisk Zainstaluj dodatek, aby pobrać i aktywować dodatek. Jesteś teraz gotowy do tworzenia własnych niestandardowych formularzy logowania.

Przejdź do WPForms ” Dodaj Nowy strony i przewiń w dół do szablonu „formularz logowania użytkownika”. Musisz kliknąć przycisk „Utwórz formularz logowania użytkownika”, aby kontynuować.

WPForms załaduje formularz logowania Użytkownika z wymaganymi polami. Możesz kliknąć na pola, aby dodać własny opis lub tekst wokół nich.

Możesz również zmienić inne ustawienia. Na przykład automatycznie dodaje „Prześlij” jako tytuł przycisku. Możesz go kliknąć,a następnie zmienić go na Zaloguj się.

Możesz również zdecydować, co się stanie, gdy użytkownik zostanie pomyślnie zalogowany. Przejdź do Ustawienia ” Potwierdzenie Zakładka i wybierz akcję.

Możesz przekierować użytkownika na dowolny inny adres URL, przekierować go na stronę główną lub po prostu pokazać mu wiadomość, że jest teraz zalogowany.

Gdy będziesz zadowolony z ustawień formularza, kliknij przycisk Zapisz w prawym górnym rogu ekranu i zamknij Kreator formularzy.

Dodawanie niestandardowego formularza logowania do strony WordPress

WPForms ułatwia dodawanie niestandardowego formularza logowania do dowolnego posta lub strony WordPress.

Po prostu Edytuj stronę, na której chcesz dodać formularz logowania lub utwórz nowy. Następnie na ekranie edycji strony Dodaj blok WPForms do obszaru zawartości.

Następnie wybierz utworzony wcześniej formularz logowania, a Blok WPForms automatycznie załaduje go w obszarze zawartości.

Możesz teraz kontynuować edycję strony formularza logowania lub zapisać i opublikować zmiany.

Tworzenie niestandardowej strony logowania WordPress za pomocą SeedProd

Domyślnie strona niestandardowego formularza logowania WordPress będzie korzystać z szablonu i stylów strony motywu. Będzie miał menu nawigacyjne motywu, widżety nagłówka, stopki i paska bocznego.

Jeśli chcesz całkowicie przejąć całą stronę i zaprojektować coś od zera, możesz użyć wtyczki do tworzenia stron WordPress.

SeedProd to najlepszy kreator stron docelowych dla WordPress. Jest przyjazny dla początkujących i oferuje narzędzie do przeciągania i upuszczania, które pomoże Ci stworzyć dowolny typ strony docelowej, w tym stronę logowania, stronę wkrótce, stronę trybu konserwacji i wiele innych.

W tym artykule będziemy używać wersji SeedProd Pro, ponieważ zawiera szablon strony logowania i zaawansowane bloki stron do dostosowywania.

Istnieje również darmowa wersja SeedProd, ale nie zawiera opcji utworzenia strony logowania do witryny WordPress.

Najpierw musisz zainstalować wtyczkę SeedProd na swojej stronie internetowej. Aby uzyskać więcej informacji, możesz skorzystać z naszego przewodnika na temat instalacji wtyczki WordPress.

Gdy wtyczka jest aktywna, zostaniesz przekierowany do SeedProd w obszarze administracyjnym WordPress.

Następnie musisz wprowadzić swój klucz licencyjny, który możesz łatwo uzyskać z konta SeedProd. Po wprowadzeniu klucza kliknij przycisk „zweryfikuj klucz”.

Następnie jesteś gotowy do utworzenia strony logowania w SeedProd.

Na początek udaj się do SeedProd ” Strony następnie wybierz opcję strony logowania, klikając przycisk „Skonfiguruj stronę logowania”.

Na następnym ekranie możesz wybrać szablon dla swojej strony logowania. Istnieje również możliwość utworzenia strony od podstaw za pomocą pustego szablonu.

Sugerujemy jednak użycie szablonu, ponieważ łatwiej i szybciej można dostosować stronę logowania tak, jak chcesz.

Po wybraniu szablonu pojawi się wyskakujące okno z nazwą strony logowania. SeedProd użyje nazwy strony jako adresu URL Twojej strony docelowej.

Po wprowadzeniu tych danych kliknij przycisk „Zapisz i rozpocznij edycję strony”.

Teraz możesz edytować swoją stronę logowania za pomocą Kreatora przeciągnij i upuść SeedProd na karcie Projekt. Kreator pozwala łatwo dodać dowolny blok strony do strony, po prostu przeciągając go z lewego menu i umieszczając go w dowolnym miejscu na stronie.

Możesz na przykład dodać tekst do strony logowania, filmu lub nowego przycisku. Więcej opcji dostosowywania znajduje się w sekcji Zaawansowane bloki, gdzie można dodać minutnik, ikony udostępniania społecznościowego i wiele innych.

Pozwala nawet usunąć istniejące bloki stron w szablonie. Wszystko, co musisz zrobić, to kliknąć ikonę kosza, aby usunąć blok strony.

Następnie, jeśli klikniesz dowolną sekcję na stronie logowania, zobaczysz więcej opcji dostosowywania.

Na przykład możesz zmienić tekst i kolor pól, wybrać inną czcionkę, edytować kolor przycisku i nie tylko.

Gdy jesteś zadowolony z projektu strony logowania, śmiało i kliknij kartę Połącz u góry.

Możesz teraz łączyć różne usługi e-mail marketingu, takie jak Constant Contact, Drip, SendinBlue i inne.

Następnie możesz przejść do zakładki Ustawienia strony. W ustawieniach ogólnych SeedProd umożliwia edycję tytułu strony i zmianę statusu strony z wersji roboczej na publikację.

Możesz także wybrać opcję korzystania z linku SeedProd i dodać link partnerski SeedProd, aby zarabiać więcej pieniędzy w Internecie.

Jeśli chcesz zoptymalizować swoją stronę logowania pod kątem wyszukiwarek, przejdź do ustawień SEO. Tutaj możesz dodać tytuł SEO i opis swojej strony, wybrać ikonę favicon i miniatury mediów społecznościowych.

Istnieje również opcja włączenia no-index dla strony logowania. Włączając tę opcję, możesz uniemożliwić wyszukiwarkom indeksowanie i pozycjonowanie Twojej strony logowania w wynikach wyszukiwania.

Następnie możesz również dodać różne fragmenty kodu do strony logowania w Ustawieniach skryptów.

Teraz, gdy zmieniłeś ustawienia strony, kliknij przycisk Zapisz u góry.

Następnie musisz uaktywnić stronę logowania. Aby to zrobić, możesz wyjść z kreatora stron docelowych, a następnie przejść do SeedProd ” Strony.

Następnie kliknij przełącznik, aby zmienić status strony z nieaktywnej na aktywną.

Możesz teraz przejść do adresu URL strony logowania i zobaczyć go w akcji.

Jeśli wtyczki do tworzenia stron WordPress nie są twoją rzeczą, możesz użyć niestandardowego CSS do stylizacji formularza i samej strony logowania. Alternatywnie możesz również użyć wtyczki CSS Hero, aby łatwo dodawać niestandardowe style CSS.

Zmień Logo logowania WordPress i adres URL

Nie zawsze musisz tworzyć całkowicie niestandardową stronę logowania WordPress dla swojej witryny. W rzeczywistości wiele stron internetowych po prostu zastępuje logo WordPress i adres URL logo, jednocześnie korzystając z domyślnej strony logowania.

Jeśli chcesz zastąpić logo WordPress na ekranie logowania własnym logo, możesz łatwo użyć wtyczki WordPress lub dodać niestandardowy kod. Pokażemy Ci obie metody, z których możesz skorzystać, które najbardziej Ci odpowiadają.

Zmień Logo logowania WordPress i adres URL za pomocą wtyczki

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować Colorlib login Customizer. plugin. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczka dodaje nowy element menu o nazwie „login Customizer” do paska bocznego administratora WordPress. Kliknięcie go uruchomi konfigurację logowania.

Login customizer załaduje domyślny ekran logowania WordPress z opcjami dostosowywania po lewej stronie i podglądem na żywo po prawej stronie.

Aby zastąpić logo WordPress własnym, kliknij kartę „Opcje Logo” po prawej stronie. Stąd możesz ukryć logo WordPress, przesłać własne niestandardowe logo, zmienić adres URL logo i tekst.

Wtyczka pozwala również całkowicie dostosować domyślną stronę logowania WordPress. Możesz dodawać kolumny, obrazy tła, zmieniać kolory formularza logowania i nie tylko.

Zasadniczo możesz utworzyć niestandardową stronę logowania WordPress bez zmiany domyślnego adresu URL logowania WordPress.

Po zakończeniu kliknij przycisk Publikuj, aby zapisać zmiany. Możesz teraz odwiedzić stronę logowania WordPress, aby zobaczyć swój niestandardowy formularz logowania w akcji.

Zmień Logo logowania WordPress i adres URL bez wtyczki (Kod)

Ta metoda pozwala ręcznie zastąpić logo WordPress na ekranie logowania własnym niestandardowym logo.

Najpierw musisz przesłać swoje niestandardowe logo do biblioteki multimediów. Przejdź do Media ” Dodaj Nowy strona i prześlij swoje niestandardowe logo.

Po przesłaniu obrazu kliknij link „Edytuj” znajdujący się obok niego. Spowoduje to otwarcie strony edycji multimediów, na której należy skopiować adres URL pliku i wkleić go do pustego pliku tekstowego na komputerze.

Następnie musisz dodać następujący kod do funkcji szablonu.plik php lub wtyczka specyficzna dla witryny.

function wpb_login_logo () {?>
    < style type = "text / css">
        # login h1 a, .login h1 a {
            background-image: url(https://path/to/your/custom-logo.png);
		wysokość: 100px;
		width: 300px;
		tło-rozmiar: 300px 100px;
		background-repeat: no-repeat;
        padding-bottom: 10px;
        }
    < / style>
<?php }
add_action ('login_enqueue_scripts', 'wpb_login_logo');

Nie zapomnij zastąpić adresu URL obrazu tła adresem URL pliku skopiowanym wcześniej. Możesz także dostosować inne właściwości CSS, aby pasowały do Twojego niestandardowego obrazu logo.

Możesz teraz odwiedzić stronę logowania WordPress, aby zobaczyć swoje niestandardowe logo w akcji.

Ten kod zastępuje tylko logo WordPress. Nie zmienia to linku logo, który wskazuje na WordPress.org strona internetowa.

Zmieńmy to.

Wystarczy dodać następujący kod do funkcji motywu.plik php lub wtyczka specyficzna dla witryny. Możesz dodać ten kod tuż pod kodem dodanym wcześniej.

function wpb_login_logo_url () {
    return home_url();
}
add_filter ('login_headerurl', 'wpb_login_logo_url');

function wpb_login_logo_url_title () {
    return 'Nazwa i informacje o Twojej witrynie';
}
add_filter ('login_headertitle', 'wpb_login_logo_url_title');

Nie zapomnij zastąpić „Nazwa i informacje o swojej witrynie” rzeczywistą nazwą witryny. Niestandardowe logo na ekranie logowania będzie teraz wskazywać na stronę główną Twojej witryny.

To wszystko. Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się różnych sposobów tworzenia strony logowania WordPress dla Twojej witryny. Możesz również zobaczyć nasz najlepszy przewodnik dotyczący bezpieczeństwa WordPress, aby uzyskać wskazówki dotyczące poprawy bezpieczeństwa logowania WordPress lub zobaczyć nasze porównanie najlepszego oprogramowania do czatu na żywo dla małych firm.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.