# 152: Styling af WordPress (Lodge) login-siden - CSS-tricks

Anonim

Vores "widget" til The Lodge i sidebjælken på webstedet (vises på de fleste sider, inklusive hjemmesiden) har to stater. En til når en bruger er logget ud og en når en bruger er logget ind. Den udloggede tilstand har en loginformular lige på sig, så nuværende medlemmer har en nem måde at springe ind på.

Vi plejede at bruge den indbyggede funktion wp_login_form (), som er ret sejt for WordPress at levere, men vi vil hive noget kontrol over markeringen. Dette giver os mulighed for at tilføje klasser og hvad der ikke er for at style det, som vi ønsker.

Der er dog en række situationer, hvor vores brugerdefinerede loginformular ikke fungerer, og vi bliver nødt til at bruge standard WordPress-loginvisningen. Det vil sige, hvad du ser, når du besøger /wp-login.php. For eksempel, hvis du indsender en forkert adgangskode, omdirigeres du til denne side. Eller hvis du vil tilmelde dig webstedet (uden at gå gennem Begræns indhold Pro) eller endda nulstille din adgangskode, skal du gøre dette via denne /wp-login.php side. Så jeg synes, det ville være bedst, hvis vi stylede denne side, så det føles, som du ved, som en professionel operation snarere end bare "et WordPress-sted." Derudover kan vi bruge vores branding-ting her, nemlig vores snekabine.

For at få kontrol bruger vi et par WordPress “kroge” i vores functions.php-fil for at indlæse en brugerdefineret CSS-fil. Det er alt, hvad vi har brug for for at fange designkontrol.

Vi bruger resten af ​​tiden på at bruge den CSS-fil til at mærke login-siden. Vi gør kabinen temmelig sløret, hvilket synes jeg er sejt ud. Det siger lidt ”Kabinen er der tilbage! Log ind, og alt bliver klart! ”. Som en god bonus kan slørede fotos som JPG.webp'er indstilles til ret lav kvalitet, hvilket er godt, fordi vi bruger det ret stort som et baggrundsbillede på hele siden.