En un artículo anterior habíamos ya realizado un formulario de login sin plugins, sin embargo es posible ahorrarnos tanto código HTML como CSS y usar una función de WordPress que nos ayuda con la generación del formulario.
Resultado Final
Al final lo que queremos obtener será algo similar a lo que se muestra en la siguiente imagen:
Código para crear el formulario de login
El siguiente código crea un shortcode llamado [dcms_form_login] el cual puedes usar en cualquier lugar de tu sitio web para mostrar el formulario de login.
En el código anterior:
- Creamos el shortcode dcms_form_login que ejecuta la función dcms_form_login_config()
- Dentro de la función podemos configurar las variables para las redirecciones $redirect_login y $redirect_logout, por defecto llevan al inicio del sitio
- El código mostrará condicionalmente el formulario de login, usamos la función de WordPress wp_login_form() la cual crea el formulario con los argumentos indicados
- En caso el usuario ya se encuentre conectado mostraremos su información, como por ejemplo su avatar con la función get_avatar().
- Creamos igualmente la url de redirección tras la desconexión con la función wp_logout_url()
Puedes agregar este código en el archivo functions.php de tu tema hijo.
Conclusión
Como has podido comprobar, usando la función wp_login_form() de WordPress te puede ahorrar código al construir el formulario y simplemente nos preocupamos en agregar lógica adicional para el manejo del Shortcode.
Ver comentarios (12)
Hola Jhon, gracias por esta versión mejorada del login.
Sólo tengo una duda; yo quiero redirigir a una página externa al wordpress. Intenté en el redirect login poner la URL como tú pusiste la de google de ejemplo y no funcionó. Me sigue enviando a la home. No sé si se requiera otro hook o algo más.
Además sólo quiero que envie a ciertos usuarios con cierto rol a esa página externa.
¿Tendrás alguna sugerencia de cómo hacer que funcione este redirect login?
Gracias y saludos
Hola, la opción de redirección es propia de la función wp_login_form(), si que debería funcionarte https://developer.wordpress.org/reference/functions/wp_login_form/, prueba usando una url absoluta de tu propio sitio.
Hola excelentes todos tus articulos, quisiera saber la forma de hacer el login desde una base de datos externa donde tengo el usuario y clave, y el usuario se envié a WordPress y lo reconozca como el usuario actual
Gracias
Hola, si quieres que WordPress te administre la sesión, los usuarios tienen que estar en la BD de WordPress, por código puedes loguear a un usuario con la función: https://developer.wordpress.org/reference/functions/wp_signon/
hola buenas tardes estan super bueno tus tutoriales, no hay una forma facil de logear al usuario internamente mediante codigo con los credenciales colocados desde mi plugin personaliado parano recargar la pagina ?
Hola, si claro, si es posible puedes usar la función wp_signon() de WordPress, revisa: https://developer.wordpress.org/reference/functions/wp_signon/
hola Jhon, excelentes todos tus articulos. Me gustaria saber la forma de que el avatar se muestre circular y no cuadrado. da antemano gracias.
Hola, puedes aplicar estilos CSS sobre el HTML generado, posiblemente border-radius=20px; revisa el siguiente artículo relacionado: https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/
Hola John, como siempre gran artículo. ¿Es posible que si el usuario no añade correctamente sus datos no le redirija a la página de login por defecto de WordPress y se quede en la actual?
Hola, Pedro, al ser wp_login_form() una función de WordPress, no veo que haya argumentos que brinden ese comportamiento: https://developer.wordpress.org/reference/functions/wp_login_form/ , en ese caso se tendría que hacer un formulario personalizado. Espero hacer un artículo sobre eso.
Hola, excelente artículo.
¿Sabes como incluir el recaptcha de google v2 en el formulario?
Por ejemplo utilizando el plugin "Advanced Google reCAPTCHA"
Salludos.
Hola, revisa esta guia, es algo similar: https://decodecms.com/agregar-recaptcha-v3-en-formulario-de-contacto/