# 152: Stilul paginii de conectare WordPress (Lodge) - CSS-Tricks

Anonim

„Widgetul” nostru pentru The Lodge din bara laterală a site-ului (afișat pe majoritatea paginilor, inclusiv pagina de pornire) are două stări. Unul pentru momentul în care un utilizator este deconectat și unul când un utilizator este conectat. Starea deconectată are un formular de conectare chiar pe acesta, astfel încât membrii actuali să aibă o modalitate ușoară de a intra.

Obișnuiam să folosim funcția încorporată wp_login_form (), care este destul de interesantă pentru WordPress, dar dorim să obținem un control asupra marcajului. Acest lucru ne va permite să adăugăm clase și ce nu să-l stilizăm cum dorim.

Există totuși o serie de situații în care formularul nostru personalizat de conectare nu va funcționa și va trebui să folosim vizualizarea implicită de conectare WordPress. Adică, ce vedeți când vizitați /wp-login.php. De exemplu, dacă trimiteți o parolă incorectă, veți fi redirecționat către această pagină. Sau dacă doriți să vă înregistrați pentru site (fără a trece prin Restrict Content Content Pro) sau chiar să vă resetați parola, veți face acest lucru prin această pagină /wp-login.php. Deci, cred că cel mai bine ar fi să amenajăm această pagină astfel încât să simțiți, știți, mai degrabă o operațiune profesională decât „doar un site WordPress”. În plus, putem folosi lucrurile noastre de brand aici, și anume cabina noastră cu zăpadă.

Pentru a obține controlul, folosim câteva „cârlige” WordPress în fișierul nostru functions.php pentru a încărca un fișier CSS personalizat. Asta este tot ce avem nevoie pentru a controla controlul proiectării.

Petrecem restul timpului folosind acel fișier CSS pentru a marca pagina de autentificare. Facem cabina destul de neclară, ceea ce cred că este un efect de aspect rece. Se spune cam „Cabina este înapoi! Conectați-vă și totul va deveni clar! ”. Ca un bonus frumos, fotografiile neclare ca JPG.webp-uri pot fi setate la o calitate destul de scăzută, ceea ce este bun, pentru că o folosim destul de mare ca imagine de fundal pe toată pagina.