Cómo crear una página de inicio de sesión personalizada en WordPress

¿Quieres crear una página de inicio de sesión personalizada para tu sitio de WordPress? He configurado páginas de inicio de sesión personalizadas para varios sitios de WordPress, y es uno de esos cambios que parecen pequeños pero marcan una gran diferencia. La pantalla de inicio de sesión predeterminada de WordPress es sosa, genérica e incluso enlaza fuera de tu sitio.

¿La buena noticia? Puedes reemplazarla con una página de inicio de sesión completamente de marca y estilizada usando solo un plugin. En esta guía, te mostraré cómo crear una página de inicio de sesión personalizada con WPForms. Esto incluye la creación del formulario, la personalización del diseño, la publicación de la página y la redirección de la URL de inicio de sesión predeterminada.

¡Crea tu página de inicio de sesión personalizada ahora! 🙂

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

Cada sitio de WordPress viene con la misma pantalla de inicio de sesión predeterminada. Tiene el logo de WordPress, un fondo blanco liso y nada que indique a los visitantes a qué sitio están iniciando sesión. Aquí te explicamos por qué vale la pena cambiarlo:

• Marca. Una página de inicio de sesión personalizada pone tu logo, colores y mensajes en primer plano. En WPForms, usamos nuestra página de inicio de sesión personalizada para destacar nuevas funciones y actualizaciones para nuestros usuarios.
• Seguridad. Cuando creas una página de inicio de sesión personalizada, puedes redirigir la URL predeterminada wp-login.php. Esto reduce los ataques de fuerza bruta y el spam de inicio de sesión porque los bots no pueden encontrar tu formulario de inicio de sesión real. Combina esto con potentes plugins de seguridad para WordPress para una protección aún mayor.
• Apariencia profesional. Si tu sitio acepta registros de miembros, inicios de sesión de clientes o cuentas de estudiantes, una página de inicio de sesión con tu marca genera confianza. Los visitantes saben que están en el lugar correcto en el momento en que ven tu logo.

Y aquí está la mejor parte: no necesitas un plugin personalizador de inicio de sesión independiente, un constructor de páginas Y un plugin de formularios para lograr esto. WPForms se encarga del formulario de inicio de sesión, el estilo visual y la creación de la página, todo en una sola herramienta.

Cómo crear una página de inicio de sesión personalizada en WordPress

Te mostraré cómo crear una página de inicio de sesión personalizada completa usando WPForms y su complemento User Registration. Esto cubre todo: crear el formulario, agregar tu marca, estilizar la apariencia, publicar la página y redirigir la URL de inicio de sesión predeterminada de WordPress para que los bots no puedan encontrarla.

Paso 1: Instalar WPForms y configurar el complemento User Registration

Primero, necesitarás WPForms Pro instalado en tu sitio. El complemento User Registration es lo que te proporciona plantillas de formularios de inicio de sesión, registro y restablecimiento de contraseña, y está disponible en el nivel Pro y superior.

Si aún no tienes WPForms, consíguelo en la página de precios e instálalo en tu sitio de WordPress. Luego, ve a WPForms » Complementos en tu panel.

Busca el Complemento User Registration y haz clic en el botón para instalarlo. Eso es todo para la configuración. Con un plugin y un complemento, ahora tienes todo lo que necesitas para crear una página de inicio de sesión personalizada, un formulario de registro y un formulario de restablecimiento de contraseña.

¡Consigue WPForms Pro ahora! :)

Paso 2: Crear un formulario de inicio de sesión personalizado

Haz clic en WPForms » Añadir nuevo para crear tu formulario de inicio de sesión.

Dale un nombre a tu formulario (algo como "Formulario de inicio de sesión personalizado"), luego selecciona la plantilla Formulario de inicio de sesión de usuario. Esta plantilla está diseñada específicamente para la funcionalidad de inicio de sesión y no la verás sin el complemento User Registration activado.

La plantilla se carga con tres campos ya en su lugar: Nombre de usuario, Contraseña y Recordarme.

La casilla de verificación Recordarme permite a los visitantes permanecer conectados entre visitas. Es un pequeño detalle, pero evita que los usuarios que regresan tengan que escribir sus credenciales cada vez. Para obtener más detalles técnicos, consulta la documentación del formulario de inicio de sesión.

Puedes usar esta plantilla tal cual o personalizarla aún más. Recomiendo al menos añadir tu marca, que es lo que haremos a continuación.

Paso 3: Agregar marca y personalizar el diseño

Puedes añadir tu logotipo, cambiar colores, ajustar fuentes y estilizar botones sin instalar un plugin personalizador de páginas de inicio de sesión independiente. Todo sucede dentro de WPForms y el editor de bloques de WordPress.

Añade tu logotipo o imagen de marca

Comienza arrastrando el campo Contenido a la parte superior de tu formulario, justo debajo del título.

Haz clic en el campo Contenido para abrir su panel de Opciones de campo a la izquierda.

Verás un editor de texto donde puedes añadir lo que quieras. Para insertar tu logotipo, haz clic en el botón Añadir medios y sube la imagen de tu marca.

Sube tu logotipo a través de la Galería de medios de WordPress, igual que harías con cualquier otra imagen en tu sitio.

Una vez que tu marca tenga buen aspecto, haz clic en Guardar. ¿Necesitas más inspiración de diseño? Consulta estos ejemplos de páginas de inicio de sesión para obtener ideas.

Estiliza tu formulario de inicio de sesión en el editor de bloques

Aquí hay algo que la mayoría de las otras guías de páginas de inicio de sesión no mencionarán: no necesitas un plugin de estilo dedicado para tu formulario de inicio de sesión. WPForms tiene estilos de formulario integrados directamente en el editor de bloques de WordPress.

Cuando incrustes tu formulario en una página (lo haremos en el Paso 5), verás opciones de estilo en la barra lateral del bloque WPForms. Desde allí, puedes personalizar:

• Estilos de campo como colores de fondo, colores de borde y radio del borde
• Estilos de etiqueta, incluyendo fuentes, tamaños y colores
• Estilos de botón, como color de fondo, color de texto, radio del borde y ancho
• Estilo general del formulario para espaciado, alineación y fondos del contenedor

Esto ahorra mucho tiempo. En lugar de tener que usar un plugin personalizador de inicio de sesión para los colores y un plugin de formulario para la funcionalidad de inicio de sesión real, lo haces todo en WPForms.

Para un recorrido completo de cada opción de estilo, consulta la guía sobre cómo estilizar tus formularios en el editor de bloques. Mientras tanto, también personalicemos el texto del botón de envío.

Ve a Ajustes » General dentro del constructor de formularios y cambia el Texto del botón de envío por algo como "Iniciar sesión".

Paso 4: Configurar tus ajustes de inicio de sesión

Aún en el constructor de formularios, haz clic en Ajustes en el panel izquierdo. Ahora haz clic en Confirmaciones para decidir qué sucede después de un inicio de sesión exitoso.

Para la mayora de los sitios, querrs redirigir a los usuarios a otro lugar despus de que inicien sesin. Puedes enviarlos a tu página de inicio, al panel de su cuenta o a cualquier otra página. Establece el Tipo de confirmacin en Ir a URL (Redirigir) e introduce tu URL de destino.

Hay una configuracin ms digna de mencin. Desplzate hacia abajo y haz clic en Registro de usuarios para expandir esas opciones.

Activa la opcin para ocultar el formulario a los usuarios que han iniciado sesin. De esta manera, las personas que ya han iniciado sesin no vern el formulario de inicio de sesin. Puedes personalizar el mensaje que ven en su lugar.

Haz clic en Guardar cuando hayas terminado con la configuracin.

Paso 5: Publicar tu página de inicio de sesión personalizada

Tu formulario de inicio de sesin est est, and configured. Now let’s put it on a page. Click the Embed button at the top of the form builder.

Aparecerá una ventana emergente preguntando dónde quieres incrustar el formulario. Haz clic en Crear nueva página.

Dale un nombre a tu página (algo como “Iniciar sesión”) y haz clic en Empecemos.

WordPress abre el editor de bloques con tu formulario de inicio de sesión ya incrustado. Aquí es donde también verás las opciones de estilo de bloque del Paso 3, para que puedas ajustar los colores y las fuentes aquí mismo antes de publicar.

Cuando todo tenga el aspecto que deseas, haz clic en Publicar. ¡Tu página de inicio de sesión personalizada está activa y lista para aceptar usuarios registrados en cuestión de minutos!

Paso 6: Agregar la página de inicio de sesión a tu menú de navegación

Tu página de inicio de sesión existe, pero los visitantes necesitan una forma de encontrarla. El lugar más natural es el menú de navegación de tu sitio. Ve a Apariencia » Menús en tu panel de WordPress.

Si ya tienes un menú configurado, busca tu página de inicio de sesión en el panel Páginas de la izquierda y haz clic en Añadir al menú.

Arrastra la página de inicio de sesión a donde quieras en el orden del menú. La mayoría de los sitios la colocan en el extremo derecho de la barra de navegación. Elige la ubicación de visualización de tu menú (normalmente Menú principal para la cabecera) y haz clic en Guardar menú.

Si tu sitio aún no tiene un menú, primero tendrás que crear uno. Introduce un nombre para tu menú en la sección Estructura del menú.

Haz clic en Crear menú para configurarlo. Luego, añade tu página de inicio de sesión utilizando los mismos pasos que acabo de describir. Visita tu página de inicio después de guardar para asegurarte de que el enlace de inicio de sesión aparece donde esperas.

Paso 7: Redirigir la URL de inicio de sesión predeterminada de WordPress

Este paso es opcional, pero lo recomiendo encarecidamente. Por defecto, cualquiera puede seguir visitando yoursite.com/wp-login.php y ver la pantalla de inicio de sesión genérica de WordPress.

Redirigir esa URL a tu página de inicio de sesión personalizada mantiene la experiencia coherente y hace que tu sitio sea más difícil de atacar para los bots.

Usaremos WPCode para esto. Es un plugin gratuito que te permite añadir fragmentos de código a WordPress sin editar los archivos del tema.

Instala y activa WPCode, luego ve a Fragmentos de código » + Añadir fragmento. Elige Añadir tu código personalizado (Nuevo fragmento).

Asigna un nombre a tu fragmento, como por ejemplo “Redirección de página de inicio de sesión”, y pega el código de redirección. Asegúrate de actualizar la URL del código para que coincida con la URL de tu página de inicio de sesión personalizada. Haz clic en Guardar fragmento.

Verás una confirmación una vez que se guarde correctamente.

Por último, activa el fragmento a Activo en la parte superior de la página.

Ahora, cualquiera que intente visitar wp-login.php será enviado automáticamente a tu página de inicio de sesión personalizada de marca en su lugar.

Extra: Crear un formulario de restablecimiento de contraseña personalizado

Si tu sitio permite el registro de usuarios, también querrás un formulario de restablecimiento de contraseña personalizado. Sin él, los usuarios que olviden su contraseña serán dirigidos a la pantalla de restablecimiento predeterminada de WordPress, lo que romperá la experiencia de marca que acabas de crear.

El complemento User Registration incluye una plantilla de Formulario de restablecimiento de contraseña de usuario. Ve a WPForms » Nuevo y selecciónala.

Puedes personalizar este formulario de la misma manera que personalizaste el formulario de inicio de sesión: añade tu marca con el campo Contenido, estilízalo en el editor de bloques y publícalo en su propia página. Para un tutorial detallado, consulta nuestra guía sobre cómo personalizar el formulario de restablecimiento de contraseña en WordPress.

Preguntas frecuentes sobre páginas de inicio de sesión personalizadas de WordPress

Si deseas crear una página de inicio de sesión personalizada para WordPress, personalizar la pantalla de inicio de sesión existente de WordPress o añadir un formulario de inicio de sesión a cualquier página de tu sitio, estas respuestas cubren las preguntas más comunes.

¿Puedo personalizar la página de inicio de sesión de WordPress sin programar?

Sí. WPForms te permite crear y estilizar un formulario de inicio de sesión personalizado completamente a través de su constructor de arrastrar y soltar y el editor de bloques de WordPress. Puedes cambiar colores, fuentes, estilos de botones y añadir tu propia marca sin escribir una sola línea de CSS o PHP.

¿Cuál es el mejor plugin para una página de inicio de sesión personalizada de WordPress?

Recomendaría WPForms Pro con el complemento User Registration. Si bien algunas guías sugieren usar complementos separados para el formulario, el estilo y el diseño de la página, WPForms se encarga de los tres.

Obtienes formularios de inicio de sesión, formularios de registro, formularios de restablecimiento de contraseña y herramientas de estilo visual en un solo paquete. Para una visión más amplia de las opciones disponibles, consulta nuestra recopilación de los mejores plugins para páginas de inicio de sesión de WordPress.

¿Cómo añado un formulario de inicio de sesión a cualquier página en WordPress?

WPForms lo hace sencillo. Puedes incrustar tu formulario de inicio de sesión usando el bloque WPForms en el editor de bloques, un shortcode o un widget.

Eso significa que puedes colocar un formulario de inicio de sesión en cualquier página, en tu barra lateral o en tu pie de página. Para el tutorial completo, consulta nuestra guía sobre cómo mostrar formularios de inicio de sesión y registro en cualquier página.

¿Es seguro redirigir la URL de inicio de sesión predeterminada de WordPress?

Sí, y de hecho es una práctica de seguridad inteligente. Redirigir wp-login.php a tu página de inicio de sesión personalizada significa que los bots y scripts automatizados que se dirigen a la URL predeterminada no llegarán a tu formulario de inicio de sesión real.

Solo asegúrate de que el código de redirección solo se aplique a las solicitudes GET para que el envío POST del formulario de inicio de sesión siga funcionando correctamente.

A continuación, crea una experiencia de registro completa

Ahora tienes una página de inicio de sesión personalizada y totalmente de marca para tu sitio de WordPress. Combinada con un formulario de restablecimiento de contraseña, tus usuarios obtienen una experiencia profesional y pulida de principio a fin.

Para completar, consulta cómo crear un formulario de registro de usuarios con WPForms. Y si la seguridad es una prioridad, aprende cómo evitar restablecimientos de contraseña no autorizados en WordPress para reforzar la seguridad.

Crea tu página de inicio de sesión personalizada ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.