Share
Ecranul de conectare WordPress este bine conceput - este curat și ușor de interacționat și funcționează bine pe toate dimensiunile ecranului. Dar dacă construiți un site pentru un client care dorește să-și afișeze propriul logo pentru utilizatorii conectați? Sau dacă aveți o instalare MultiSite și doriți ca utilizatorii dvs. să vă vadă branding-ul când vă conectați? Din fericire, puteți personaliza modul în care ecranul de conectare arată foarte ușor.
Pentru acest tutorial am creat un plugin pentru a face acest lucru; avantajul utilizării unui plugin este acela că îl puteți arunca în oricare dintre site-urile WordPress pe care le dezvoltați și le dați instantaneu un branding.
Pașii pe care urmează să le demonstrez în acest tutorial sunt:
Pentru a finaliza acest tutorial, veți avea nevoie de:
În partea de sus a plugin-ului meu adaug următoarele rânduri:
/ * Nume Plug-in: WPTutsPlus Particularizarea Admin Partea 1 - Login URI Plugin Screen: http://rachelmccollin.co.uk Descriere: Acest plugin acceptă tutorialul în wptutsplus. Personalizează ecranul de conectare WordPress. Versiune: 1.0 Autor: Rachel McCollin Autor URI: http://rachelmccollin.com Licență: GPLv2 * /
Este ușor să adăugați propriul logo sau logo-ul clientului dvs. la pagina de conectare și să faceți instantaneu instalarea dvs. WordPress mai profesionistă.
Accentsconagua
login_enqueue_scripts cârlig de acțiune:// adăugați un nou logo la funcția paginii de autentificare wptutsplus_login_logo () ?>
Acest lucru va adăuga logo-ul dvs. la ecranul de conectare, așa cum se arată în ecranul de ecran.
Pe lângă adăugarea unui logo, îl puteți redimensiona și pentru a se potrivi și a adăuga stil pentru alte elemente de pe ecran.
Logo-ul de mai sus este ușor stropit pentru a se încadra în spațiul prestabilit dat pentru acesta. Voi ajusta calibrarea.
Editați codul în plugin-ul dvs. astfel încât acesta să aibă următorul conținut:
// adăugați un nou logo la funcția paginii de autentificare wptutsplus_login_logo () ?>
Valoarea înălțimii pe care o utilizați depinde de raportul de aspect al logo-ului. Utilizarea 300px și auto pentru background-size proprietatea asigură faptul că sigla dvs. este la fel de largă ca și caseta de autentificare și că raportul de aspect este păstrat, și înălţime va oferi spațiu suficient pentru ca sigla dvs. să se potrivească.
Acum logo-ul meu arată astfel:
Mult mai bine! Insa marimea logo-ului nu este singurul lucru pe care il pot face in ceea ce priveste stilul. Ce zici de schimbarea unor culori?
Tot textul afișat pe pagina de conectare are forma unor link-uri, deci este vorba de linkuri pe care trebuie să le faci. Modificați din nou codul astfel încât să citească după cum urmează:
// adăugați un nou logo la funcția paginii de autentificare wptutsplus_login_logo () ?>
Acest lucru îmi dă linkuri care corespund culorilor mele. Culoarea link-ului este cyan, iar culoarea hover este magenta.
Notă: Deoarece culoarea principală a logo-ului meu este similară cu cea albastră, funcționează bine pentru linkuri. Este posibil să nu doriți să schimbați culoarea legăturilor dvs. dacă emblema dvs. este o culoare foarte diferită, pentru a evita problemele de utilizare.
Elementul final de pe ecran este butonul "Log In", care este încă albastru. Să schimbăm asta. Editați codul astfel încât acesta să fie citit după cum urmează:
// adăugați un nou logo la funcția paginii de autentificare wptutsplus_login_logo () ?>
Deci, acum am un ecran de conectare complet personalizat, ceea ce înseamnă că atunci când clienții sau utilizatorii mei se conectează, ei văd ceva care este în concordanță cu marca mea și face ca site-ul să pară mai profesionist.
Personalizarea ecranului de conectare WordPress este simplă și poate face o mare diferență în ceea ce privește impresia pe care site-ul dvs. o oferă utilizatorilor și clienților conectați. Prin modificarea codului de mai sus pentru a satisface nevoile dvs. și pentru a reflecta marca dvs., puteți crea un ecran de conectare foarte profesionist în foarte puține timp.
