¿Quieres crear una página para restablecer la contraseña totalmente personalizada en tu sitio web de WordPress? Por defecto, la página que ofrece la plataforma muestra el logotipo de WordPress y se aleja de la imagen y estética de cualquier tema del sitio web de una empresa.
En este artículo, te mostraremos qué hacer para personalizar la página de restablecer contraseña de WordPress. ¡Toma nota!
¿Por qué personalizar la página de restablecer contraseña en WordPress?
Tu sitio web de WordPress viene con un potente sistema de gestión de usuarios y roles que permite a los usuarios registrarse para obtener una cuenta en tu web, iniciar sesión y restablecer su contraseña.
De forma predeterminada, estas páginas muestran la marca y el logotipo de WordPress. Eso está bien si solo tú y su equipo sois los que iniciáis sesión en vuestras áreas de administración. Pero, si tienes una tienda online o una web de membresía, tus clientes también deberán iniciar sesión.
Ofrecer una página personalizada proporcionará una experiencia de usuario mucho mejor, al hacer coincidir la página de inicio de sesión o reestablecer contraseña con el tema de tu sitio web, mostrando tu propio logotipo y ofreciendo contenido adicional.
Echemos un vistazo a cómo personalizar la página de restablecimiento de contraseña para una experiencia de usuario óptima.
¿Cómo personalizar la página de restablecer contraseña mediante plugins?
1. Personalización de la página de restablecer contraseña usando Formidable Forms
Primero, debes instalar el plugin Formidable Forms. Formidable Forms es uno de los plugin de formulario de WordPress más avanzado del mercado. Si bien hay una versión gratuita, necesitarás una cuenta Pro para poder crear una página de restablecimiento de contraseña.
Tras la activación, ve a Formidable »Add-Ons. Aquí busca buscar “User Registration add-on” para agregar una pantalla de inicio de sesión y restablecer la página de contraseña en la parte frontal de tu sitio web.
Una vez que lo hayas encontrado, simplemente haz clic en el botón de activar para habilitar el Add-On.
Ahora ya estás listo para crear una página de restablecer contraseña 100% personalizada.
Debes ir a Páginas»Añadir nueva para crear una nueva página. A continuación, tendrás que darle un título a tu página y luego ingresar el siguiente shortcode [frm-reset-password] dentro del editor de contenido de WordPress.
Asegúrate de agregar cualquier contenido adicional que quieras mostrar en la página, y después haz clic en el botón de publicar en la parte superior derecha de la pantalla.
Finalmente, debes asegurarte de que WordPress utilizará esta página al restablecer una contraseña. Para hacerlo, dirígete a Formidable»Global Settings y luego haz clic en la pestaña de “registro” en el menú.
Desde aquí, busca la opción “Reset Password Page” y luego simplemente seleccionar la página que acabas de crear en el menú desplegable.
No olvides hacer clic en el botón de actualizar en la parte superior de la pantalla para guardar toda tu configuración. Ahora ya puedes visitar tu sitio web para ver la página de restablecimiento de contraseña personalizada en acción.
2. Personalización de la página de restablecer contraseña con Theme My Login
Theme My Login no es muy personalizable, pero es una forma sencilla y gratuita de cambiar tu página de inicio de sesión y restablecer contraseña para que coincidan con tu tema de WordPress.
Lo primero que debes hacer es instalar y activar el complemento Theme My Login. Tras la activación, Theme My Login crea automáticamente URLs para tus inicios de sesión, cierre de sesión, registro, contraseña olvidada y restablecimiento de contraseña.
Puedes ver o personalizar estas URL visitando Theme My Login desde el menú de la izquierda de tu WordPress, y después en “General”. Desplázate hacia abajo hasta la sección “Slugs” para modificar estas URLs utilizadas por el plugin para las acciones de inicio de sesión y restablecer contraseña.
Observa los slugs para contraseña perdida y restablecer contraseña. Dejaremos la configuración predeterminada y comenzaremos creando una nueva página de contraseña perdida.
Debes dirigirte a Páginas»Añadir nueva para crear una nueva página de WordPress. A continuación, igual que en el anterior plugin, dale un título a tu página y luego añade el siguiente shortcode [theme-my-login action=»lostpassword»] dentro del área de contenido.
También tendrás que cambiar el slug de lostpassword para que Theme My Login redirija la URL normal de página de inicio de sesión nueva.
Una vez que hayas agregado cualquier contenido adicional que desees en la página, puedes hacer clic en el botón de publicar y obtener una vista previa para ver tu página de inicio de sesión personalizada ya en acción.
A continuación, deberás repetir el proceso para crear la página personalizada para restablecer la contraseña. Esta vez tendrás que agregar el shortcode [theme-my-login action=»resetpass»] al contenido de la página y cambiar el slug de URL a lostpassword.
3. Cambiar el logotipo de WordPress de la página de restablecimiento de la contraseña mediante un plugin o código
Es posible que no necesites crear una página de inicio de sesión o reestablecimiento de contraseña de WordPress completamente personalizada para tu sitio web. De hecho, muchos sitios web simplemente reemplazan el logotipo de WordPress y la URL del logotipo mientras siguen usando la página de inicio de sesión predeterminada.
Por un lado, puedes utilizar el plugin Custom Login Page Customizer by Colorlib, que añadirá la personalización del logo a tu menú de edición y personalización. Por otro lado, tienes la opción de cambiar el logo mediante código.
Este método te permite reemplazar manualmente el logotipo de WordPress en la pantalla de inicio de sesión o restablecimiento de contraseña con tu propio logotipo personalizado.
Primero, debes cargar tu logotipo personalizado en la biblioteca de medios. Ve a Medios»Añadir nuevo y carga tu logotipo personalizado.
Una vez que hayas subido la imagen, haz clic en “Editar” al lado. Esto abrirá la página de edición de medios, donde debes copiar la URL del archivo y pegarla en un archivo de texto en blanco en tu ordenador.
A continuación, agrega el siguiente código al archivo “functions.php” de tu tema:
| 1 function wpb_login_logo() { ?> 2 <style type=»text/css»> 3 #login h1 a, .login h1 a { 4 background-image: url(http://path/to/your/custom-logo.png); 5 height:100px; 6 width:300px; 7 background-size: 300px 100px; 8 background-repeat: no-repeat; 9 padding-bottom: 10px; 10 } 11 </style> 12 <?php } 13 add_action( ‘login_enqueue_scripts’, ‘wpb_login_logo’ ); |
No olvides reemplazar la URL de la imagen de fondo con la URL del archivo que copiaste anteriormente. También puedes ajustar otras propiedades CSS para que coincidan con la imagen de tu logotipo personalizado.
¡Y listo! Ahora ya puedes visitar la página de inicio de sesión de WordPress para ver tu logotipo personalizado en acción.
Lo mejor es que ambos métodos cambiarán automáticamente el logotipo en la página de restablecimiento de contraseña.
¿Te ha sido útil esta entrada? ¿No te ves capacitado para implementar el paso a paso de esta guía? Déjalo en nuestras manos. En MANTPress podemos ayudarte a personalizar tus páginas para ofrecer a los usuarios de tu web la mejor de las experiencias. Contacta ahora con nosotros y cuéntanos tu caso.
