Jak stworzyć własną stronę logowania do WordPressa (przewodnik) 2024

Domyślna strona logowania WordPress działa dobrze, ale nie reprezentuje w pełni twojej marki. Aby stworzyć bardziej angażujące doświadczenie, ważne jest, aby zaprezentować twoją markę i biznes na tej stronie.

Własny projekt strony logowania jest szczególnie przydatny w przypadku witryn członkowskich lub sklepów internetowych, w których użytkownicy często wchodzą w interakcję ze stroną logowania.

W WPBeginner wdrożyliśmy własny konfigurator strony logowania dla naszej bezpłatnej witryny internetowej z filmami WordPress. Pomogło nam to bardziej wyeksponować naszą markę, jednocześnie poprawiając komfort użytkowania.

W tym przewodniku pokażemy, jak stworzyć własną stronę logowania WordPress. Przeanalizujemy wiele metod, abyś mógł wybrać tę, która najlepiej odpowiada Twoim potrzebom biznesowym.

Oto, czego dowiesz się z tego przewodnika:

Dlaczego warto stworzyć własną stronę logowania WordPress?

Twoja witryna internetowa WordPress jest wyposażona w potężny system zarządzania użytkownikami. Umożliwia on użytkownikom tworzenie kont w sklepach e-handel, witrynach członkowskich i blogach.

Domyślnie strona logowania pokazuje branding i logo WordPress. Jest to dobre rozwiązanie, jeśli jesteś jedyną osobą z dostępem administratora lub masz bardzo niewielu użytkowników.

Jeśli jednak twoja witryna internetowa umożliwia klientom rejestrację i logowanie się, wówczas własna strona logowania zapewnia lepsze wrażenia użytkownika.

Niektórzy użytkownicy mogą być podejrzliwi, jeśli ekran logowania WordPress nie przypomina Twojej witryny internetowej. Prawdopodobnie poczują się bardziej jak w domu, jeśli użyjesz logo i projektu Twojej firmy.

Wreszcie, domyślny ekran logowania zawiera tylko formularz logowania. Tworząc własną stronę logowania, można wykorzystać przestrzeń do promowania innych stron lub ofert specjalnych.

Dlatego używamy własnej strony logowania dla wszystkich naszych witryn internetowych, w których klienci muszą wchodzić w interakcję z formularzem logowania.

Na przykład, oto własna strona logowania, której używamy dla witryny internetowej z filmami szkoleniowymi WPBeginner.

Biorąc to pod uwagę, przyjrzyjmy się jeszcze kilku przykładom własnych projektów stron logowania WordPress.

Przykłady projektów stron logowania WordPress

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

Niektórzy klienci tworzą własną stronę logowania, która wykorzystuje motyw i kolory ich witryny internetowej. Inni modyfikują domyślną stronę logowania, dodając własne tło, kolory i logo.

Oto kilka przykładów tego, co jest możliwe.

WPForms

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

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

Ich strona logowania pokazana powyżej informuje użytkowników o nowych funkcjach. Wykorzystuje własny branding, ilustracje w tle i kolory marki, aby stworzyć unikatowe doświadczenie logowania.

Jacquelynne Steves

Jacquelynne Steeves to witryna internetowa poświęcona sztuce i rzemiosłu, na której autorka publikuje treści dotyczące dekorowania domów, tworzenia kołder, wzorców, haftowania i nie tylko.

Ich strona logowania wykorzystuje własny obrazek tła, który pasuje do motywu ich witryny internetowej, a formularz logowania znajduje się po prawej stronie.

Kościelna grafika ruchoma

Strona logowania tej firmy zajmującej się projektowaniem ruchomej grafiki ma kolorowe tło, które ma wpływ na jej działalność.

Wykorzystuje ten sam nagłówek witryny, stopkę i menu nawigacyjne na ekranie logowania. Sam formularz logowania jest dość prosty, z jasnym tłem.

Przegląd zarządzania pożyczkami MITSloan

MITSloan Management Review wykorzystuje wyskakujący modal do wyświetlania formularza logowania i rejestracji.

Zaletą wyskakującego okienka jest to, że użytkownicy mogą logować się bez opuszczania strony. Oszczędza im to wczytywania nowej strony i oferuje szybsze doświadczenie użytkownika.

Czy jesteś już gotowy, aby dowiedzieć się, jak utworzyć własną stronę logowania w WordPress?

Tworzenie strony logowania WordPress przy użyciu motywu My Login (za darmo)

Theme My Login to darmowa wtyczka, która zmienia twoją stronę logowania, aby pasowała do twojego motywu WordPress. Nie jest zbyt konfigurowalna, ale zastąpi domyślną stronę logowania WordPress i sprawi, że będzie wyglądać bardziej profesjonalnie.

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 twoich własnych działań logowania, wylogowania, rejestracji, zapomnienia hasła i resetowania hasła.

Możesz dostosować te adresy URL logowania WordPress, przechodząc na stronę Motyw Moje logowanie ” Ogólne. Przewiń w dół do sekcji „Wtyczki”, aby zmodyfikować adresy URL używane przez wtyczkę do działań logowania.

Motyw My Login pozwala również na użycie krótkich kodów do tworzenia własnych stron logowania i rejestracji. Możesz po prostu utworzyć stronę dla każdego działania, a następnie dodać tutaj uproszczoną nazwę strony, aby wtyczka mogła prawidłowo znaleźć i przekierować użytkowników.

Zacznijmy od strony logowania.

Przejdź do Strona ” Utwórz nową, aby utworzyć nową stronę WordPress. Następnie nadaj swojej stronie tytuł i wpisz do niej krótki kod [theme-my-login].

Możesz teraz opublikować swoją stronę i wyświetlić jej podgląd, aby zobaczyć Twój konfigurator strony logowania w działaniu.

Tak to wygląda na naszej testowej witrynie internetowej WordPress.

Powtórz ten proces, aby utworzyć inne strony za pomocą poniższego krótkiego kodu:

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

[theme-my-login action="lostpassword"]Dla strony utraconego hasła

[theme-my-login action="resetpass"] Dla strony resetowania hasła

Tworzenie własnej strony logowania WordPress przy użyciu WPForms

WPForms to najlepsza na rynku wtyczka do tworzenia formularzy WordPress. Umożliwia ona łatwe tworzenie własnych formularzy logowania i rejestracji dla twojej witryny internetowej.

WPForms to wtyczka premium do WordPressa i aby uzyskać dostęp do dodatku User Registration, potrzebny będzie co najmniej ich plan pro. Użytkownicy WPBeginner mogą uzyskać 50% zniżki, korzystając z naszego kodu kuponu WPForms: SAVE50

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 należy przejść na stronę WPForms ” Ustawienia, aby wpisz klucz licencyjny. Informacje te można znaleźć na Twoim koncie w witrynie internetowej WPForms.

Po wpiszeniu klucza licencyjnego będziesz mógł zainstalować dodatki.

Przejdź na stronę WPForms ” Addons i znajdź dodatek User Registration Addon.

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

Przejdź do strony WPForms ” Utwórz nowy. Zostaniesz poproszony o wybranie szablonu dla twojego formularza. Wyszukaj szablon „Formularz logowania użytkownika” i kliknij przycisk „Użyj szablonu”, aby kontynuować.

WPForms będzie wczytywać formularz logowania użytkownika z wymaganymi polami.

Możesz kliknąć na pola, aby dodać twój własny opis lub tekst wokół nich.

Można również zmienić inne ustawienia.

Na przykład domyślny tytuł przycisku to „Prześlij”. Możesz kliknąć przycisk i zmienić tekst na „Zaloguj się”.

Można również zdecydować, co stanie się po pomyślnym zalogowaniu się użytkownika.

Musisz przejść do karty Ustawienia ” Potwierdzenie i wybrać działanie. 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, po prostu kliknij przycisk „Zapisz” w prawym górnym rogu ekranu i zamknij kreator formularzy.

Dodanie własnego formularza logowania do strony WordPressa

WPForms sprawia, że dodanie twojego własnego formularza logowania na dowolnym wpisie lub stronie WordPress jest bardzo łatwe.

Po prostu edytuj stronę, na której chcesz dodać formularz logowania lub utwórz nową. Następnie, na ekranie edycji strony, dodaj blok WPForms do twojego obszaru treści.

Następnie wybierz utworzony wcześniej formularz logowania, a blok WPForms będzie automatycznie wczytywał go wewnątrz obszaru treści.

Możesz teraz kontynuować edycję strony formularza logowania. Możesz dodać więcej tekstu lub bloków promocyjnych. Po zakończeniu nie zapomnij zapisać i opublikować twoich zmian.

Możesz teraz przejść na swoją witrynę internetową, aby zobaczyć swoją stronę logowania w działaniu.

Tworzenie własnej strony logowania WordPress przy użyciu SeedProd (zalecane)

Domyślnie własna strona formularza logowania WordPress będzie korzystać z szablonu strony i stylów twojego motywu. Będzie miała menu nawigacyjne, nagłówek, stopkę i widżety panelu bocznego twojego motywu.

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

SeedProd to najlepszy kreator stron docelowych dla WordPress. Jest przyjazny dla początkujących i oferuje kreator typu „przeciągnij i upuść”, który pomaga w tworzeniu dowolnego rodzaju strony docelowej, w tym strony logowania, strony wkrótce dostępnej, strony w trybie konserwacji i innych.

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

Istnieje również darmowa wersja SeedProd, ale nie zawiera ona opcji tworzenia strony logowania dla twojej witryny internetowej WordPress.

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

Po włączeniu wtyczki zostaniesz przekierowany do SeedProd w twoim obszarze administracyjnym WordPress.

W tym miejscu należy wpisz klucz licencyjny, który można łatwo uzyskać z konta SeedProd. Gdy wpiszesz klucz, kliknij przycisk „Zweryfikuj klucz”.

Następnie możesz utworzyć twoją stronę logowania w SeedProd.

Aby rozpocząć, przejdź do strony SeedProd ” Landing Pages i wybierz opcję „Login Page”, klikając przycisk „Set up a Login Page”.

Na następnym ekranie możesz wybrać szablon dla twojej strony logowania. Można również utworzyć stronę od podstaw, korzystając z szablonu Blank Template.

Sugerujemy jednak użycie szablonu, ponieważ łatwiej i szybciej jest dostosować stronę logowania.

Po wybraniu szablonu pojawi się wyskakujące okienko, w którym należy wpisz nazwę twojej strony logowania. SeedProd użyje nazwy strony jako adresu URL dla twojej strony docelowej.

Gdy już wpiszesz te dane, 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 w dowolnym miejscu na stronie.

Możesz na przykład dodać tekst, film lub utwórz nowy przycisk do twojej strony logowania. Istnieje więcej opcji konfiguratora w sekcji Advanced Blocks, gdzie można dodać licznik czasu, ikonki udostępniania społecznościowego i inne.

SeedProd pozwala nawet usuwać istniejące bloki stron w szablonie. Wystarczy kliknąć ikonkę kosza, aby usunąć blok strony.

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

Można na przykład zmienić tekst i kolor pól, wybrać inny krój pisma, edytować kolor przycisku i nie tylko.

Gdy jesteś zadowolony z wyglądu strony logowania, kliknij kartę „Połącz” u góry.

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

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

Możesz również wybrać opcję korzystania z odnośnika SeedProd i dodać swój odnośnik partnerski SeedProd, aby zarabiać więcej pieniędzy online.

Jeśli chcesz zoptymalizować twoją stronę logowania pod kątem wyszukiwarek, przejdź do ustawień SEO. Tutaj znajdziesz przycisk, który zainstaluje wtyczkę All In One SEO.

All in One SEO for WordPress (AIOSEO) to najlepsza wtyczka WordPress SEO, która pozwala zoptymalizować twoją witrynę internetową WordPress pod kątem wyszukiwarek i platform mediów społecznościowych.

Możesz dowiedzieć się, jak najlepiej z niego korzystać w naszym przewodniku na temat tego, jak poprawnie skonfigurować All In One SEO dla WordPress.

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

W tym miejscu można na przykład dodać kod Google Analytics, piksel Facebooka lub inny kod śledzenia.

Po zmianie ustawień strony, kliknij przycisk „Zapisz” u góry.

Następnie musisz włączyć Twoją stronę logowania. Aby to zrobić, wyjdź z kreatora landing page’y i przejdź do SeedProd ” Landing Pages.

Tam należy kliknąć przełącznik, aby zmienić status strony z „Nieaktywna” na „Aktywna”.

Możesz teraz przejść pod adres URL twojej strony logowania i zobaczyć ją w działaniu.

To jest zrzut ekranu logowania na naszej witrynie demonstracyjnej.

Alternatywa: Możesz również użyć Thrive Architect, aby zaprojektować atrakcyjną stronę logowania. Jest to kolejna świetna wtyczka typu „przeciągnij i upuść”, którą polecamy do tworzenia własnych stron.

Zawiera ponad 300 profesjonalnie zaprojektowanych szablonów, które pozwalają stworzyć stronę logowania, która może wyglądać jak ta poniżej.

Jeśli wtyczki WordPress do tworzenia stron nie są twoim rozwiązaniem, możesz użyć własnego CSS do stylizacji formularza i samej strony logowania.

Zmiana logo i adresu URL logowania WordPress

Nie zawsze trzeba tworzyć własną stronę logowania WordPress dla twojej witryny internetowej. Wiele witryn internetowych 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 twoim własnym logo, możesz łatwo użyć wtyczki WordPress lub dodać własny kod. Pokażemy Ci obie metody i możesz użyć tej, która najbardziej Ci odpowiada.

Metoda 1: Zmiana logo logowania i adresu URL WordPress za pomocą wtyczki

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

Po włączaniu wtyczka dodaje nowy element menu do konfiguratora motywu WordPress. Wystarczy przejść do Wygląd ” Dostosuj i kliknąć nowy element „Colorlib Login Customizer”, aby uruchomić konfigurator logowania.

Pamiętaj, że ta opcja nie jest dostępna, jeśli używasz motywu blokowego, więc w takim przypadku zalecamy użycie metody kodu.

Konfigurator logowania wczyta twój domyślny ekran logowania WordPress z opcjami dostosowania po lewej stronie i podglądem na żywo po prawej.

Aby zastąpić logo WordPressa twoim własnym, kliknij kartę „Opcje logo” po prawej stronie.

Z tego miejsca można ukryć logo WordPress, przesłać twoje własne konfigurator logo i zmienić adres URL logo i tekst.

Można również dostosować rozmiar i kolor tekstu oraz szerokość i wysokość własnego logo.

Wtyczka umożliwia również całkowite dostosowanie domyślnej strony logowania WordPress. Można dodawać kolumny, obrazki tła, zmieniać kolory formularza logowania i nie tylko.

Zasadniczo można utworzyć własną stronę logowania WordPress bez zmiany domyślnego adresu URL logowania WordPress.

Po zakończeniu kliknij przycisk „Opublikuj”, aby zapisać twoje zmiany. Możesz teraz przejść na stronę logowania WordPress, aby zobaczyć Twój własny formularz logowania w działaniu.

Metoda 2: Zmiana logo i adresu URL logowania WordPress za pomocą kodu

Ta metoda pozwala ręcznie zastąpić logo WordPress na ekranie logowania własnym, dostosowanym logo bez potrzeby korzystania z wtyczki. Nadaje się również do motywów blokowych.

Po pierwsze, musisz przesłać własne logo do biblioteki multimediów. Wystarczy przejść do strony Media ” Utwórz nowe i wgrać twoje własne logo.

Po przesłaniu obrazka kliknij odnośnik „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 w dogodnym miejscu, takim jak pusty plik tekstowy na twoim komputerze.

Następnie musisz dodać następujący fragment kodu do pliku functions.php twojego motywu lub użyć wtyczki WPCode, aby łatwo dodać własny konfigurator bez naruszania witryny (zalecane):

function wpb_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(http://path/to/your/custom-logo.png);
        height:100px;
        width:300px;
        background-size: 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 obrazka tła w linii 4 adresem URL pliku, który skopiowałeś wcześniej. Możesz także dostosować inne właściwości CSS, aby dopasować swój własny obrazek logo.

Możesz teraz przejść na stronę logowania WordPress, aby zobaczyć swoje własne logo.

Kod ten zastępuje jednak tylko logo WordPress. Nie zmienia odnośnika do logo, który wskazuje na witrynę internetową WordPress.org.

Zmieńmy to.

Wystarczy dodać następujący kod do pliku functions.php twojego motywu lub WPCode. Można go wkleić 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 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'wpb_login_logo_url_title' );

Nie zapomnij zastąpić „Your Site Name and Info” nazwą twojej witryny. Konfigurator na ekranie logowania będzie teraz wskazywał stronę główną twojej witryny.

Wyłączenie przełącznika języka strony logowania WordPress

Wydanie WordPress 5.9 wprowadziło nową rozwijaną opcję logowania, która pozwala użytkownikom wybrać nowy język podczas logowania się do witryny internetowej.

Jeśli na witrynie jest włączony więcej niż jeden język, pojawi się ta opcja.

Działa to dobrze w przypadku wielojęzycznych witryn internetowych i zespołów z różnymi użytkownikami, którzy mogą chcieć uzyskać dostęp do kokpitu WordPress w innym języku.

Jeśli jednak chcesz, aby Twoja strona logowania była prosta, a użytkownicy nie musieli często przełączać języków, usuwanie przełącznika języka może pomóc w jej uporządkowaniu. Można to zrobić za pomocą wtyczki lub kodu.

Metoda 1: Wyłączenie przełącznika języków za pomocą wtyczki

Wystarczy zainstalować i włączyć wtyczkę Disable Login Language Switcher. Po włączaniu opcja przełącznika języka będzie automatycznie usuwana. Nie ma żadnych dodatkowych ustawień do skonfigurowania.

Teraz, gdy przejdziesz do ekranu logowania, zobaczysz standardowy ekran logowania bez opcji przełączania języka.

Metoda 2: Wyłączenie przełącznika języka za pomocą kodu

Innym sposobem na wyłączenie przełącznika języka jest dodanie kodu do WordPressa.

Wystarczy dodać poniższy fragment kodu do twojego pliku functions.php lub w snippetach WPCode. Aby uzyskać szczegółowe informacje, zobacz nasz poradnik na temat dodawania własnych fragmentów kodu w WordPress:

add_filter( 'login_display_language_dropdown', '__return_false' );

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat wyłączania przełącznika języka na ekranie logowania WordPress.

To wszystko. Mamy nadzieję, że ten artykuł pomógł ci poznać różne sposoby tworzenia strony logowania WordPress dla twojej witryny internetowej. Możesz również zapoznać się z naszym poradnikiem na temat dodawania logowania Google jednym kliknięciem w WordPress lub naszym przewodnikiem na temat wyboru idealnego schematu kolorów dla twojej witryny internetowej.

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.