# 152: Styling av WordPress (Lodge) inloggningssida - CSS-tricks

Anonim

Vår "widget" för The Lodge i sidofältet på webbplatsen (visas på de flesta sidor, inklusive hemsidan) har två stater. En för när en användare är utloggad och en när en användare är inloggad. Det utloggade tillståndet har ett inloggningsformulär direkt så att nuvarande medlemmar har ett enkelt sätt att hoppa in.

Vi brukade använda den inbyggda funktionen wp_login_form (), vilket är ganska coolt för WordPress att tillhandahålla, men vi vill få lite kontroll över markeringen. Detta gör det möjligt för oss att lägga till klasser och vad som helst för att utforma hur vi vill.

Det finns dock ett antal situationer där vårt anpassade inloggningsformulär inte fungerar och vi måste använda standardinloggningsvyn för WordPress. Det vill säga vad du ser när du besöker /wp-login.php. Om du till exempel skickar in ett felaktigt lösenord omdirigeras du till den här sidan. Eller om du vill registrera dig på webbplatsen (utan att gå igenom Restrict Content Pro), eller till och med återställa ditt lösenord, gör du detta via denna /wp-login.php-sida. Så jag tror att det skulle vara bäst om vi utformar den här sidan så att den känns som en professionell operation snarare än bara "någon WordPress-webbplats." Dessutom kan vi använda våra märkesvaror här, nämligen vår snöiga stuga.

För att få kontroll använder vi ett par WordPress-“krokar” i vår functions.php-fil för att ladda upp en anpassad CSS-fil. Det är allt vi behöver för att fånga designkontroll.

Vi tillbringar resten av tiden med att använda den CSS-filen för att märka inloggningssidan. Vi gör stugan ganska suddig, vilket är en cool effekt tycker jag. Det säger typ ”Stugan är tillbaka! Logga in så blir allt klart! ”. Som en trevlig bonus kan suddiga bilder som JPG.webp-filer ställas in till ganska låg kvalitet, vilket är bra eftersom vi använder det ganska stort som en helsides bakgrundsbild.