Formulario de login sin plugins en WordPress

[ 28 noviembre 2018 ] [ Autor: Jhon Marreros Guzmán ] [ Core - Intermedio] [ ]

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

El formulario y el enlace se deberán mostrar/ocultar de acuerdo a si el usuario esta o no conectado, esto lo haremos por CSS

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;
}

Puedes agregar este código al final de tu archivo style.css de tu child-theme