# 152: Diseño de la página de inicio de sesión de WordPress (Lodge) - Trucos CSS

Tabla de contenido

Nuestro "widget" para The Lodge en la barra lateral del sitio (se muestra en la mayoría de las páginas, incluida la página de inicio) tiene dos estados. Uno para cuando un usuario está desconectado y otro cuando un usuario está conectado. El estado desconectado tiene un formulario de conexión para que los miembros actuales tengan una manera fácil de entrar.

Solíamos usar la función incorporada wp_login_form (), que es bastante buena para que WordPress la proporcione, pero queremos tener algo de control sobre el marcado. Esto nos permitirá agregar clases y demás para diseñarlo como queramos.

Sin embargo, hay una serie de situaciones en las que nuestro formulario de inicio de sesión personalizado no funcionará y tendremos que usar la vista de inicio de sesión predeterminada de WordPress. Es decir, lo que ve cuando visita /wp-login.php. Por ejemplo, si envía una contraseña incorrecta, será redirigido a esta página. O si desea registrarse en el sitio (sin pasar por Restrict Content Pro), o incluso restablecer su contraseña, lo hará a través de esta página /wp-login.php. Así que creo que sería mejor si diseñamos esta página para que se sienta, ya sabes, como una operación profesional en lugar de simplemente como "un sitio de WordPress". Además, podemos usar nuestro material de marca aquí, es decir, nuestra cabaña nevada.

Para tener el control, usamos un par de "ganchos" de WordPress en nuestro archivo functions.php para cargar un archivo CSS personalizado. Eso es todo lo que necesitamos para controlar el diseño.

Pasamos el resto del tiempo utilizando ese archivo CSS para personalizar la página de inicio de sesión. Hacemos que la cabina sea bastante borrosa, lo que creo que es un efecto atractivo. De alguna manera dice “¡La cabaña está allá atrás! ¡Inicie sesión y todo se aclarará! ”. Como una buena ventaja, las fotos borrosas como JPG.webp se pueden configurar en una calidad bastante baja, lo cual es bueno, porque lo estamos usando bastante grande como una imagen de fondo de página completa.

Articulos interesantes...