Crearea unui formular personalizat de autentificare WordPress cu interfață de utilizare plată

Ultima actualizare - 8 iulie 2021

WordPress există de mult timp. Ceea ce a început ca un portal pentru bloggeri, a devenit acum un sistem de management al conținutului responsabil de operarea aproape jumătate din totalul site-urilor web din lume. Interfața sa simplă, dar intuitivă și design-urile personalizabile au făcut-o alegerea numărul unu pentru dezvoltatorii web și designerii de pe tot globul care doresc să-și construiască site-urile de la zero.

Oricine folosește WordPress are un ochi pentru detalii și originalitate pentru a îmbunătăți experiența utilizatorului și a crește rata de clic. Majoritatea dezvoltatorilor se concentrează în principal pe teme, dar pentru site-urile de membru și alte platforme, punctul de plecare este o pagină de conectare. Imaginează-ți asta, dacă ești un membru nou înregistrat pe un site web și te autentifici pe un ecran care este similar cu membrii neînregistrați, impactul este ușor atenuat și te lasă să te simți destul de nemulțumit. Cu toate acestea, a avea o pagină de conectare WordPress care este personalizată pentru a se potrivi cerințelor și esteticii afacerii dvs. lasă o impresie mai bună asupra vizitatorilor și le stârnește interesul.

Pentru a vă ajuta în acest sens, am rezumat câteva linii directoare simple pentru includerea stilurilor dvs. pentru o pagină personalizată de autentificare WordPress care se integrează vizual cu schema de design al site-ului dvs. web.

Crearea unei pagini de autentificare WordPress personalizată fără plugin

Se pot face mai multe modificări în pagina de autentificare WordPress prin actualizarea codului sursă în fișierul function.php al temei alese. Deși, odată ce actualizați WordPress, aceste modificări se vor pierde. Acest lucru se datorează faptului că foaia de stil a temei pentru pagina de conectare nu face parte din configurarea temei WordPress, ceea ce necesită să creați o altă foaie de stil pentru pagina de autentificare personalizată.

Începeți prin a crea un folder numit „Login” în folderul cu tema și adăugați un fișier .txt cu numele custom-login-style.css . De aici încolo, puteți continua să faceți câteva modificări de bază pentru a personaliza și a adăuga unicitate paginii de conectare.

Schimbați fundalul

Pentru a actualiza culoarea de fundal a paginii sau a unui anumit buton, veți selecta culoarea de fundal: #222222 și veți schimba codul hexa la culoarea dorită. Luați ajutorul unei palete de culori pentru a selecta o culoare care să complimenteze estetica afacerii dvs. și să fie atrăgătoare din punct de vedere vizual.

În plus, dacă doriți să modificați imaginea de fundal a paginii dvs. de autentificare, selectați linia de cod background-image: url(logo_login.png') și înlocuiți logo_login.png , care este numele fișierului cu adresa URL a fișierului imagine actualizată. .

Companiile care doresc ca clienții lor să-și amintească marca pot schimba logo-ul WordPress cu logo-ul personalizat. După salvarea fișierului imagine a siglei personalizate în folderul dvs. de conectare, înlocuiți numele fișierului cu sigla dvs. personalizată în imaginea de fundal: codul url('logo_login') .

Personalizarea formularului de autentificare prin ajustarea umpluturii și a marjei

Dezvoltatorii pot ajusta formularul de autentificare pentru a face pagina lor atractivă și potrivită în mod corespunzător cu aspectul site-ului lor. De la umplutura butoanelor la culoarea și dimensiunea fontului etichetelor etc. Puteți adăuga mai mult spațiu în interiorul butonului, astfel încât textul să nu apară strâns prin creșterea umpluturii; doar creșteți numerele din umplutura codului: 12px 12px 12px 12px. Dacă doriți să creați mai mult spațiu în afara butonului, astfel încât elementele din jur să nu fie bine împachetate, puteți face acest lucru prin creșterea spațiului de marjă din marginea codului : 12px 12px 12px 12px. Chiar și ceva atât de simplu precum adăugarea câtorva spații albe poate avea un impact colectiv asupra aspectului final al paginii dvs. de autentificare și o poate face să pară mai bine pusă cap la cap.

Modificarea dimensiunii și culorii fontului

Puteți modifica dimensiunea fontului textului de paragraf, a linkurilor sau a câmpurilor de formular folosind codul font-size: 15px , ajustând numărul la dimensiunea dorită. Același lucru se poate face pentru culoarea fontului prin actualizarea culorii în culoarea codului: #222222 și înlocuirea culorii.

Modificarea mesajului de eroare de conectare

Odată cu creșterea infracțiunilor cibernetice și a escrocherilor pe internet, dezvoltatorii web și proprietarii de afaceri nu își pot risca pe site-urile lor web și nu pot pierde date confidențiale. Când un utilizator introduce în grabă datele de conectare greșite, un mesaj de eroare implicit este generat automat. Deși acest lucru este pentru a semnala utilizatorilor această eroare, hackeri poate fi un decalaj să încerce să spargă datele de conectare. Deci, cea mai bună modalitate de a ține hackerii la distanță este modificarea mesajului de eroare din fișierul function.php .

În concluzie, cei cu cunoștințe extinse de CSS pot avea controlul suprem asupra stilului și personalizării formularului lor de autentificare WordPress. Dar, dacă lipsa abilităților dvs. de codificare și vă limitează capacitatea de a crea o pagină de conectare personalizată, atunci nu vă faceți griji! Există o varietate de opțiuni de plugin disponibile în depozitul WordPress pentru a simplifica procesul de dezvoltare web WordPress și le-am enumerat pe cele mai populare pentru tine.

Plugin de personalizare de conectare

Login Customizer este unul dintre cele mai ușor de utilizat pluginuri și vă permite să faceți modificări direct din WordPress Customizer. După un proces simplu de instalare, îl puteți accesa cu ușurință din tabloul de bord WordPress din fila Aspect . Faceți clic pe Start Customizing și vă va redirecționa către ecranul de personalizare unde reproiectați toate zonele după cum doriți.

Personalizator de conectare Colorlib

Colorlib Login Customizer este un instrument plin de resurse și flexibil care include toate funcționalitățile găsite într-un plugin premium, dar le oferă gratuit. Gama sa largă de caracteristici unice îl face alegerea supremă pentru dezvoltatorii web care doresc să construiască o soluție personalizată pentru utilizatorii lor. De asemenea, permite personalizarea prin WordPress Customizer, astfel încât să puteți naviga cu ușurință și să vă remodelați pagina de autentificare.

În concluzie

În cele din urmă, există mai multe abordări pentru personalizarea unei pagini de autentificare, iar dezvoltatorii de toate nivelurile de experiență sunt bineveniți să le încerce. Ceea ce contează este că pagina personalizată de autentificare WordPress se potrivește și completează estetica site-ului real pentru a îmbunătăți experiența utilizatorului. Personalizarea paginii de conectare a site-ului dvs. este o modalitate simplă, dar eficientă de a încânta clienții și de a construi o identitate de marcă. Începerea simplă și construirea pe baza elementelor de bază poate transforma un simplu ecran în ceva spectaculos și poate oferi clienților o experiență online personalizată pe care nu au mai văzut-o până acum.