Jak stworzyć niestandardową stronę logowania WordPress?

Można argumentować, że strona logowania jest najważniejszą stroną każdej witryny WordPress. Jak inaczej właściciele blogów mogą publikować świetne treści bez możliwości logowania? Oprócz tworzenia treści jest to również sposób na różne opcje konfiguracji WordPressa.

Domyślna strona logowania jest dość prosta i bardzo dobrze spełnia swoje zadanie. Zawiera niezbędne pola, w których użytkownik może wprowadzić swoje dane uwierzytelniające WordPress, a strona kontroluje dostęp do ekranów administracyjnych, umożliwiając zalogowanie się tylko zarejestrowanym użytkownikom.

Jako projektant prawdopodobnie spędziłeś wiele godzin na tworzeniu idealnego projektu strony internetowej. Ważne jest, aby projekt ten przechodził przez całe środowisko użytkownika, nawet jeśli nie wszyscy użytkownicy będą wchodzić w interakcję ze stroną logowania. To kolejna okazja, aby dodać te dodatkowe szczegóły i pozostawić pozytywne wrażenie na tych użytkownikach, którzy regularnie logują się na stronie. (Ponadto za najlepszą praktykę bezpieczeństwa WordPress uważa się przeniesienie strony pod adres URL, który jest nieco mniej oczywisty!) Chociaż zwykle nie jest to częścią konfiguracji motywu WordPress, dostosowanie strony logowania WordPress jest dość proste.

Jak uzyskać dostęp do strony logowania WordPress?

Prawdopodobnie dobrze znasz dostęp do tej strony, bez względu na to, jakie są Twoje obowiązki związane z witryną. Ale na wypadek, gdyby minęło trochę czasu, zwykle znajduje się w katalogu głównym witryny. Strona logowania jest zazwyczaj podobna do www.mysite.com/wp-login.php . Jak widać, ta nie została jeszcze wystylizowana.

W niektórych przypadkach może znajdować się instalacja WordPressa we własnym podkatalogu. Byłoby to wtedy coś takiego jak www.mysite.com/directory-name/wp-login.php .

Jak dostosować stronę logowania WordPress?

W kolejnych krokach CSS będzie używany do celów stylizacji. Ponadto do pliku functions.php zostanie dodany kod specyficzny dla motywu, aby utworzyć niestandardową stronę.

Podobnie jak większość samouczków, najpierw wypróbuj to w swoim środowisku testowym. Jeśli szukasz dobrego narzędzia środowiska testowego, warto zapoznać się z Local. Możesz skutecznie testować nowe rzeczy w swojej witrynie przed uruchomieniem.

W tym samouczku będziemy wprowadzać modyfikacje w pliku functions.php , abyś mógł zobaczyć, jak te zmiany działają. Istnieje jednak również możliwość wykorzystania tych koncepcji do stworzenia wtyczki i dodania ewentualnych modyfikacji tam, a nie w pliku functions.php . W tym samouczku zmiany projektu strony logowania są bardzo specyficzne dla motywu, dlatego zdecydowałem się dodać je do motywu zamiast tworzyć wtyczkę.

Utwórz nowy folder do dostosowań

Zorganizowanie się jest kluczowe podczas dodawania dostosowań do motywu. Będziesz chciał utworzyć nowy folder specjalnie dla tych zmian. Aby to zrobić, znajdź swój aktualny aktywny motyw, a następnie utwórz folder o nazwie „logowanie”.

Następnie potrzebny jest plik CSS, aby odwołać się do niestandardowych stylów logowania. W nowym folderze logowania utwórz pusty plik CSS i nadaj mu łatwą do zapamiętania nazwę. W tym przypadku jest to login-styles.css .

W jaki sposób ten arkusz stylów zostanie połączony? Będzie musiał być odwołany w pliku functions.php motywu. Otwórz plik functions.php i wklej następujące fragmenty. (Upewnij się, że podałeś własną nazwę pliku CSS, jeśli użyłeś czegoś innego niż login-styles.css .)

function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . 'login/login-styles.css" />';
}
add_action('login_head', 'custom_login');


Zmiana logo
Jest to dość łatwa zmiana do wprowadzenia i ma duży wpływ na poprawę brandingu. Narzędzia inspektora przeglądarki są ogromną pomocą w określaniu struktury strony. W tym przykładzie użyto Chrome Developer Tools. Aby zmienić logo WordPress na własne, musisz zmienić style CSS powiązane z tym nagłówkiem:
<h1><a href="http://wordpress.org/" title="Powered by WordPress">Your Site Name</a></h1>


		


Chcemy, aby CSS był specyficzny, więc kierowanie div z klasą .login pozwoli nam na styl nagłówka i linku wewnątrz tego div .

Aby wszystko było uporządkowane, stworzyłem osobny folder obrazów. Jest to opcjonalne i możesz odwołać się do pliku w innej lokalizacji, jeśli chcesz. Upewnij się tylko, że ścieżka pliku jest poprawna dla obrazu, którego chcesz użyć.
.login h1 a {
  background-image: url('images/login-logo.png');
}



Zrobiliśmy to używając określonej wysokości 84px w domyślnym stylu. Jeśli chcesz, aby był większy lub mniejszy, możesz to określić w tym arkuszu stylów CSS. Istnieje również możliwość określenia różnych marginesów i dopełnienia.
		



Dlaczego nie można zamienić oryginalnego logo? Powodem jest to, że gdy WordPress aktualizuje się, może zostać usunięty.
Dzięki temu prostemu stylowi możemy teraz pożegnać się z ogólnym logo WordPress. Ta zamiana logo sprawia, że ​​jest bardziej osobisty i markowy.

Stylizowanie niestandardowego tła
Tło może być jednolitym kolorem, wzorem lub czymś opartym na obrazie. W tym przykładzie dodamy do tła czarno-białe, abstrakcyjne, „techniczne” zdjęcie.

Korzystając z narzędzi programistycznych przeglądarki, można zbadać strukturę. Podczas sprawdzania zobaczysz, że style tła zostały ustawione dla ciała. Sprawy są dość ogólne, więc uszczegółowienie sprawi, że nie dokonasz żadnych globalnych zmian, których nie chcesz. Istnieje klasa zastosowana do ciała o nazwie .login , która będzie bardzo przydatna (w powyższym przykładzie użyliśmy tego do logo, ponieważ było ono częścią selektora).
		



body.login {
  background-image: url('images/example-image.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}


Jeśli obraz się nie pojawia (miałem to kilka razy, więcej niż chciałbym przyznać), sprawdź dwukrotnie, czy ścieżka do obrazu jest poprawna.

Rzeczy zaczynają tu nabierać kształtu; nawet przy tych niewielkich zmianach strona logowania wygląda o wiele bardziej markowo i ciekawiej niż domyślna.
Dostosowywanie linku do logo
To z pewnością nie jest przeszkodą, ale teraz, gdy masz własne logo na stronie logowania, powinno ono prowadzić do Twojej rzeczywistej witryny. Obecnie trafia na wordpress.org . To wszystko w porządku, ponieważ wordpress.org jest popularnym i pomocnym miejscem, ale moim zdaniem posiadanie zakładki przeglądarki jest więcej niż wystarczające. Nie musi być częścią strony logowania, ponieważ bardziej przydatne wydaje się mieć szybki dostęp do witryny projektu.
		


Aby zmienić wartość linku, aby logo łączyło się z Twoją witryną WordPress, użyj tej funkcji (pamiętaj, aby wstawić adres URL własnej witryny):
function login_logo_url() {
    return 'https://www.mysite.com';
}
add_filter('login_headerurl', 'login_logo_url');


Jeśli zastanawiasz się, skąd wzięły się filtry, musiałem spojrzeć na referencję funkcji, aby znaleźć login_headerurl i login_headertitle .
Więc teraz link trafia we właściwe miejsce, ale co z tekstem tytułu? Jeśli najedziesz kursorem na logo, zobaczysz „Powered by WordPress” jako tag tytułu. To jest absolutnie w porządku, ale nie jest to w pełni opisujące, dokąd prowadzi link. Jest to dość szybkie i łatwe do naprawienia, więc warto poświęcić dodatkowy czas. Aby uzyskać dokładniejszy tytuł, dodaj tę prostą funkcję.
		


function login_logo_text() {
    return 'The Title';
}
add_filter('login_headertitle', 'login_logo_text');


Więcej opcji stylizacji
Zapraszam do szaleństwa CSS i rozwijania tego, co tutaj zrobiliśmy. Możesz stylizować każdy element HTML na stronie logowania WordPress za pomocą CSS. Powyższe przykłady tylko zarysowały powierzchnię. Przycisk, linki i tło formularza można dostosować. I nie zapomnij o typografii, ponieważ to również można dostosować.

Jeśli opracowałeś styl formularza, przeniesienie tych stylów na stronę logowania byłoby bezproblemowym doświadczeniem. To samo dotyczy guzików. Dzięki temu jest to spójne doświadczenie i nie zniechęci użytkowników, ponieważ ma zupełnie inny przycisk niż ten, który jest używany w rzeczywistej witrynie. Jeśli stworzyłeś internetowy przewodnik po stylu, będzie on bardzo pomocny w ustaleniu, jak zastosować spójny projekt na stronie logowania.
		


A jeśli CSS nie jest twoją rzeczą, istnieją wtyczki WordPress, które pomogą ci stworzyć niestandardową stronę logowania WordPress. Oto kilka opcji, które warto sprawdzić:

Motyw Moje logowanie
Niestandardowe logowanie
Dostosowywanie niestandardowej strony logowania

Często zapomina się o stronie logowania, ale znając potencjał tej strony, może ona łatwo stać się częścią procesu projektowania. Dzięki kilku prostym modyfikacjom możesz łatwo spersonalizować swoją stronę logowania WordPress, aby pasowała do wyglądu i stylu Twojej witryny.