Cómo crear una página de inicio de sesión de WordPress personalizada (Guía definitiva)

¿Desea crear una página de inicio de sesión de WordPress personalizada para su sitio web?

Si tienes un sitio de membresía de WordPress o una tienda en línea, muchos de tus usuarios verán a menudo la página de inicio de sesión. Personalizar la página de inicio de sesión predeterminada de WordPress le permite ofrecer una mejor experiencia de usuario.

En esta guía definitiva, le mostraremos diferentes maneras de crear una página de inicio de sesión personalizada de WordPress. También puedes usar este tutorial para crear una página de inicio de sesión de WooCommerce personalizada.

Esto es lo que aprenderá de esta guía.

  • Por qué crear una página de inicio de sesión personalizada de WordPress
  • Ejemplos de diseño de página de inicio de sesión de WordPress
  • Creación de una página de inicio de sesión personalizada en WordPress
  • Creación de una página de inicio de sesión de WordPress con Theme My Login
  • Creación de una página de inicio de sesión personalizada de WordPress utilizando WPForms
  • Personalización del diseño de la página del formulario de inicio de sesión de WordPress
  • Cambiar el logotipo de inicio de sesión en la página de inicio de sesión de WordPress
  • Cambiar el logotipo de inicio de sesión y la URL de WordPress utilizando un plugin
  • Cambiar el logotipo de inicio de sesión y la URL de WordPress sin un plugin (código)

¿Por qué crear una página de inicio de sesión de WordPress personalizada?

WordPress viene con un potente sistema de gestión de usuarios. Esto permite a los usuarios crear cuentas en tiendas de comercio electrónico, sitios web de miembros o en un blog.

Por defecto, la página de inicio de sesión muestra la marca y el logotipo de WordPress. Esto está bien si usted está ejecutando un pequeño blog, o si usted es la única persona con acceso de administrador.

Sin embargo, si su sitio web permite a los usuarios registrarse e iniciar sesión, una página de inicio de sesión personalizada ofrece una mejor experiencia de usuario.

El uso de su propio logotipo y diseño hace que sus usuarios se sientan como en casa. Mientras que redirigirlos a la pantalla de inicio de sesión predeterminada de WordPress, que no se parece en nada a su sitio web, puede parecer sospechoso para sus usuarios.

Por último, la pantalla de inicio de sesión predeterminada no contiene nada más que el formulario de inicio de sesión. Al crear una página de inicio de sesión personalizada, puede utilizarla para promocionar otras páginas o promociones especiales.

Dicho esto, echemos un vistazo a algunos ejemplos de diseños de páginas de inicio de sesión de WordPress personalizadas.

Ejemplos de diseño de página de inicio de sesión de WordPress

Los propietarios de sitios web pueden personalizar la página de inicio de sesión de WordPress utilizando diferentes estilos y técnicas.

Algunos crean una página de inicio de sesión personalizada que utiliza el tema y los colores de su sitio web. Otros, modifican la página de inicio de sesión predeterminada añadiendo un fondo personalizado, colores y su propio logotipo.

1. Formularios WP

WPForms es el mejor plugin de formulario de contacto WordPress del mercado. Coincidentemente, su plugin también incluye un complemento para crear hermosos formularios de inicio de sesión y registro de WordPress, que le mostraremos más adelante en este artículo.

Su página de inicio de sesión personalizada utiliza un diseño de dos columnas. La columna de la izquierda contiene el formulario de inicio de sesión y la columna de la derecha se utiliza para resaltar las promociones y otras llamadas a las acciones. En el ejemplo anterior, están usando la página de inicio de sesión para compartir su informe anual. Utiliza marcas personalizadas, ilustraciones de fondo y colores de marca para crear una experiencia de inicio de sesión única.

2. Rock My Wedding

El sitio web de Rock My Wedding utiliza un popup modal para mostrar el formulario de inicio de sesión y registro. La ventaja de utilizar una ventana emergente es que los usuarios pueden iniciar sesión sin salir de la página. Los guarda desde una nueva página de carga y ofrece una experiencia de usuario más rápida.

3. Jacquelynne Steves

Jacquelynne Steeves es un sitio web de arte y artesanía donde el autor publica contenido sobre la decoración del hogar, la fabricación de edredones, patrones, bordados y mucho más. Su página de inicio de sesión utiliza una imagen de fondo personalizada que coincide con el tema de su sitio web con el formulario de inicio de sesión de la derecha.

4. Gráficos de movimiento de la iglesia

La página de inicio de sesión de esta empresa de diseño de gráficos en movimiento utiliza un fondo colorido que refleja de qué se trata su negocio. Utiliza los mismos menús de cabecera, pie de página y navegación en la pantalla de inicio de sesión. El formulario de inicio de sesión en sí mismo es bastante simple con un fondo oscuro.

5. Revisión de la administración de MITSLoan

El sitio web de MITSLoan Management Review utiliza la pantalla de inicio de sesión predeterminada de WordPress. Utiliza CSS personalizado con su propio logotipo para ocultar la marca WordPress.

Creación de una página de inicio de sesión personalizada en WordPress

Hay varios plugins de WordPress que puedes usar para crear una página de inicio de sesión personalizada en WordPress. Te mostraremos dos plugins diferentes, y podrás elegir el que más te convenga.

Creación de una página de inicio de sesión de WordPress con el tema Mi inicio de sesión

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

Tras la activación, Theme My Login crea automáticamente URLs para sus acciones personalizadas de inicio de sesión, cierre de sesión, registro, olvido de contraseña y restablecimiento de contraseña.

Puede personalizar estas URLs de inicio de sesión de WordPress visitando la página Theme My Login » General . Desplácese hacia abajo hasta la secciónSlugs para modificar estas URLs utilizadas por el plugin para las acciones de inicio de sesión.

Theme My Login también le permite utilizar códigos abreviados para crear páginas personalizadas de inicio de sesión y registro. Puedes simplemente crear una página para cada acción y luego añadir el slug de la página aquí, para que el plugin pueda encontrar y redirigir a los usuarios correctamente.

Empecemos con la página de inicio de sesión.

Vaya a Page » Add New para crear una nueva página de WordPress. Debe darle un título a su página y luego introducir el siguiente código abreviado «[theme-my-login]» dentro del área de contenido.

Ahora puede publicar su página y previsualizarla para ver su página de inicio de sesión personalizada en acción.

Repita el proceso para crear otras páginas utilizando los siguientes códigos abreviados.

theme-my-login action=»register»] para el formulario de registro.

theme-my-login action=»lostpassword»] para la página de contraseña perdida.

theme-my-login action=»resetpass»] utilícelo en la página de restablecimiento de contraseña.

Creación de una página de inicio de sesión personalizada de WordPress mediante WPForms

WPForms es el mejor plugin de WordPress del mercado. Le permite crear fácilmente formularios personalizados de inicio de sesión y registro para su sitio web.

WPForms es un plugin premium de WordPress, y necesitará al menos su plan profesional para acceder al complemento de registro de usuarios. Los usuarios de AprenderWP pueden obtener un 50% de descuento utilizando nuestro código de cupón WPForms: SAVE50

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

Tras la activación, debe visitar la página WPForms » Settings para introducir su clave de licencia. Puede encontrar esta información en su cuenta en el sitio web de WPForms.

Después de introducir la clave de licencia, podrá instalar complementos. Visite la página de WPForms » Addons y localice el Addon de Registro de Usuario.

A continuación, haga clic en el botón Instalar complemento para descargar y activar el complemento. Ahora está listo para crear sus propios formularios de inicio de sesión personalizados.

Vaya a WPForms » Añadir nueva página y desplácese hacia abajo hasta la plantilla `User Login Form. Para continuar, debe hacer clic en el botón «Crear un formulario de inicio de sesión de usuario».

WPForms cargará el Formulario de Acceso de Usuario con los campos requeridos. Puede hacer clic en los campos para añadir su propia descripción o texto a su alrededor.

También puede cambiar otros ajustes. Por ejemplo, añade automáticamente Enviar como título del botón. Puede hacer clic en él y luego cambiarlo a Inicio de sesión.

También puede decidir lo que sucede una vez que el usuario ha iniciado sesión correctamente. 1. Vaya a la pestaña Configuración » Confirmación y seleccione una acción.

Puede redirigir al usuario a cualquier otra URL, redirigirlo a la página de inicio, o simplemente mostrarle un mensaje de que ya está conectado.

Una vez que esté satisfecho con la configuración del formulario, haga clic en el botón Guardar en la esquina superior derecha de la pantalla y cierre el generador del formulario.

Agregar su formulario de inicio de sesión personalizado a una página de WordPress

WPForms hace que sea súper fácil añadir su formulario de inicio de sesión personalizado en cualquier entrada o página de WordPress.

Simplemente edite la página donde desea agregar el formulario de inicio de sesión o crear uno nuevo. En la pantalla de edición de página, agregue el bloque WPForms a su área de contenido.

A continuación, seleccione el formulario de inicio de sesión que creó anteriormente y el bloque WPForms lo cargará automáticamente dentro del área de contenido.

Ahora puede continuar editando la página del formulario de inicio de sesión o guardar y publicar sus cambios.

Personalización del diseño de la página del formulario de inicio de sesión de WordPress

De forma predeterminada, la página personalizada del formulario de inicio de sesión de WordPress utilizará la plantilla y los estilos de página del tema. Tendrá los menús de navegación, encabezados, pies de página y widgets de la barra lateral de su tema.

Si desea hacerse cargo completamente de toda la página y diseñar algo desde cero, entonces puede utilizar un plugin de WordPress.

Con un plugin de generador de páginas, puede crear un diseño de página personalizado y luego agregar el widget de formulario de inicio de sesión proporcionado por Theme My Login o WPForms.

En la captura de pantalla de abajo, hemos utilizado el popular plugin Beaver Builder. Usamos una imagen de fondo en un diseño de pantalla completa y luego añadimos dos columnas. En una columna añadimos texto y un botón. En la otra columna, añadimos el widget WPForms.

El beneficio de Beaver Builder es que es una solución 100% de arrastrar y soltar.

Nota: Dado que ya ha iniciado sesión, es posible que tanto Theme My Login como los plugins de WPForms no muestren una vista previa en vivo del formulario de inicio de sesión. El plugin de WPForms tiene una opción donde puede desactivarlo en la configuración del formulario.

Si los plugins del generador de páginas de WordPress no son lo tuyo, entonces puedes usar CSS personalizado para darle estilo al formulario y a la página de inicio de sesión en sí. Alternativamente, también puede utilizar el plugin CSS Hero para añadir fácilmente estilos CSS personalizados.

Cambiar el logotipo y la URL de inicio de sesión de WordPress

No siempre es necesario crear una página de inicio de sesión de WordPress completamente personalizada para su sitio web. De hecho, muchos sitios web simplemente reemplazan el logotipo de WordPress y la url del logotipo mientras que aún usan la página de inicio de sesión predeterminada.

Si desea reemplazar el logotipo de WordPress en la pantalla de inicio de sesión con su propio logotipo, puede hacerlo fácilmente utilizando un plugin de WordPress o añadiendo código personalizado. Le mostraremos los dos métodos que puede utilizar uno que mejor se adapte a sus necesidades.

Cambiar el logotipo y la URL de inicio de sesión de WordPress usando un plugin

Lo primero que debe hacer es instalar y activar el plugin Colorlib Login Customizer. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, el plugin añade un nuevo elemento de menú llamadoPersonalizador de inicio de sesión a la barra lateral de administración de WordPress. Al hacer clic en él, se iniciará el personalizador de inicio de sesión.

El personalizador de inicio de sesión cargará su pantalla de inicio de sesión predeterminada de WordPress con opciones de personalización a la izquierda y una vista previa en vivo a la derecha.

Para reemplazar el logotipo de WordPress por el suyo propio, haga clic en la pestaña «Opciones de logotipo» a la derecha. Desde aquí puedes ocultar el logotipo de WordPress, subir tu propio logotipo personalizado, cambiar la URL y el texto del logotipo.

El plugin también le permite personalizar completamente la página de inicio de sesión predeterminada de WordPress. Puede agregar columnas, imagen de fondo, cambiar los colores del formulario de inicio de sesión y mucho más.

Básicamente, puede crear una página de inicio de sesión personalizada de WordPress sin cambiar la URL de inicio de sesión predeterminada de WordPress.

Una vez que haya terminado, simplemente haga clic en el botón de publicar para guardar los cambios. Ahora puede visitar la página de inicio de sesión de WordPress para ver su formulario de inicio de sesión personalizado en acción.

Cambiar el logotipo de inicio de sesión de WordPress y la URL sin el plugin (código)

Este método le permite reemplazar manualmente el logotipo de WordPress en la pantalla de inicio de sesión con su propio logotipo personalizado.

En primer lugar, debe cargar su logotipo personalizado en la biblioteca multimedia. Vaya a Media » Añadir nueva página y cargue su logotipo personalizado.

Una vez que haya subido la imagen, haga clic en el enlace «Editar» junto a ella. Esto abrirá la página de edición de medios donde necesita copiar el URL del archivo y pegarlo en un archivo de texto en blanco en su computadora.

A continuación, debe agregar el siguiente código al archivo functions.php de su tema o a un plugin específico del sitio.

12345678910111213functionwpb_login_logo() { ?> «text/css»> #login h1 a, .login h1 a { background-image: url(http://path/to/your/custom-logo.png); height:100px; width:300px; background-size: 300px 100px; background-repeat: no-repeat; padding-bottom: 10px; }     No olvide reemplazar la URL de la imagen de fondo con la URL del archivo que copió anteriormente. También puede ajustar otras propiedades CSS para que coincidan con la imagen de su logotipo personalizado.

Ahora puede visitar la página de inicio de sesión de WordPress para ver su logotipo personalizado en acción.

Este código sólo sustituye al logotipo de WordPress. No cambia el enlace del logotipo que apunta al sitio web de WordPress.org.

Vamos a cambiar esto.

Simplemente agregue el siguiente código al archivo functions.php de su tema o a un plugin específico del sitio. Puedes añadir este código justo debajo del código que has añadido antes.

123456789functionwpb_login_logo_url() { returnhome_url();}add_filter(login_headerurl, wpb_login_logo_url); functionwpb_login_logo_url_title() { returnYour Site Name and Info;}add_filter( login_headertitle, wpb_login_logo_url_title);

No olvide reemplazar «Su nombre e información del sitio» con el nombre real de su sitio. El logotipo personalizado en la pantalla de inicio de sesión apuntará ahora a la página de inicio de su sitio.

Eso es todo. Esperamos que este artículo le haya ayudado a aprender diferentes maneras de crear una página de inicio de sesión de WordPress para su sitio web. También puede consultar nuestra guía de seguridad de WordPress para obtener consejos sobre cómo mejorar la seguridad de inicio de sesión de WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja un comentario