Personalizarea formularului de autentificare, departe de a fi un moft, reprezintă finalizarea blogului sau site-ului realizat pe WordPress CMS într-un mod profesionist. Clientul va fi încântat să-și vadă site-ul astfel personalizat, apreciind detaliile și muncă depusă.
Pentru personalizare există o mulțime de pluginuri, dintre care pe BM Custom Login l-am prezentat într-un articol anterior. De asemenea am prezentat și modul în care poate fi schimbat logo-ul WP implicit cu unul personalizat în articolul Cum poți schimba logo-ul din WordPress Login Page.
În acest articol voi prezenta pluginul Custom Login v.2.0, un plugin gratuit cu foarte multe opțiuni de personalizare. Pluginul este dezvoltat de Austin Passy ce oferă și alte pluginuri interesante dintre care, în legătură cu Custom Login: Custom Login Stealth Login (acesta nu este gratuit).
După instalare și activare accesați pagina de setări (Settings) fie din Modules meniul de sub plugin, fie din meniul din stânga Settings -> Custom Login. Primul lucru pe care trebuie să-l faceți este să activați opțiunea de personalizare a formularului de autentificare prin care suprascrieți formatările implicite cu cele noi.
Setările paginii formularului de logare
Din prima parte, așa cum se vede și în imaginea de mai sus, se poate seta culoare de fundal (background) sau imaginea de fundal. Culoare poate fi selctată dintr-o paletă predefinită sau se poate selecta folosind cursorul mouseului sau se poate scrie direct dacă se știe valoare hexazecimală a culorii dorite. Pluginul oferă și o setare a opacității de culoare (testați, testați). Pentru imagine există mai multe setări de poziție.
Modificarea logo-ului
Imediat sub setările de fundal începe zona de setări pentru logo. Implicit se va afișa logo-ul WP. Dacă se bifează „Hide the WP logo” acesta este ascuns, practic se va obține un formular de logare fără logo. Dacă se dorește un logo personalizat se încarcă de pe calculator sau se copiază direct în formular url-ul către logo-ul dorit. Logo-ul poate fi poziționat, fiind pus ca background poate fi multiplicat sau poate fi redimensionat. Cel mai bine este să aveți un logo la dimensiunea potrivită și să-l centrați.
Personalizarea formularului
Urmează zona de personalizare a formularului propriu-zis.
Formularul este partea din chenar de sub logo în care se găsesc câmpurile de logare. Acestui formular de logare i se poate schimba culoarea de fundal, culoare chenarului, grosimea chenarului, rotunjimea colțurilor, marimea umbrei și culoarea umbrei. În loc de culoare de fundal se poate pune o imagine de fundal, ca în imaginea de mai sus.
Alte personalizări ale formularului
Pagina de setări oferă posibilitatea schimbării culorii textelor folosite și are și câteva câmpuri speciale în care se pot scrie coduri CSS, HTML și jQuery.
Ca recomandare folosiți câmpul de CSS pentru a schimba culoare butonului de send a formularului. Codul este următorul (culoare va fi roșu, la fel și marginea).
.wp-core-ui .button.button-large, .wp-core-ui .button-group.button-large .button {background: #CD2122;border-color: #CD2122;}Rezultatul modificărilor de mai sus este:
Sau un alt exemplu frumos:
