Aktualności

Zmień wygląd ekranu logowania w WordPressie

Zmień wygląd ekranu logowania w WordPressie

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)

  • http://www.okularnica.com/ Urszula

    rewelacyjna wtyczka! :)

  • http://miroslawdworak.pl Mirosław Dworak

    Wielkie dzięki świetna wtyczka ma, tylko jeden minus jest po angielsku.

  • http://geekme.pl Andrzej Wywrocki

    O ile piszecie o wtyczce kosmetycznej, o tyle sami zadbajcie o lightboxa na obrazkach, bo tak trochę ciężko z ich powiększeniem. Klikanie wstecz w przeglądarce nie jest komfortowe. ;)

    • HikikoMe

      Hej. Dzięki za sugestię. Widzisz.. najciemniej bywa pod latarnią, a lightbox rzeczywiście sprawi, ze będzie wygodniej :)

  • Karol Cholewa

    Kosmetyka ważna…a jak skutecznie przekierować stronę logowania na bezpieczny HTTPS?