Si tienes usuarios registrados en tu sitio WordPress habrás podido comprobar que para acceder al sitio el sistema de login por defecto es a través del backend. En este artículo veremos como construir de manera simple un formulario de login sin usar plugins.
Resultado Final
Al final obtendremos un formulario similar a lo que se muestra en la siguiente imagen
Generalidades
En un artículo anterior vimos cómo personalizar el formulario de login de WordPress, sin embargo ¿no sería mejor tener el formulario de acceso directamente en el front-end del sitio?, pues bien, existen muchos plugins para esto, sin embargo en este artículo vamos a ver cómo realizar un formulario simple sin plugins y que sea usado para el acceso de usuarios que ya están registrados.
Creación del formulario con código HTML
El formulario es simplemente código HTML el cual puedes adaptar a tus necesidades, este código puedes insertarlo en algún widget HTML en alguna posición de tu theme.
El código anterior:
- El código tiene un contenedor llamado login-code-container
- El código tiene dos partes una la del formulario y otra la del enlace de desconectar
- En el formulario se crea los controles de usuario, clave y botón
- En el formulario también hay un campo oculto para redirección
- El enlace final de desconexión también tiene un parámetro de redirección
Mostrar y Ocultar formulario con CSS
Para mostrar y ocultar el formulario, usaremos código CSS, nos basaremos en las clases que genera por defecto WordPress para saber si un usuario esta conectado o no.
body:not(.logged-in) #login-code-container a,
body.logged-in #login-code-container form{
display: none;
}
/* Estilos opcionales */
#login-code-container{
background-color:#eee;
border:1px solid #ccc;
padding:20px 20px 10px;
}
Conclusión
Como hemos visto, puedes añadir un formulario de login simple sólo usando HTML y CSS y evitar el uso de un plugin adicional en tu sitio WordPress.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando...