# 152: Stile della pagina di accesso di WordPress (Lodge) - Trucchi CSS

Anonim

Il nostro "widget" per The Lodge nella barra laterale del sito (viene visualizzato sulla maggior parte delle pagine, inclusa l'homepage) ha due stati. Uno per quando un utente è disconnesso e uno quando un utente è connesso. Lo stato disconnesso ha un modulo di accesso proprio su di esso in modo che i membri attuali abbiano un modo semplice per entrare.

Usavamo la funzione incorporata wp_login_form (), che è piuttosto interessante per WordPress da fornire, ma vogliamo ottenere un po 'di controllo sul markup. Questo ci permetterà di aggiungere classi e quant'altro per modellarlo come vogliamo.

Ci sono una serie di situazioni, tuttavia, in cui il nostro modulo di accesso personalizzato non funzionerà e dovremo utilizzare la visualizzazione di accesso predefinita di WordPress. Cioè, quello che vedi quando visiti /wp-login.php. Ad esempio, se invii una password errata, verrai reindirizzato a questa pagina. O se vuoi registrarti per il sito (senza passare attraverso Restrict Content Pro), o anche reimpostare la tua password, lo farai attraverso questa pagina /wp-login.php. Quindi penso che sarebbe meglio se dessimo uno stile a questa pagina in modo che sembri, sai, un'operazione professionale piuttosto che solo "un sito WordPress". Inoltre possiamo usare il nostro marchio qui, vale a dire la nostra cabina innevata.

Per ottenere il controllo, utilizziamo un paio di "hook" di WordPress nel nostro file functions.php per caricare un file CSS personalizzato. Questo è tutto ciò di cui abbiamo bisogno per ottenere il controllo del design.

Passiamo il resto del tempo a utilizzare quel file CSS per marcare la pagina di accesso. Rendiamo la cabina piuttosto sfocata, il che è un bell'effetto credo. In un certo senso dice "La capanna è là dietro! Effettua il login e tutto sarà chiaro! ”. Come bel bonus, le foto sfocate come JPG.webp possono essere impostate su una qualità piuttosto bassa, il che è positivo, perché le stiamo usando piuttosto grandi come immagine di sfondo a tutta pagina.