Cómo Personalizar la Página de Restablecimiento de Contraseña de WordPress

Las primeras impresiones cuentan, ¡incluso en tu página de restablecimiento de contraseña! ✨

Al probar las opciones de personalización de WordPress, hemos descubierto que una página de restablecimiento de contraseña bien diseñada puede mejorar la apariencia profesional de tu sitio y potenciar la experiencia del usuario.

Hemos dedicado tiempo a probar varios métodos para personalizar la página de restablecimiento de WordPress en nuestros entornos de demostración, comparando diferentes enfoques para encontrar las soluciones más prácticas.

Esta investigación ha revelado varias formas efectivas de dar marca y mejorar esta parte de tu sitio, a menudo pasada por alto.

En esta guía, compartiremos los métodos más confiables que hemos descubierto para personalizar tu página de restablecimiento de contraseña de WordPress.

¿Por qué personalizar la página de restablecimiento de contraseña en WordPress?

La razón principal para personalizar tu página de contraseña olvidada es proporcionar una experiencia de usuario mejor y más profesional.

Esto es especialmente importante si tienes una tienda de comercio electrónico o un sitio de membresía donde los clientes interactúan directamente con estas páginas.

Por defecto, WordPress muestra su propio logo y marca. Si bien esto está bien para un sitio donde solo tú y tu equipo inician sesión, puede parecer poco profesional para los clientes y romper la consistencia del diseño de tu sitio.

Crear una página personalizada te permite reemplazar la marca predeterminada con la tuya. Puedes igualar el diseño de tu sitio web, agregar tu logo e incluso incluir contenido adicional útil para generar más confianza con tus usuarios.

Es posible que ya hayas seguido nuestras otras guías sobre cómo agregar un formulario de registro de usuario personalizado y una página de inicio de sesión.

Ahora, veamos cómo personalizar la página de restablecimiento de contraseña. Simplemente usa los enlaces rápidos a continuación para ir directamente al método que deseas usar:

1. Customizing the Reset Password Page Using Formidable Forms (Easy)
2. Customize All Membership Pages Using 'Theme My Login'
3. Create a Password Reset Page Using WPForms (Completely Customizable)
4. Guías expertas sobre la personalización de páginas de WordPress

Método 1: Personalizar la página de restablecimiento de contraseña usando Formidable Forms (Fácil)

La forma más fácil de reemplazar la página de restablecimiento de contraseña de WordPress es usando Formidable Forms. Durante las pruebas, descubrimos que te permite reemplazar la página de restablecimiento de contraseña predeterminada usando un shortcode.

Ten en cuenta que este método no te permite editar el formulario de restablecimiento de contraseña, pero puedes agregar tu propio contenido alrededor de él. Por ejemplo, puedes agregar texto, imágenes y otro contenido usando el editor de publicaciones estándar de WordPress.

Para obtener más información, consulta nuestra reseña de Formidable Forms.

Paso 1: Instala Formidable Forms y el Addon

Primero, necesitas instalar la versión gratuita del plugin. En tu panel de WordPress, navega a Plugins » Agregar Nuevo y busca 'Formidable Forms'. Instala y activa el plugin.

Para desbloquear las funciones de registro de usuarios, necesitarás la versión premium. Después de comprarla, puedes instalar el plugin premium Formidable Forms.

Para obtener más información, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez que hayas hecho eso, ve a la página Formidable Forms » Configuración global en tu panel y selecciona 'Haz clic para ingresar una clave de licencia manualmente'.

Puedes encontrar la clave de licencia en tu cuenta en el sitio web de Formidable Forms. Después de ingresar esta información, procede a hacer clic en el botón 'Guardar licencia'.

A continuación, debes instalar el complemento de Registro de usuarios yendo a Formidable » Complementos. En esta pantalla, busca el complemento de Registro de usuarios y haz clic en su botón 'Instalar'.

Paso 2: Crear la página personalizada

Ahora estás listo para crear una página personalizada de restablecimiento de contraseña yendo a Páginas » Agregar nueva.

Para empezar, dale un título a la página y luego haz clic en el botón +.

Simplemente haz clic en el bloque correcto para agregarlo a la página.

Ahora puedes agregar el siguiente shortcode: [frm-reset-password].

En este punto, puedes agregar cualquier otro contenido que desees mostrar en la página de restablecimiento de contraseña.

Paso 3: Publicar y configurar la página

Cuando estés satisfecho con el diseño de la página, haz clic en el botón ‘Publicar’ para que esté activa.

Finalmente, necesitas indicarle a WordPress que use esta página en lugar de la página predeterminada de restablecimiento de contraseña. Para hacerlo, ve a Formidable » Configuración Global y haz clic en la pestaña ‘Registro’ en el menú.

Desde aquí, abre el menú desplegable ‘Página de restablecimiento de contraseña’ y elige la página que acabas de crear.

No olvides hacer clic en el botón ‘Actualizar’ en la parte superior de la pantalla para guardar tu configuración.

Ahora puedes visitar tu sitio web de WordPress para ver la página personalizada de restablecimiento de contraseña en acción.

Método 2: Personaliza todas las páginas de membresía usando ‘Theme My Login’ (Gratis)

Para ofrecer una experiencia de usuario coherente, es una buena idea usar el mismo estilo en todas tus páginas de membresía. Theme My Login es un plugin gratuito que te permite reemplazar las páginas integradas de WordPress para el panel de control, inicio de sesión, cierre de sesión, registro, olvido de contraseña y restablecimiento de contraseña.

No es la solución más personalizable, pero todas sus páginas usarán tu tema de WordPress.

Paso 1: Instalar el plugin

Lo primero que debes hacer es instalar y activar el plugin Theme My Login. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Al activarse, Theme My Login crea automáticamente URLs para tus pantallas personalizadas de inicio de sesión, cierre de sesión, registro, contraseña olvidada y restablecimiento de contraseña. Puedes ver estas URLs yendo a la página Theme My Login » General.

Para reemplazar cualquiera de estas páginas, simplemente necesitas crear una nueva página con esta URL exacta.

Paso 2: Crear una nueva página y agregar el shortcode

Para crear una página personalizada de restablecimiento de contraseña en WordPress, ve a Página » Añadir Nueva. Aquí, haz clic en el ícono ‘+’ y empieza a escribir ‘Shortcode’.

Cuando aparezca el bloque correcto, haz clic en él para añadirlo a la página.

Dentro del bloque, añade el siguiente shortcode:

[theme-my-login action="lostpassword"]

Ahora puedes agregar cualquier contenido adicional que desees mostrar en la página de restablecimiento de contraseña, como tu logo.

Paso 3: Guardar y editar rápidamente la página

Cuando estés satisfecho con la configuración de la página, haz clic en 'Guardar borrador'.

Después de eso, ve a Páginas » Todas las Páginas y busca la página de restablecimiento de contraseña que acabas de crear.

Simplemente pasa el ratón sobre la página y haz clic en el botón ‘Edición Rápida’ cuando aparezca.

Paso 4: Establecer el slug y publicar

En el campo ‘Slug’, escribe ‘lostpassword’.

Después de eso, abre el menú desplegable ‘Estado’ y selecciona ‘Publicado’.

Hecho esto, haz clic en ‘Actualizar’. Ahora, si visitas tu blog de WordPress, verás la página de contraseña olvidada en vivo.

Para reemplazar las otras páginas de membresía integradas de WordPress, puedes seguir el mismo proceso. Solo asegúrate de usar el slug de URL y el shortcode correctos para cada página:

• Página de inicio de sesión: Usa el slug login y el shortcode [theme-my-login].
• Página de cierre de sesión: Usa el slug logout y el shortcode [theme-my-login action="logout"].
• Página de registro: Usa el slug register y el shortcode [theme-my-login action="register"].
• Página de restablecimiento de contraseña: Usa el slug resetpass y el shortcode [theme-my-login action="resetpass"].

Método 3: Crear una página de restablecimiento de contraseña usando WPForms (Completamente personalizable)

Si deseas reemplazar la página predeterminada de restablecimiento de contraseña con un formulario completamente personalizado, te recomendamos usar WPForms.

Este plugin tiene una plantilla de 'Formulario de restablecimiento de contraseña de usuario' que puedes personalizar con tu propio texto, imágenes y marca. Incluso puedes agregar y eliminar campos para recopilar exactamente la información que deseas de los miembros.

En WPBeginner, lo hemos utilizado para crear nuestras encuestas anuales y formularios de contacto, y hemos descubierto que es súper fácil de usar para principiantes. Para más detalles, consulta nuestra reseña de WPForms.

Paso 1: Instalar WPForms y el Addon

Lo primero que necesitas hacer es instalar y activar el plugin WPForms. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, dirígete a WPForms » Ajustes e ingresa tu clave de licencia. Puedes encontrar esta información en tu cuenta en el sitio web de WPForms.

Después de ingresar la clave de licencia, necesitarás instalar el complemento User Registration (Registro de Usuario), que te permite crear formularios personalizados de registro de usuarios, restablecimiento de contraseña e inicio de sesión para tu sitio.

En el panel, ve a WPForms » Complementos y busca el complemento User Registration.

Simplemente haz clic en ‘Instalar complemento’ para descargarlo, y luego haz clic en ‘Activar’ para que esté en funcionamiento.

Paso 2: Crear el formulario a partir de una plantilla

Ahora estás listo para crear tu propio formulario personalizado de restablecimiento de contraseña yendo a la página WPForms » Nuevo. Aquí, escribe un título para el nuevo formulario.

Una vez hecho esto, desplázate hasta la plantilla ‘Formulario de restablecimiento de contraseña de usuario’ y haz clic en su botón ‘Usar plantilla’.

WPForms cargará ahora la plantilla del formulario de restablecimiento de contraseña de usuario.

Para personalizar cualquier campo con tu propio texto, etiqueta o descripción, simplemente haz clic para seleccionarlo y luego usa las opciones en el menú de la izquierda.

Por ejemplo, la plantilla tiene un botón ‘Enviar’. Para mostrar una etiqueta de botón diferente, simplemente haz clic para seleccionar el campo y luego escribe un nuevo mensaje en ‘Texto del botón de envío’.

También puedes cambiar lo que sucede cuando un usuario envía su solicitud de restablecimiento de contraseña yendo a Configuración » Confirmaciones.

Aquí, abre el menú desplegable ‘Tipo de confirmación’ y elige si quieres redirigir al usuario a una página o URL diferente o simplemente mostrar un mensaje pidiéndole que revise su bandeja de entrada para ver un correo electrónico de restablecimiento de contraseña.

También puedes personalizar el mensaje escribiéndolo en el pequeño editor de texto. Por ejemplo, podrías recordar a los usuarios que revisen sus carpetas de spam.

Cuando estés satisfecho con la configuración del formulario, haz clic en el botón ‘Guardar’ en la esquina superior derecha de la pantalla.

Paso 3: Incrustar el formulario en una nueva página

Para reemplazar la página predeterminada de restablecimiento de contraseña de WordPress, crea una página con el slug ‘one password’. Luego, agrega el formulario a esa página.

La forma más fácil de hacer esto es hacer clic en el botón ‘Incrustar’ en el editor de WPForms y seleccionar ‘Crear nueva página’.

Ahora, escribe un título para la nueva página. Cambiarás el slug en un paso posterior, así que puedes usar lo que quieras.

Hecho esto, haz clic en ‘Empezar’.

Esto te llevará al editor de páginas de WordPress, donde el formulario ya se ha agregado a la nueva página. Ahora puedes hacer cualquier cambio en esta página, como agregar más texto, un logo personalizado o categorías y etiquetas.

Cuando estés satisfecho con cómo se ve la página, haz clic en el botón ‘Guardar borrador’.

Paso 4: Establecer el slug y publicar

Después de eso, ve a Páginas » Todas las páginas y busca la página de restablecimiento de contraseña que acabas de crear.

Aquí, haz clic en el botón ‘Edición rápida’.

En el campo ‘Slug’, escribe ‘lostpassword’.

Después de eso, abre el menú desplegable ‘Estado’ y selecciona ‘Publicado’.

Paso 5: Instalar y Activar WPCode

Ahora, necesitas asegurarte de que el enlace predeterminado de ‘¿Olvidaste tu contraseña?’ en el formulario de inicio de sesión de WordPress apunte a tu nueva página personalizada. La forma más fácil de hacer esto es usando el plugin gratuito WPCode.

WPCode es el mejor plugin de fragmentos de código utilizado por más de 2 millones de sitios web de WordPress. Facilita la adición de código personalizado en WordPress sin tener que editar el archivo functions.php.

Con WPCode, incluso los principiantes pueden editar el código de su sitio web sin arriesgarse a cometer errores y erratas que pueden causar muchos errores comunes de WordPress.

Lo primero que necesitas hacer es instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Paso 6: Crear un Nuevo Fragmento

Tras la activación, dirígete a Snippets de código » Añadir Snippet.

Aquí, encontrarás fragmentos listos para usar que te permiten subir tipos de archivo adicionales a WordPress, deshabilitar páginas de adjuntos, deshabilitar completamente los comentarios, y más.

Simplemente coloca el cursor sobre ‘Agregar tu código personalizado’ y luego haz clic en ‘Usar fragmento’ cuando aparezca.

Para empezar, escribe un título para el fragmento de código personalizado. Puede ser cualquier cosa que te ayude a identificar el fragmento en el panel de WordPress.

Después de eso, abre el menú desplegable ‘Tipo de código’ y selecciona ‘Fragmento de PHP’.

En el editor de código, agrega el siguiente fragmento de código:

add_filter( 'lostpassword_url', 'my_lostpassword_url' );
function my_lostpassword_url() {
return site_url('/lostpassword/');
}

A continuación, desplázate hasta la sección ‘Inserción’. WPCode puede agregar código a diferentes ubicaciones, como después de cada publicación, solo en el frontend o solo en el administrador.

Para usar el código PHP personalizado en todo tu sitio web, blog o tienda WooCommerce, haz clic en ‘Inserción automática’ si no está seleccionado ya. Luego, abre el menú desplegable ‘Ubicación’ y elige ‘Ejecutar en todas partes’.

Después de eso, estás listo para desplazarte hasta la parte superior de la pantalla y hacer clic en el interruptor ‘Inactivo’ para cambiarlo a ‘Activo’.

Paso 7: Activar el Fragmento

Finalmente, haz clic en ‘Guardar fragmento’ para que el fragmento de PHP se active.

Ahora, intenta visitar la pantalla de inicio de sesión integrada de WordPress.

Si haces clic en el enlace ‘¿Olvidaste tu contraseña?’, serás redirigido a la página personalizada de restablecimiento de contraseña que acabas de crear.

Dependiendo de cómo esté configurado tu sitio, es posible que necesites actualizar los enlaces de restablecimiento de contraseña en otras páginas.

Si has creado una página de inicio de sesión personalizada para WordPress usando un plugin como WPForms, entonces también recomendamos agregar el nuevo enlace de restablecimiento de contraseña a este formulario.

Guías expertas sobre la personalización de páginas de WordPress

Esperamos que este tutorial te haya ayudado a aprender cómo personalizar la página de restablecimiento de contraseña de WordPress. También te pueden interesar algunos tutoriales sobre cómo mejorar la seguridad de inicio de sesión de WordPress:

• Cómo crear una página de inicio de sesión personalizada en WordPress (Guía definitiva)
• Cómo y por qué deberías limitar los intentos de inicio de sesión en WordPress
• Consejos vitales para proteger el área de administración de tu WordPress
• Cómo agregar preguntas de seguridad a la pantalla de inicio de sesión de WordPress
• Cómo agregar una URL de inicio de sesión personalizada en WordPress (paso a paso)

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.