Ekran logowania, który jest domyślnie wyświetlany w WordPressie nie jest zbyt interesujący głównie przez swoją powszechność i z reguły nijak ma się do wyglądu strony głównej samego serwisu. Dzisiaj omówimy wtyczkę Custom Login Plugin, dzięki której sprawnie zmienicie wygląd wspomnianego ekranu logowania.

Wtyczka Custom Login Plugin jest dość nowa, ponieważ powstała na początku 2015 roku. Korzysta z niej przeszło 10 tys. serwisów. Została zaprojektowana w ten sposób, żeby nawet osoby nieznające HTML oraz CSS były w stanie stworzyć atrakcyjny wygląd ekranu logowania. Wtyczka szczególnie przyda się serwisom, które umożliwiają rejestrację i logowanie się czytelnikom. Użytkownik pluginu otrzymuje dostęp do niezwykle intuicyjnego panelu konfiguracyjnego. Po kilkunastu minutach zabawy udało mi się stworzyć taki projekt:

Screenshot (14)

INSTALACJA WTYCZKI

  • Zaloguj się do swojego panelu administracyjnego.
  • Przejdź do “Wtyczki” oraz “Dodaj nową”.
  • W wyszukiwarce wpisz “Custom Login Plugin”.
  • Kliknij “Zainstaluj” przy pierwszej wtyczce.
  • Uruchom wtyczkę.

KONFIGURACJA WTYCZKI

Przejdź do “Ustawienia” i kliknij “Admin Custom Login”. Następnie na pierwszym widocznym ekranie zaznacz “Enable Custom Login” w sekcji “Admin Custom login Status” i kliknij “Save Changes”.

Wszelkie zmiany wprowadzone w panelu zalecam przeglądać w trybie incognito przeglądarki, ponieważ wtedy nie będziesz zalogowany do systemu. Przejdźmy teraz do omówienia poszczególnych sekcji w menu po lewej stronie.

admincustomlogindashboard

BACKGROUND DESIGN

W tym miejscu można wybrać styl tła całego ekranu logowania spośród trzech różnych opcji:

  • Static Background Color – tło będzie jednolitego koloru. Można wybrać na bazie przygotowanej palety lub wprowadzić kolor w HEX.
  • Static Background Image – w tle będzie wyświetlany statyczny obrazek. Zalecany rozmiar to minimum 1920×1080 pikseli.
  • Background Slideshow – w tle będzie wyświetlany pokaz slajdów z wysłanych zdjęć. Maksymalnie 6 zdjęć, minimum 2. Zalecany rozmiar to 1920×1080 pikseli.

LOGIN FORM SETTING

W tym miejscu można opracować wygląd formularza logowania na podstawie kilku opcji:

  • Login from Floating – pozycja formularza logowania na ekranie. Może być po lewej, po środku oraz po prawej
  • Select Background – wybór typu tła pomiędzy tłem jednolitego koloru i w formie zdjęcia.
  • Login Form Opacity – przezroczystość formularza wyrażona w pikselach.
  • Login Form Width – szerokość formularza wyrażona w pikselach.
  • Border Color – kolor obramowania formularza.
  • Border Radius – zaokrąglenie rogów formularza.
  • Border Style – styl obramowania.
  • Border Thickness – grubość obramowania.
  • Enable form shadow? – cień pod formularzem.
  • Form Shadow Color – kolor cienia formularza.

FONT SETTING

W tej sekcji ustawiamy wszystkie detale dotyczące fontów – kolory, rozmiary oraz style. Tutaj zmienisz także ikonki w polach użytkownika oraz hasła. Wybór jest bardzo szeroki.

LOGO SETTING

W tym menu załadujesz swoje logo, które możesz podlinkować gdziekolwiek. Ustalisz także jego wysokość oraz szerokość.

SOCIAL SETTINGS

W tej sekcji możesz zdecydować się na zamieszczenie ikonek linkujących do swoich profilów w social media. Do dyspozycji mamy Facebooka, Twittera, LinkedIn, Google+ oraz Pinteresta.


Ostatnia opcja związana jest z eksportem oraz importem stworzonych już wcześniej konfiguracji wtyczki. Custom Login Plugin jest idealnym rozwiązaniem dla osób, które nie miały nigdy do czynienia z HTML oraz CSS, a chcą, żeby ich panel logowania wyglądał atrakcyjnie.

SPRAWDŹ NASZĄ OFERTĘ HOSTINGOWĄ

(wykorzystaj kod customloginplugin i zyskaj 10% rabatu na pakiety zenbox 5k, zenbox 25k, zenbox 50k oraz zenbox 100k w miesięcznym lub rocznym okresie rozliczeniowym)

Autor:

root

Może ci się spodobać również

Bez kategorii - 9 stycznia 2025 15:55

Trendy w UX/UI na rok 2025. Co warto wdrożyć już teraz?

Świat projektowania UX/UI rozwija się w niesamowitym tempie, odpowiadając na zmieniające się oczekiwania użytkowników, nowe technologie i globalne trendy. W 2025 roku obszar ten stanie się jeszcze bardziej zorientowany na człowieka, dostarczając intuicyjnych, spersonalizowanych i inkluzywnych rozwiązań. Aby nadążyć za zmieniającą się rzeczywistością i pozostać konkurencyjnym na rynku, warto już teraz wdrożyć niektóre z najważniejszych […]

Więcej →

UX - 2 stycznia 2025 15:38

Jak różnice kulturowe wpływają na projektowanie UX?

W tym artykule przyjrzymy się, jak kultura wpływa na UX, jakie wyzwania wiążą się z projektowaniem dla zróżnicowanych kulturowo grup użytkowników oraz jakie strategie można zastosować, aby tworzyć bardziej inkluzywne produkty. Projektowanie doświadczeń użytkownika to wielowymiarowy proces, który wymaga uwzględnienia nie tylko zasad estetyki czy funkcjonalności, ale również kultury, w jakiej funkcjonują użytkownicy. W erze […]

Więcej →

Porady - 30 grudnia 2024 16:37

Wydajność WordPressa na urządzeniach mobilnych – Jakie zmiany warto wprowadzić?

W dzisiejszych czasach, kiedy coraz więcej użytkowników korzysta z internetu na urządzeniach mobilnych, zapewnienie, że strona działa szybko i sprawnie na smartfonach i tabletach, jest kluczowe. W artykule omówimy konkretne zmiany, które warto wprowadzić, aby poprawić wydajność strony WordPress na urządzeniach mobilnych. 1. Optymalizacja obrazów – Klucz do szybszego ładowania Obrazy to jeden z głównych […]

Więcej →