Tworzenie niestandardowego formularza logowania WordPress z płaskim interfejsem użytkownika

Ostatnia aktualizacja - 8 lipca 2021

WordPress istnieje już od dłuższego czasu. To, co zaczęło się jako portal dla blogerów, teraz stało się systemem zarządzania treścią odpowiedzialnym za obsługę prawie połowy wszystkich stron internetowych na świecie. Jego prosty, ale intuicyjny interfejs i konfigurowalne projekty sprawiły, że jest to numer jeden dla twórców stron internetowych i projektantów na całym świecie, którzy chcą budować swoje witryny od podstaw.

Każdy, kto korzysta z WordPressa, zwraca uwagę na szczegóły i oryginalność, aby poprawić wrażenia użytkownika i podnieść współczynnik klikalności. Większość programistów koncentruje się głównie na samych motywach, ale w przypadku witryn członkowskich i innych platform punktem wyjścia jest strona logowania. Wyobraź sobie, że jeśli jesteś nowo zarejestrowanym członkiem na stronie internetowej i logujesz się do ekranu, który jest podobny do niezarejestrowanych członków, wpływ jest nieco osłabiony i pozostawia cię raczej niezadowolony. Jednak posiadanie strony logowania WordPress, która jest dostosowana do wymagań i estetyki Twojej firmy, pozostawia lepsze wrażenie na odwiedzających i wzbudza ich zainteresowanie.

Aby w tym pomóc, podsumowaliśmy kilka prostych wskazówek dotyczących dołączania stylów do niestandardowej strony logowania WordPress, która wizualnie integruje się ze schematem projektowania witryny.

Tworzenie niestandardowej strony logowania WordPress bez wtyczki

Można wprowadzić kilka zmian na stronie logowania WordPress, aktualizując kod źródłowy w pliku function.php wybranego motywu. Chociaż po aktualizacji WordPressa te zmiany zostaną utracone. Dzieje się tak, ponieważ arkusz stylów motywu dla strony logowania nie jest częścią konfiguracji motywu WordPress, która wymaga utworzenia innego arkusza stylów dla niestandardowej strony logowania.

Zacznij od utworzenia folderu o nazwie „Login” w folderze motywu i dodaj plik .txt o nazwie custom-login-style.css . Od tego momentu możesz przejść do podstawowych modyfikacji, aby dostosować i dodać unikatowość do strony logowania.

Zmień tło

Aby zaktualizować kolor tła strony lub określonego przycisku, wybierz kolor tła: #222222 i zmień kod szesnastkowy na wybrany kolor. Skorzystaj z palety kolorów, aby wybrać kolor, który pasuje do estetyki Twojej firmy i jest atrakcyjny wizualnie.

Ponadto, jeśli chcesz zmienić obraz tła strony logowania, wybierz linię kodu background-image: url(logo_login.png') i zastąp logo_login.png , która jest nazwą pliku, zaktualizowanym adresem URL pliku obrazu .

Firmy, które chcą, aby ich klienci zapamiętali ich markę, mogą zmienić logo WordPress na własne logo. Po zapisaniu niestandardowego pliku obrazu logo w folderze logowania zastąp nazwę pliku własnym logo w obrazie tła: kod url('logo_login').

Dostosowywanie formularza logowania poprzez dostosowanie dopełnienia i marginesu

Deweloperzy mogą dostosować formularz logowania tak, aby ich strona była atrakcyjna i odpowiednio dopasowana do wyglądu witryny. Od dopełnienia przycisków po kolor i rozmiar czcionki etykiet itp. Możesz dodać więcej miejsca wewnątrz przycisku, aby tekst nie był ściśnięty, zwiększając dopełnienie; po prostu zwiększ liczby w dopełnieniu kodu : 12px 12px 12px 12px. Jeśli chcesz zrobić więcej miejsca poza przyciskiem, aby otaczające elementy nie były ciasno upakowane, możesz to zrobić, zwiększając margines na marginesie kodu : 12px 12px 12px 12px. Nawet coś tak prostego, jak dodanie kilku białych spacji, może łącznie wpłynąć na ostateczny wygląd strony logowania i sprawić, że będzie wyglądać na bardziej złożoną.

Zmiana rozmiaru i koloru czcionki

Możesz zmienić rozmiar czcionki tekstu akapitowego, linków lub pól formularzy za pomocą kodu font-size: 15px , dostosowując liczbę do rozmiaru swoich upodobań. To samo można zrobić dla koloru czcionki, aktualizując kolor w kolorze kodu : #222222 i zastępując kolor.

Modyfikowanie komunikatu o błędzie logowania

Wraz ze wzrostem liczby cyberprzestępczości i oszustw w Internecie twórcy stron internetowych i właściciele firm nie mogą ryzykować na swoich stronach internetowych i tracą poufne dane. Gdy użytkownik pospiesznie wprowadza nieprawidłowe dane logowania, automatycznie generowany jest domyślny komunikat o błędzie. Chociaż ma to zasygnalizować użytkownikom ten błąd, może to być luka dla hakerów, którzy próbują złamać dane logowania. Tak więc najlepszym sposobem na powstrzymanie hakerów jest zmiana komunikatu o błędzie w pliku function.php .

Podsumowując, osoby z rozległą wiedzą na temat CSS mogą mieć pełną kontrolę nad stylem i dostosowywaniem swojego formularza logowania WordPress. Ale jeśli twój brak umiejętności kodowania ogranicza twoją zdolność do tworzenia niestandardowej strony logowania, nie martw się! W repozytorium WordPressa dostępnych jest wiele opcji wtyczek , aby usprawnić proces tworzenia stron internetowych WordPress , a my wymieniliśmy dla Ciebie najpopularniejsze z nich.

Wtyczka konfiguratora logowania

Login Customizer to jedna z najbardziej przyjaznych dla użytkownika wtyczek, która umożliwia wprowadzanie zmian bezpośrednio z Twojego WordPress Customizer. Po prostym procesie instalacji możesz łatwo uzyskać do niego dostęp z pulpitu WordPress w zakładce Wygląd . Kliknij Rozpocznij dostosowywanie , a przekieruje Cię do ekranu dostosowywania, na którym przeprojektujesz wszystkie obszary zgodnie z własnymi upodobaniami.

Dostosowywanie logowania Colorlib

Colorlib Login Customizer to pomysłowe i elastyczne narzędzie, które zawiera wszystkie funkcje wtyczki premium, ale oferuje je bezpłatnie. Szeroka gama unikalnych funkcji sprawia, że ​​jest to najlepszy wybór dla twórców stron internetowych, którzy chcą zbudować niestandardowe rozwiązanie dla swoich użytkowników. To również umożliwia dostosowywanie za pomocą WordPress Customizer, dzięki czemu możesz łatwo nawigować i przemodelować swoją stronę logowania.

W podsumowaniu

Ostatecznie istnieje więcej niż jedno podejście do dostosowywania strony logowania, a programiści na wszystkich poziomach doświadczenia mogą je wypróbować. Liczy się to, że niestandardowa strona logowania do WordPressa pasuje i uzupełnia estetykę rzeczywistej witryny, aby poprawić wrażenia użytkownika. Dostosowanie strony logowania do witryny to prosty, ale skuteczny sposób na zachwyt klientów i zbudowanie tożsamości marki. Rozpoczęcie proste i budowanie na podstawach może przekształcić prosty ekran w coś spektakularnego i zaoferować klientom spersonalizowane wrażenia online, których nigdy wcześniej nie widzieli.