Strona logowania WordPress nie jest bardzo przyjazna, prawda? To bardziej nudne drzwi w alejce niż spektakularne perłowe bramy. Ale to, jak inicjujesz użytkowników do tajnej części witryny, ma znaczenie, zwłaszcza jeśli masz tam coś specjalnego.
Portal, przez który ludzie wchodzą do Twojego świata, pomaga budować oczekiwanie i primes ich podglądaczy na to, co jest w środku. Branding Twojej strony logowania WordPress może pomóc ci podnieść chronioną treść i panel administracyjny WordPress, informując odwiedzającego, że to nie jest zwykła witryna WordPress.
W tym poście pokażę Ci, co wchodzi w skład budowania niestandardowej strony logowania WordPress. Pokażę Ci, jak wprowadzić zmiany za pomocą odpowiedniego kodu CSS i / lub PHP, dla tych z Was, którzy chcą mieć pełną kontrolę lub chcą zmienić tylko jedną małą rzecz.
Następnie omówimy, jak wprowadzić zmiany za pomocą Brandy (dawniej wtyczki Ultimate Branding), która pozwoli Ci całkowicie dostosować wygląd formularza logowania, szybko i bez dotykania kodu. Mamy również krótki film, który pokazuje, jak dokładnie skonfigurować Brandę, więc bądź na bieżąco z tym lub przejdź do przodu.
Zawartość
Jak dostosować różne elementy strony logowania za pomocą CSS i PHP:
Jak dostosować różne elementy strony logowania za pomocą Branda:
- Logo na ekranie logowania
- Tło Strony Logowania
- Formularz Logowania
- Zapamiętaj Mnie Checkbox
- Komunikat O Błędzie
- Linki pod formularzem logowania WordPress
- Logowanie Redirect
Strona Logowania WordPress Dostosuj
Strona logowania WordPress jest taka sama jak każda inna strona w Twojej witrynie WordPress:
- Możesz zmienić styl i kolory, edytując element za pomocą CSS
- Możesz zmienić funkcjonalność lub dodawać, odejmować i przenosić elementy, zmieniając układ za pomocą hooków i filtrów w PHP.
Jak Dodać Własny CSS do strony logowania WordPress
Strona logowania WordPress nie korzysta z arkusza stylów dołączonego do Twojego motywu. Oznacza to, że jeśli spróbujesz dodać CSS, aby dostosować stronę logowania do swoich stylów.plik css w folderze motywu zmiany nie pojawią się. Musisz dodać własne style CSS do nagłówka strony logowania za pomocą PHP.
Jeśli masz tylko kilka linii CSS, możesz utworzyć własną funkcję i użyć Hooka login_enqueue_scripts, aby wstawić CSS do nagłówka strony logowania.
W powyższym przykładzie chcę usunąć Powrót do link pod formularzem logowania. Zmieniam tylko jedną rzecz, ale można dostosować wiele elementów pomiędzy
Aby załadować ten niestandardowy CSS, dodałem moją niestandardową funkcję ze wszystkimi niestandardowymi CSS do strony logowania za pomocą login_enqueue_scripts. Dodałbyś cały powyższy kod do swoich funkcji.pliku php, wystarczy wykluczyć otwarcie
Jest to prosty sposób na dodanie kilku stylów. Jeśli chcesz wprowadzić wiele zmian, sugeruję utworzenie dodatkowego arkusza stylów w plikach motywów, aby łatwiej było nim zarządzać.
Aby dodać niestandardowy arkusz stylów do nagłówka strony logowania, zamiast używać
W powyższym przykładzie niestandardowy plik CSS w moim motywie, w którym będę dodawać dostosowania dla mojej strony logowania, nazywa się style-login.css. Dodam mój CSS do style-login.css i dodaj powyższy kod do mojego pliku funkcji, aby go załadować.
Elementy Strony Logowania WordPress
Oto, jak wygląda Domyślna strona logowania WordPress w celach informacyjnych:
Aby dostosować każdy element za pomocą CSS, musisz mieć możliwość kierowania go za pomocą selektora. Innymi słowy, musisz znać jego nazwę.
Oto kilka konkretnych selektorów dla strony logowania i to, co kontrolują:
| Selektor | Modyfikuje |
|---|---|
| ciało.login | Tło strony |
| ciało.login div # login h1 a | Logo WordPress |
| ciało.login div # login form#loginform | Białe pudełko zawierające formularz |
| ciało.login div # login form#LoginForm P label | Etykiety pól Nazwa użytkownika i hasło |
| ciało.login div # login form # LoginForm input | Oba pola wejściowe (nazwa użytkownika i hasło) |
| ciało.login div # login form # LoginForm input # user_login | Tylko pole wprowadzania nazwy użytkownika |
| ciało.login div # login form # LoginForm input # user_pass | Tylko pole wprowadzania hasła |
| ciało.login div # login form # loginform P. forgetmenot | Pole Remember Me |
| ciało.login div # login form # loginform P. submit input # wp-submit | Przycisk Prześlij |
| ciało.login div # login p # nav a | Link utracone hasło |
| ciało.login div#login p # backtoblog a | Powrót do linku |
Crash Course w CSS
Znalazłeś element, którym chcesz się zająć? Dobrze. Jeśli znasz CSS, wiesz, gdzie iść, więc możesz przeskoczyć tę sekcję. Reszta za mną. Oto jak dostosować elementy za pomocą CSS. Jeśli utkniesz, zostaw nam komentarz. Jeśli wpadniesz w frustrację i chcesz łatwego rozwiązania, wypróbuj Brandę.
Jak usunąć Element
Aby ukryć element, taki jak Powrót do link tak jak wcześniej, możesz użyć display: none;
Oto, jak na przykład ukryć utracone hasło.
Jak zmienić tło
Aby zmienić kolor tła elementu, takiego jak tło strony lub tło przycisku, użyjesz background-color:#222222; i zastąp #222222 wybranym kolorem. W poniższym przykładzie użyłem # 17a8e3 który jest jaśniejszy na niebiesko.
Ja też używam !ważne, aby nadpisać domyślny kolor. Jeśli używasz bardzo konkretnego selektora, nie będziesz musiał go używać !ważne. Ale w niektórych przypadkach, jeśli Niestandardowy CSS nie działa, być może będziesz musiał go dodać.
Jeśli chcesz dodać obraz tła, użyjesz background-image: url (‘login-logo.png’); i zastąpić login-logo.pnp z adresem URL pliku obrazu. Upewnij się, że dodałeś plik tła do tego samego katalogu co arkusz stylów. Jeśli używasz programu do przesyłania biblioteki multimediów, nie będzie on działał.
W poniższym przykładzie zobaczysz, że zmieniłem miękkie szare tło strony logowania na obraz home-bg.. jpg
Aby zmienić logo logowania WordPress, użyjesz następujących:
Jak dodać przestrzeń wokół elementu
Podczas dodawania spacji do elementu należy określić, czy ma ona znajdować się wewnątrz (wypełnienie) lub na zewnątrz (margines) elementu.
Think przycisku submit. Jeśli chcesz utworzyć więcej miejsca wewnątrz przycisku, aby tekst wewnątrz miał miejsce do oddychania i nie był tak blisko krawędzi, musisz zwiększyć padding padding: 10px 10px 10px 10px 10px;. Jeśli chcesz utworzyć pokój poza przyciskiem, aby inne elementy nie były tak blisko, zwiększysz margines marginesu: 10px 10px 10px 10px;
Wypełnienie i margines mają cztery wartości. Jeden dla Góry, jeden dla prawej, jeden dla dołu i jeden dla lewej strony, w tej kolejności.
Na przykład dla elementu z wypełnieniem: 10px 20px 30px 40px:
- Górna wyściółka będzie miała rozmiar 10px.
- Po prawej stronie będzie padding 20px.
- Na dole będzie padding 30px.
- A po lewej stronie będzie padding 40px.
Margines działa w ten sam sposób.
Jak zmienić rozmiar i kolor czcionki
Zmień rozmiar czcionki tekstu akapitu, linków lub pól formularza za pomocą font-size: 16px;. Wystarczy zastąpić 16px żądanym rozmiarem. Możesz zmienić kolor tekstu za pomocą koloru: # 222222;, wystarczy zastąpić #222222.
Należy również pamiętać, że do jednego elementu można dodać wiele stylów.
Jak zmienić granicę
/ Style = ” Border: 3px solid #222222;” / Najpierw określisz szerokość obramowania, a następnie styl (Pełny, przerywany itp.) i zakończyć określając kolor
Oto przykład z wieloma stylami.
Jak zmienić stronę logowania administratora za pomocą PHP
Aby zmienić funkcjonalność strony logowania WordPress, będziesz musiał użyć PHP. Dodasz te funkcje do swoich funkcji.plik php.
Zmień Komunikat o błędzie logowania
Oprócz znakowania Komunikatu o błędzie, modyfikowanie Komunikatu o błędzie może pomóc poprawić bezpieczeństwo witryny. Jeśli wpiszesz nieprawidłowe hasło lub Nazwę użytkownika, WordPress zwróci bardzo konkretny komunikat o błędzie, aby poinformować Cię, co zrobiłeś źle. Pomaga to użytkownikom, ale także hakerom.
Za pomocą tej funkcji można nadpisać domyślny komunikat o błędzie:
Możesz dostosować wiadomość, zmieniając “Nieprawidłowe dane logowania” wiadomość w cudzysłowie. Zostaw jednak cytaty.
Zmień adres URL przekierowania
Gdy użytkownik się zaloguje, możesz skierować go z powrotem do interfejsu frontendowego zamiast pulpitu nawigacyjnego, co dzieje się domyślnie.
Aby przekierować użytkownika na stronę główną, dodaj następujące elementy do swoich funkcji.plik php:
Ustaw Zapamiętaj Mnie Na Sprawdzone
Na Zapamiętaj Mnie pole wyboru jest domyślnie niezaznaczone, ale jeśli masz zapomnianych użytkowników, którzy tego nie zaznaczają, możesz włączyć je automatycznie.
Aby pozostawić to pole zawsze zaznaczone, dodaj ten fragment do funkcji.php:
Jak widać, jeśli chodzi o zapewnienie maksymalnej kontroli nad stylem strony, CSS jest tam, gdzie jest. Ale jeśli chcesz zmodyfikować układ lub zmienić nazwę elementów, staje się to znacznie trudniejsze, ponieważ musisz użyć PHP. To tutaj Branda może Ci ogromnie pomóc. Przejdźmy do tego, jak zmienić stronę logowania za pomocą Branda.
Jak używać Branda, aby dostosować stronę logowania do witryny WordPress
Branda może pomóc ci zrobić więcej niż proste dostosowania. Sprawdź ten film o tym, jak używać marki, aby całkowicie zmienić stronę logowania WordPress. Zobaczysz, jak Micah przechodzi przez każdy krok, dzięki czemu uzyskasz dobry przegląd i dokładnie wiesz, co robić. Następnie pokażę Ci wszystkie różne opcje szczegółowo poniżej.
width=” 560″height=” 315″frameborder = “0”>
Najpierw musisz zainstalować wtyczkę Branda na swojej stronie. Następnie musisz aktywować Dostosuj Ekran Logowania moduł z pulpitu Branda.
Na Dostosuj Ekran Logowania moduł podzielony jest na 6 sekcji
- Szablon-pozwala na zmianę układu strony logowania
- Treść – tutaj możesz pokazać / ukryć elementy lub zmienić sformułowanie lub przesłać niestandardowe obrazy
- Design-zmiana marginesów, obramowań, krycia, w zasadzie stylizacji różnych elementów
- Kolory-zmień tutaj kolor dowolnego elementu
- Przekierowanie-Ustaw miejsce, do którego Użytkownik ma być przekierowany po zalogowaniu się lub wylogowaniu
- Niestandardowy CSS-dodaj swój własny kod lub zmodyfikuj kod generowany przez Branda podczas tworzenia niestandardowego formularza logowania. Dlaczego nie użyć CSS, którego właśnie się nauczyłeś?
Pozwól, że nauczę cię, jak dokonać wspólnych dostosowań za pomocą Brandy. Oto jak dostosować następujące elementy:
Zmień Logo logowania WordPress
W Branda, aby zmienić logo logowania WordPress i wstawić własne, przejdź do Zawartość sekcja i otwórz Logo i tło rozwijany. Stamtąd możesz przesłać obraz lub wprowadzić adres URL, jeśli obraz jest hostowany w innym miejscu. Możesz również całkowicie usunąć logo, jeśli chcesz uzyskać minimalny wygląd.
Jeśli chcesz nadać swojemu logo bardziej unikalny kształt, przejdź do Projekt sekcji w brandzie i otworzyć Logo rozwijany. Stamtąd można dostosować do szerokości pojemnika z logo, aby pomieścić szersze logo. Można również zmienić położenie, krycie, promień rogu i marginesy logo.
Dostosowywanie tła strony logowania do witryny WordPress
W Branda możesz zmienić miękkie szare tło na wybrany kolor. Aby zmienić kolor, przejdź do Kolory sekcja i otwórz Informacje ogólne rozwijany.
Aby użyć obrazu, udasz się do Zawartość sekcja, a następnie otwórz Logo i tło. Stamtąd możesz przesłać nowy obraz. Branda daje również możliwość przesłania wielu obrazów i utworzenia pokazu slajdów lub pokazania losowego obrazu za każdym razem. Aby użyć wielu obrazów, przewiń w dół do Projekt, i otwarte Informacje ogólne aby skonfigurować.
Dostosowywanie formularza logowania WordPress
Chcesz wiedzieć, jak utworzyć login klienta w WordPress? Zmień nazwy etykiet pól! W Branda, przejdź do Zawartość > Formularz aby zmienić nazwę pól wprowadzania nazwy użytkownika i hasła w niestandardowym formularzu logowania. Możesz użyć identyfikatora klienta, numeru członka lub nazwy superbohatera, cokolwiek!
Możesz dostosować wygląd formularza za pomocą Brandy. Przejdź do Projekt > Formularz aby edytować margines, wypełnienie, obramowanie, promień rogu i cień. Przycisk można również modyfikować w tym samym miejscu. Dostosuj promień obramowania przycisku lub dostosuj cienie przycisków.
Aby edytować kolory formularza, takie jak kolory tekstu, kolory obramowania itp., pójdziesz do Kolory > Formularze
Modyfikacja pola wyboru Zapamiętaj mnie na ekranie logowania WordPress
Branda ułatwia automatyczne sprawdzanie lub ukrywanie Zapamiętaj Mnie pole wyboru w formularzu logowania. Przejdź do Zawartość sekcja i otwórz Formularz sekcji. Tam będziesz mógł pokazać lub ukryć Zapamiętaj Mnie pudełko. Jeśli zdecydujesz się go pokazać, możesz automatycznie zaznaczyć pole wyboru.
Dostosuj WordPress Strona Logowania Komunikat O Błędzie
Nie ma to jak Komunikat o błędzie, który sprawia, że czujesz, że nie wiesz, co robisz.
Na szczęście Branda może pomóc złagodzić komunikaty o błędach lub uczynić je bardziej pomocnymi. W Branda przejdź do treść > Komunikat o błędzie, aby zmodyfikować. Możesz użyć HTML w wiadomości dla większej przejrzystości lub podkreślenia.
Aby zmienić styl wiadomości, możesz zmodyfikować krycie kontenera, przechodząc do Projekt > Komunikat O Błędzie. Aby zmienić kolory komunikatów o błędach, przejdź do Kolory > Komunikat O Błędzie.
Dostosowywanie linków poniżej formularza logowania WordPress
W Branda możesz ukryć linki pod niestandardowym formularzem logowania, przechodząc do Zawartość > Linki Poniżej Formularza. Możesz ukryć Zarejestruj Się / Utracone Hasło link, the Polityka Prywatności Link lub Powrót do Link.
dev.com/blog/wp-content/uploads/2019/03/Branda-Login-Form-Change-Links-Below-Form.png “alt=” zrzut ekranu marki Ukryj linki na stronie logowania “width=” 600 ” height = “336” />nie możesz ukryć się przede mną
Możesz dostosować kolor linków poniżej formularza logowania z Branda, przechodząc do Kolory > Linki Poniżej Formularza
Dostosowywanie przekierowania logowania WordPress
W Branda możesz zmienić gdzie formularz logowania przekieruje użytkownika w Redirect sekcji.
To wszystko.
Jak widać, istnieje więcej niż jeden sposób skórowania strony logowania. Dostosowywanie logowania do witryny to łatwy sposób na zachwycenie użytkowników i złożenie oświadczenia. Jeśli chcesz zmienić kilka rzeczy i są wygodne z PHP i CSS, następnie można edytować pliki bezpośrednio. Ale jeśli naprawdę chcesz wyjść na całość, Branda może pomóc ci przenieść stronę logowania na wyższy poziom.
Ale dlaczego na tym poprzestać, WPMU DEV daje Ci to, czego potrzebujesz, aby wszystkie rzeczy były białe! Jest to szczególnie miły akcent dla witryn na zamówienie.
Jeśli chcesz wypróbować Brandę i zobaczyć, co dodaliśmy od czasu, gdy zmieniliśmy Ultimate Branding, możesz pobrać wtyczkę za darmo. Pokochasz ją. Będzie twoją nową najlepszą przyjaciółką.
Tagi:
