Jak utworzyć niestandardową stronę logowania WordPress

Można argumentować, że strona logowania jest najważniejszą stroną każdej witryny WordPress. Bez możliwości logowania, jak inaczej właściciele blogów mogą publikować świetne treści? Oprócz tworzenia treści jest to również droga do różnych opcji konfiguracji WordPress.

Domyślna strona logowania jest dość prosta i bardzo dobrze spełnia swoje zadanie. Posiada pola niezbędne do wprowadzenia przez użytkownika danych uwierzytelniających 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, tworząc idealny projekt strony internetowej. Ważne jest, aby przenieść ten projekt przez całe doświadczenie użytkownika, nawet jeśli nie wszyscy użytkownicy będą wchodzić w interakcję ze stroną logowania. Jest to kolejna okazja, aby dodać ten dodatkowy szczegół i wywrzeć pozytywne wrażenie na tych użytkownikach, którzy regularnie logują się na stronie.

(Ponadto najlepszą praktyką bezpieczeństwa WordPress jest przeniesienie strony do adresu 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 jesteś dobrze zaznajomiony z dostępem do tej strony, bez względu na to, jakie są Twoje obowiązki w witrynie. 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ć, ten nie był jeszcze stylizowany.

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

Jak dostosować stronę logowania WordPress

W poniższych krokach CSS będzie używany do stylizacji. Ponadto do pliku functions.php zostanie dodany kod specyficzny dla motywu, aby urzeczywistnić niestandardową stronę.

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

W tym samouczku będziemy wprowadzać modyfikacje do pliku functions.php , abyś mógł zobaczyć, jak działają zmiany. 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 zdecydowaliśmy się dodać je do motywu zamiast tworzyć wtyczkę.

Utwórz nowy folder dla dostosowań

Organizacja jest kluczowa podczas dodawania dostosowań do motywu. Będziesz chciał utworzyć nowy folder specjalnie dla tych zmian. Aby to zrobić, znajdź bieżący aktywny motyw i utwórz folder o nazwie „login”.

Następnie potrzebny jest plik CSS, aby odwoływać 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? Konieczne będzie odniesienie do 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, która ma duży wpływ na poprawę marki. Narzędzia inspektora przeglądarki są ogromną pomocą w określeniu 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 na div z klasą .login pozwoli nam stylizować nagłówek i link wewnątrz tego div .

Aby zachować porządek, utworzyliśmy osobny folder obrazów. Jest to opcjonalne i jeśli chcesz, możesz odwołać się do pliku w innej lokalizacji. Upewnij się tylko, że ścieżka do pliku jest poprawna dla obrazu, którego chcesz użyć.

 .login h1 a { background-image: url('images/login-logo.png'); }

Zrobiliśmy to przy użyciu określonej wysokości 84 pikseli 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 podczas aktualizacji WordPress 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 ​​​​wydaje się o wiele bardziej osobisty i markowy.

Stylizacja niestandardowego tła

Tłem może być jednolity kolor, wzór lub coś opartego na obrazie. W tym przykładzie dodamy do tła czarno-białe, abstrakcyjne, „techniczne” zdjęcie.

Strukturę można badać za pomocą narzędzi deweloperskich przeglądarki. Podczas sprawdzania zobaczysz, że style tła zostały ustawione dla ciała. Rzeczy są dość ogólne, więc doprecyzowanie rzeczy zagwarantuje, że nie wprowadzisz żadnych globalnych zmian, których nie chcesz. Istnieje klasa zastosowana do ciała o nazwie .login , która będzie bardzo użyteczna (tego właśnie użyliśmy dla logo w powyższym przykładzie, ponieważ było to 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, sprawdź, czy ścieżka do obrazu jest poprawna.

Tutaj wszystko zaczyna nabierać kształtu; nawet przy tych drobnych zmianach strona logowania wygląda o wiele bardziej markowo i ciekawiej niż domyślna.

Dostosowanie łącza do logo

To z pewnością nie jest przeszkodą, ale teraz, gdy masz własne logo na stronie logowania, powinno ono zawierać link do Twojej rzeczywistej witryny. Obecnie trafia do wordpress.org . To wszystko w porządku, ponieważ wordpress.org jest popularnym i pomocnym miejscem, ale naszym zdaniem posiadanie zakładki w przeglądarce jest więcej niż wystarczające. Nie musi być częścią strony logowania, ponieważ bardziej przydatne wydaje się mieć szybki sposób na dostanie się na stronę projektu.

Aby zmienić wartość linku, tak aby logo prowadziło do Twojej witryny WordPress, użyj tej funkcji (i 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 pochodzą filtry, musieliśmy spojrzeć na odwołanie do funkcji, aby znaleźć login_headerurl i login_headertitle .

Więc teraz link prowadzi we właściwe miejsce, ale co z tekstem tytułowym? 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 opisowe, 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 możliwości stylizacji

Nie krępuj się zaszaleć z CSS i rozwinąć to, 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 bezproblemowe. To samo dotyczy przycisków. Dzięki temu jest to spójne doświadczenie i nie odrzuca użytkowników, ponieważ ma zupełnie inny przycisk niż ten, który jest używany w rzeczywistej witrynie. Jeśli stworzyłeś przewodnik po stylach internetowych, będzie on bardzo pomocny przy określaniu, jak zastosować spójny projekt strony logowania.

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

• Motyw Mój login
• Niestandardowe logowanie
• Dostosowywanie niestandardowej strony logowania

Strona logowania jest często zapominana, ale znając potencjał tej strony, może łatwo stać się częścią procesu projektowego. Za pomocą kilku prostych modyfikacji możesz łatwo spersonalizować stronę logowania WordPress, aby pasowała do wyglądu i stylu Twojej witryny.