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

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


Jeśli prowadzisz witrynę członkowską WordPress lub sklep internetowy, wielu użytkowników często zobaczy stronę logowania. Dostosowanie domyślnej strony logowania WordPress umożliwia lepszą obsługę.

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

Jak łatwo utworzyć niestandardową stronę logowania WordPress dla swojej witryny

Oto, czego nauczysz się z tego przewodnika.

    Po co tworzyć niestandardową stronę logowania do WordPress?

    WordPress jest wyposażony w wydajny system zarządzania użytkownikami. Umożliwia to użytkownikom tworzenie kont w sklepach eCommerce, witrynach członkowskich lub na blogu.

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

    Domyślny ekran logowania WordPress

    Jeśli jednak witryna umożliwia użytkownikom rejestrację i logowanie, niestandardowa strona logowania zapewnia lepszą obsługę.

    Korzystanie z własnego logo i projektu sprawia, że ​​użytkownicy czują się jak w domu. Przekierowanie ich do domyślnego ekranu logowania WordPress, który nie przypomina witryny, może być podejrzane dla użytkowników.

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

    To powiedziawszy, rzućmy okiem na przykłady niestandardowych projektów stron logowania do WordPress.

    Przykłady projektowania strony logowania do WordPress

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

    Niektóre tworzą niestandardowe strony logowania, które wykorzystują motyw i kolory swojej witryny. Inni modyfikują domyślną stronę logowania, dodając do niej niestandardowe tło, kolory i własne logo.

    1. WPForms

    WPForms

    WPForms to najlepsza wtyczka formularza kontaktowego 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 używa układu dwóch kolumn. Lewa kolumna zawiera formularz logowania, a prawa kolumna służy do wyróżnienia promocji i innych wezwań do działania. W powyższym przykładzie używają strony logowania do udostępniania swojego raportu rocznego. Wykorzystuje niestandardowe logo, ilustrację tła i kolory marki, aby stworzyć niepowtarzalne doświadczenie logowania.

    2. Rock My Wedding

    Rock My Wedding

    Witryna Rock My Wedding korzysta z wyskakującego menu do wyświetlenia formularza logowania i rejestracji. Zaletą korzystania z wyskakującego okienka jest to, że użytkownicy mogą się logować bez opuszczania strony. Zapisuje je przed wczytaniem nowej strony i zapewnia szybszą obsługę.

    3. Jacquelynne Steves

    Jacquelynne Steves

    Jacquelynne Steeves to strona poświęcona sztuce i rzemieślnictwu, na której autor publikuje treści dotyczące dekoracji domu, wykonywania kołder, wzorów, haftu i innych. Strona logowania używa niestandardowego obrazu tła pasującego do motywu witryny z formularzem logowania po prawej stronie.

    4. Motion Motion Graphics

    Church Motion Graphics

    Strona logowania tej firmy zajmującej się projektowaniem animacji ruchów wykorzystuje kolorowe tło, odzwierciedlające jej działalność. Używa tego samego menu nagłówka, stopki i menu nawigacji na ekranie logowania. Sam formularz logowania jest dość prosty z ciemnym tłem.

    5. Przegląd zarządzania MITSLoan

    Przegląd zarządzania MITSLoan

    Witryna MITSLoan Management Review korzysta z domyślnego ekranu logowania WordPress. Wykorzystuje niestandardowy CSS z własnym logo, aby ukryć branding WordPress.

    Tworzenie niestandardowej strony logowania Front-End w WordPress

    Istnieje kilka wtyczek WordPress, których można użyć do utworzenia niestandardowej strony logowania w WordPress. Pokażemy Ci dwie różne wtyczki i możesz wybrać tę, która najbardziej Ci odpowiada.

    Tworzenie strony logowania WordPress przy użyciu motywu Moje logowanie

    Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Theme My Login. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, w jaki sposób zainstalować wtyczkę WordPress.

    Po aktywacji Theme My Login automatycznie tworzy adresy URL dla niestandardowego logowania, wylogowania, rejestracji, zapomnienia hasła i zresetowania akcji hasła.

    Możesz dostosować te adresy URL logowania do WordPress, odwiedzając stronę Motyw Moje logowanie »Ogólne strona. Przewiń w dół do sekcji „Informacje o pracy”, aby zmodyfikować adresy URL używane przez wtyczkę do akcji logowania.

    Motyw Moje strony logowania

    Motyw My Login umożliwia także 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 informacje o stronie, aby wtyczka mogła poprawnie znaleźć i przekierować użytkowników.

    Zacznijmy od strony logowania.

    Udaj się do Strona »Dodaj nowy aby utworzyć nową stronę WordPress. Musisz nadać swojej stronie tytuł, a następnie wpisać następujący skrót „[theme-my-login]” w obszarze zawartości.

    Dodawanie krótkiego kodu

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

    Niestandardowa strona logowania do WordPress

    Powtórz ten proces, aby utworzyć inne strony, używając następujących skrótów.

    [theme-my-login action = ”register”] dla formularza rejestracyjnego.

    [theme-my-login action = ”lostpassword”] ​​dla strony utraconego hasła.

    [theme-my-login action = ”resetpass”] użyj go na stronie resetowania hasła.

    Tworzenie niestandardowej strony logowania WordPress za pomocą WPForms

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

    WPForms to dodatkowa wtyczka WordPress i będziesz potrzebować przynajmniej jej profesjonalnego planu, aby uzyskać dostęp do dodatku do rejestracji użytkownika. Użytkownicy WPBeginner mogą uzyskać 50% zniżki, korzystając z naszego kodu kuponu WPForms: ZAPISZ 50

    Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę WPForms. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, w jaki sposób zainstalować wtyczkę WordPress.

    Po aktywacji musisz odwiedzić WPForms »Ustawienia stronę, aby wprowadzić klucz licencyjny. Informacje te można znaleźć pod swoim kontem na stronie WPForms.

    Licencja WPForms

    Po wprowadzeniu klucza licencyjnego będziesz mógł zainstalować dodatki. Śmiało i odwiedź WPForms »Dodatki i znajdź Dodatek do rejestracji użytkownika.

    Zainstaluj dodatek do rejestracji użytkownika

    Następnie kliknij przycisk Zainstaluj dodatek, aby pobrać i aktywować dodatek. Możesz teraz utworzyć własne niestandardowe formularze logowania.

    Udaj się do WPForms »Dodaj nowe i przewiń w dół do szablonu „Formularz logowania użytkownika”. Aby kontynuować, kliknij przycisk „Utwórz formularz logowania użytkownika”.

    Utwórz formularz logowania

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

    Konstruktor formularzy WPForms

    Możesz także zmienić inne ustawienia. Na przykład automatycznie dodaje „tytuł” ​​jako tytuł przycisku. Możesz go kliknąć, a następnie zmienić na Login.

    Ustawienia formularza

    Możesz także zdecydować, co stanie się po pomyślnym zalogowaniu użytkownika. Przejdź do Ustawienia »Potwierdzenie kartę i wybierz akcję.

    Przekieruj zalogowanych użytkowników

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

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

    Dodawanie niestandardowego formularza logowania do strony WordPress

    WPForms bardzo 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 nową. Na ekranie edycji strony dodaj blok WPForms do obszaru zawartości.

    Dodawanie bloku WPForms do postu

    Następnie wybierz wcześniej utworzony formularz logowania, a blok WPForms automatycznie załaduje go do obszaru zawartości.

    Podgląd formularza logowania

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

    Dostosowywanie projektu strony formularza logowania do WordPress

    Domyślnie niestandardowa strona formularza logowania do WordPress używa szablonu i stylów strony motywu. Będzie miał menu nawigacji motywu, nagłówek, stopkę i widżety paska bocznego.

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

    Za pomocą wtyczki programu budującego strony możesz utworzyć niestandardowy układ strony, a następnie dodać widżet formularza logowania dostarczony przez Theme My Login lub WPForms.

    Na poniższym zrzucie ekranu wykorzystaliśmy popularną wtyczkę Beaver Builder. Użyliśmy obrazu tła na układzie pełnoekranowym, a następnie dodaliśmy dwie kolumny. W jednej kolumnie dodaliśmy trochę tekstu i przycisk. W drugiej kolumnie dodaliśmy widżet WPForms.

    Tworzenie niestandardowej strony logowania za pomocą wtyczki programu budującego strony

    Zaletą Beaver Builder jest to, że jest to rozwiązanie w 100% przeciągnij i upuść.

    Uwaga: Ponieważ jesteś już zalogowany, zarówno Theme My Login, jak i wtyczki WPForms mogą nie wyświetlać podglądu na żywo formularza logowania. Wtyczka WPForms ma opcję, w której możesz to wyłączyć w ustawieniach formularza.

    Jeśli nie lubisz wtyczek do konstruktorów stron WordPress, możesz użyć niestandardowego CSS do stylizowania formularza i samej strony logowania. Możesz także użyć wtyczki CSS Hero, aby łatwo dodać niestandardowe style CSS.

    Zmień logo logowania i adres URL WordPress

    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, nadal korzystając z domyślnej strony logowania.

    Jeśli chcesz zastąpić logo WordPress na ekranie logowania własnym logo, możesz to łatwo zrobić za pomocą wtyczki WordPress lub dodając niestandardowy kod. Pokażemy Ci obie metody, z których możesz skorzystać, która najbardziej Ci odpowiada.

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

    Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować narzędzie Colorlib Login Customizer. podłącz. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, w jaki sposób zainstalować wtyczkę WordPress.

    Po aktywacji wtyczka dodaje nowy element menu o nazwie „Personalizator logowania” na pasku bocznym administratora WordPress. Kliknięcie go uruchomi konfigurator logowania.

    Konfigurator logowania

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

    Aby zamienić logo WordPress na własne, 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.

    Prześlij niestandardowe logo na stronę logowania

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

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

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

    Niestandardowa strona logowania WordPress z niestandardowym logo

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

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

    Najpierw musisz przesłać niestandardowe logo do biblioteki multimediów. Iść do Media »Dodaj nowe stronę i prześlij własne logo.

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

    Następnie musisz dodać następujący kod do pliku functions.php lub wtyczki specyficznej dla witryny.

    funkcja wpb_login_logo () { ?>

    #login h1 a, .login h1 a {
    background-image: url (http: //path/to/your/custom-logo.png);
    wysokość: 100 pikseli;
    szerokość: 300px;
    rozmiar tła: 300px 100px;
    powtarzanie w tle: brak powtarzania;
    padding-bottom: 10px;
    }

    <?php}
    add Działalności („login_enqueue_scripts”, „wpb_login_logo”);

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

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

    Strona logowania WordPress z niestandardowym logo

    Ten kod zastępuje tylko logo WordPress. Nie zmienia to linku z logo, który prowadzi do strony WordPress.org.

    Zmieńmy to.

    Po prostu dodaj następujący kod do pliku functions.php motywu lub wtyczki specyficznej dla witryny. Możesz dodać ten kod bezpośrednio pod kodem, który wcześniej dodałeś.

    funkcja wpb_login_logo_url () {
    return home_url ();
    }
    add_filter (‘login_headerurl’, ‘wpb_login_logo_url’);

    funkcja wpb_login_logo_url_title () {
    zwróć „Nazwa witryny i informacje”;
    }
    add_filter (‘login_headertitle’, ‘wpb_login_logo_url_title’);

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

    To wszystko. Mamy nadzieję, że ten artykuł pomógł Ci poznać różne sposoby tworzenia strony logowania do WordPress dla Twojej witryny. Możesz również zapoznać się z naszym najlepszym przewodnikiem bezpieczeństwa WordPress, w którym znajdziesz wskazówki dotyczące poprawy bezpieczeństwa logowania WordPress.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map