Jak zmienić wygląd strony logowania

Tesla Login Customizer

Standardowa strona logowania do panelu administracyjnego WordPressa jest… no cóż, po prostu standardowa. Spełnia swoją funkcję, ale wizualnie nie powala. I mimo że w sumie jej wygląd nie ma większego znaczenia, to wiele osób uważa, że warto poświęcić kilka minut i nieco ją zmodyfikować.

Narzędzi służących do dostosowywania wyglądu strony logowania jest sporo – zarówno darmowych, jak i płatnych. Jeszcze kilka tygodni temu moim faworytem była wtyczka Custom Login Page Customizer, głównie dzięki integracji z ekranem personalizacji. Jednak niedawno ekipa TeslaThemes wydała darmowe rozszerzenie Tesla Login Customizer, które moim zdaniem jest prostsze w obsłudze i ma nieco większe możliwości.

Zobacz jak można zmienić adres strony logowania →

Po instalacji i aktywacji wtyczki w menu panelu administracyjnego pojawi się nowa sekcja Tesla Login, w której dokonujemy modyfikacji strony logowania (znajdującej się pod adresem http://nasza-domena.pl/wp-login.php). Co ciekawe, możemy również skorzystać z gotowych schematów, których jest w tej chwili pięć.

Panel administracyjny wtyczki jest podzielony na pięć sekcji. W każdej chwili możemy podejrzeć naszą stronę logowania klikając znajdująca się po prawej stronie zakładkę Login Page.

General – ustawienia ogólne

Tesla Login Customizer - general

W tej sekcji znajdują się ogólne ustawienia naszej strony logowania. Możemy wybrać kolor podstawowy (Primary Color) i kolor tła (Background Color), a także wybrać obrazek, który zostanie ustawiony jako tło strony (Background Image).
Możemy również wybrać font, jaki będzie użyty na stronie logowania – dostępne są wszystkie fonty znajdujące się w katalogu Google Fonts. Tu ważna uwaga: jeśli nasza strona jest w języku polskim, to koniecznie w opcji Font Subset musimy wybrać zestawy znaków LatinLatin Ext – jeśli tego nie zrobimy, to polskie znaki diakrytyczne będą wyświetlane przy użyciu domyślnego fontu. Warto wspomnieć, że nie wszystkie fonty od Google posiadają ten zestaw znaków.
Opcja Font Variants pozwala na wybór wariantów fontu, które zostaną załadowane. Ma to sens tylko wtedy, jeśli chcemy pobawić się w samodzielne modyfikowanie strony logowania za pomocą CSS. Na koniec zostaje nam jeszcze możliwość ustawienia wielkości tekstu (Font Size).

Trzy ostatnie opcje dotyczą zachowania strony logowania. Redirect after Login pozwala na wprowadzenie adresu, na który zostanie przekierowany użytkownik po zalogowaniu, a Redirect after Register – po rejestracji. Opcja Custom Login Url pozwala na ustawienie niestandardowego adresu strony logowania (np. http://nasza-domena.pl/logowanie/).

Templates – szablony

Tesla Login Customizer - templates

W tej sekcji znajdują się gotowe szablony strony logowania, z których możemy skorzystać jeśli nie mamy weny. W chwili pisania tego tekstu dostępnych było pięć szablonów, z czego jeden (Mercury) oznaczony jako Premium.

Używanie szablonów jest bardzo proste: wystarczy kliknąć interesujący nas szablon, a zostanie on aktywowany. Trzeba pamiętać, że aktywacja szablonu spowoduje usunięcie wszystkich wprowadzonych przez nas modyfikacji (na szczęście twórcy pomyśleli o funkcji cofnięcia tej operacji).

Logo

Tesla Login Customizer - logo

To najbardziej przydatna moim zdaniem sekcja. Pozwala ona na zastąpienie wyświetlanego nad formularzem logowania logo WordPressa naszym własnym logotypem. Możemy również całkowicie wyłączyć wyświetlanie logo – służy do tego opcja Hide Logo.

Aby ustawić własne logo na stronie logowania wystarczy wybrać interesujący nas obrazek (Logo Image), a następnie pobawić się ustawieniami rozmiaru (Logo WidthLogo Height). Opcja Logo Size Type określa w jaki sposób wybrany przez nas obrazek ma wypełniać obszar przeznaczony na logotyp.

Opcja Logo Link pozwala na wprowadzenie adresu URL, do którego będzie linkować logo. Logo image title pozwala z kolei na ustawienie atrybutu title dla tego linku.

Form – formularz

Tesla Login Customizer - form

Najobszerniejszą sekcją ustawień jest sekcja pozwalająca na modyfikację formularza logowania.

Opcja Form Position pozwala na ustalenie miejsca, w którym będzie wyświetlany formularz logowania. Może to byc przydatne gdy w tle ustawimy sobie jakieś ładne zdjęcie, którego nie chcemy całkowicie zasłonić. Opcja Form Heading służy do ustawienia tytułu, który pojawi się nad formularzem. Form BG ImageForm BG Color służą do ustawienia odpowiednio obrazka i koloru tła formularza. Opcja Form Padding pozwala na ustawienie odstępów pomiędzy formularzem a ramką, w której się on znajduje.

Kolejne opcje dają nam kontrolę nad animacjami formularza logowania. Opcja Form Shake wyłącza efekt trzęsienia, widoczny po nieudanej próbie logowania. Opcje Form animation inForm animation out pozwalają na ustawienie animacji pojawiania się i znikania formularza (po udanym logowaniu), a Form animation Error ustawia animację wykonywaną w przypadku wystąpienia błędu.

Opcja Button Text Color pozwala na ustawienie koloru tekstu na przycisku logowania, a Button BG Color na ustawienie koloru tego przycisku.

Przydatnym dodatkiem może się okazać możliwość dodatkowego zabezpieczenia formularza przez spamerami za pomocą reCAPTCHA. Aby skorzystać z tej opcji musimy w polu reCAPTCHA Site Key podać klucz dla naszej strony, który możemy wygenerować tutaj. Opcja reCAPTCHA Theme pozwala na wybór wersji kolorystycznej (jasnej lub ciemnej), a reCAPTCHA Challenge Type na ustalenie rodzaju „łamigłówki” (obrazkowa lub dźwiękowa).

Advanced – ustawienia zaawansowane

Sekcja ta zawiera tylko dwa pola tekstowe, w których możemy wprowadzić własny kod CSS i JavaScript, który zostanie dodany do strony logowania.

Efekt skorzystania z gotowego szablonu z małymi, wykonanymi w 3 minuty modyfikacjami, może wyglądać na przykład tak:

Tesla Login Customizer

Bezpośredni link