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, aunque parezca insignificante, marca una gran diferencia. La pantalla de inicio de sesión predeterminada de WordPress es sosa, genérica e incluso redirige fuera de tu sitio.

¿La buena noticia? Puedes sustituirla por una página de inicio de sesión totalmente personalizada con tu marca y tu diseño utilizando un solo plugin. En esta guía, te explicaré paso a paso cómo crear una página de inicio de sesión personalizada con WPForms. Esto incluye crear el formulario, personalizar el diseño, publicar la página y redirigir la URL de inicio de sesión predeterminada.

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

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

Todos los sitios de WordPress incluyen la misma pantalla de inicio de sesión predeterminada. Tiene el logotipo de WordPress, un fondo blanco liso y nada que indique a los visitantes en qué sitio están iniciando sesión. He aquí por qué vale la pena cambiarla:

• Identidad de marca. Una página de inicio de sesión personalizada pone tu logotipo, tus colores y tus mensajes en primer plano. En WPForms, utilizamos nuestra página de inicio de sesión personalizada para destacar las nuevas funciones y actualizaciones para nuestros usuarios.
• Seguridad. Al crear una página de inicio de sesión personalizada, puedes redirigir la página predeterminada wp-login.php URL. Esto reduce los ataques de fuerza bruta y el spam en los inicios de sesión, ya que los bots no pueden encontrar tu formulario de inicio de sesión real. Combina esto con una contraseña segura Plugins de seguridad para WordPress para una protección aún mayor.
• Aspecto profesional. Si tu sitio web permite el registro de miembros, el inicio de sesión de clientes o la creación de 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 adecuado en cuanto ven tu logotipo.

Y esto es lo mejor: no necesitas un plugin específico para personalizar el formulario de inicio de sesión, un creador de páginas Y un plugin de formularios para conseguirlo. WPForms se encarga del formulario de inicio de sesión, del diseño visual y de 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 voy a enseñar cómo crear una página de inicio de sesión personalizada completa utilizando WPForms y su complemento de registro de usuarios. Este tutorial lo abarca todo: crear el formulario, añadir tu imagen de marca, personalizar el diseño, 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: Instala WPForms y configura el complemento de registro de usuarios

En primer lugar, necesitarás tener instalado WPForms Pro en tu sitio web. El complemento «User Registration» es el que te ofrece plantillas de formularios para el inicio de sesión, el registro y el restablecimiento de contraseñas, y está disponible en el plan Pro y superiores.

Si aún no tienes WPForms, descárgalo desde la página de precios e instálalo en tu sitio de WordPress. A continuación, ve a WPForms » Complementos en tu panel de control.

Busca el complemento «User Registration Addon» y haz clic en el botón para instalarlo. Y ya está, la configuración ha terminado. Con un plugin y un complemento, ya tienes todo lo necesario para crear una página de inicio de sesión personalizada, un formulario de registro y un formulario para restablecer la contraseña.

Consiga 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.

Asigna un nombre al formulario (por ejemplo, «Formulario de inicio de sesión personalizado») y, a continuación, selecciona la plantilla «Formulario de inicio de sesión de usuario ». Esta plantilla está diseñada específicamente para la función de inicio de sesión y no aparecerá si no tienes activado el complemento de registro de usuarios.

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

La casilla «Recordarme» permite a los visitantes permanecer conectados entre una visita y otra. Es un pequeño detalle, pero evita que los usuarios habituales tengan que introducir sus credenciales cada vez que vuelven. Para obtener más detalles técnicos, consulta la documentación sobre el formulario de inicio de sesión.

Puedes utilizar esta plantilla tal cual o personalizarla aún más. Te recomiendo que, como mínimo, añadas tu imagen de marca, que es lo que haremos a continuación.

Paso 3: Añadir la imagen de marca y personalizar el diseño

Puedes añadir tu logotipo, cambiar los colores, ajustar las fuentes y personalizar el estilo de los botones sin necesidad de instalar un plugin independiente para personalizar la página de inicio de sesión. Todo se hace directamente desde WPForms y el editor de bloques de WordPress.

Añade tu logotipo o imagen de marca

Empieza arrastrando el campo «Contenido» hasta la parte superior del formulario, justo debajo del título.

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

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

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

Cuando tu imagen de marca tenga buen aspecto, haz clic en «Guardar». ¿Necesitas más inspiración para el diseño? Echa un vistazo a estos ejemplos de páginas de inicio de sesión para obtener ideas.

Personaliza el aspecto de tu formulario de inicio de sesión en el editor de bloques

Hay algo que la mayoría de las demás guías sobre páginas de inicio de sesión no mencionan: no necesitas un plugin específico para personalizar el aspecto de tu formulario de inicio de sesión. WPForms incluye funciones de personalización de formularios directamente en el editor de bloques de WordPress.

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

• Estilos de campo, como colores de fondo, colores de borde y radio de borde
• Estilos de etiquetas, incluyendo tipografías, tamaños y colores
• Estilos de botones, como el color de fondo, el color del texto, el radio del borde y el ancho
• Estilo general de los formularios para el espaciado, la alineación y los fondos de los contenedores

Esto supone un gran ahorro de tiempo. En lugar de tener que combinar un plugin de personalización de la página de inicio de sesión para los colores y otro plugin de formularios para la funcionalidad de inicio de sesión propiamente dicha, lo haces todo en WPForms.

Para obtener una guía detallada de todas las opciones de estilo, consulta la guía sobre cómo aplicar estilos a tus formularios en el editor de bloques. Ya que estamos, personalicemos también el texto del botón de envío.

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

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

Sin salir del generador de formularios, haz clic en «Configuración» en el panel de la izquierda. A continuación, haz clic en «Confirmaciones» para decidir qué ocurre tras iniciar sesión correctamente.

En la mayoría de los sitios web, lo habitual es redirigir a los usuarios a algún sitio después de que inicien sesión. Puedes enviarlos a tu página de inicio, al panel de control de su cuenta o a cualquier otra página. Configura el «Tipo de confirmación» como «Ir a URL (redirección)» e introduce la URL de destino.

Hay otro ajuste que vale la pena revisar. Desplázate hacia abajo y haz clic en «Registro de usuario » para desplegar esas opciones.

Activa la opción para ocultar el formulario a los usuarios que hayan iniciado sesión. De este modo, las personas que ya hayan iniciado sesión no verán el formulario de inicio de sesión. Puedes personalizar el mensaje que verán en su lugar.

Haz clic en «Guardar » cuando hayas terminado de configurar los ajustes.

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

Tu formulario de inicio de sesión ya está creado, personalizado con tu marca y configurado. Ahora vamos a insertarlo en una página. Haz clic en el botón «Insertar» situado en la parte superior del generador de formularios.

Aparecerá una ventana emergente en la que se te preguntará dónde quieres insertar el formulario. Haz clic en «Crear nueva página».

Ponle un nombre a tu página (por ejemplo, «Inicio de sesión») y haz clic en «Adelante».

WordPress abre el editor de bloques con el formulario de inicio de sesión ya integrado. Aquí es también donde verás las opciones de estilo del bloque del paso 3, por lo que podrás ajustar los colores y las fuentes directamente desde aquí antes de publicar.

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

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

Tu página de inicio de sesión ya existe, pero los visitantes necesitan una forma de encontrarla. El lugar más lógico es el menú de navegación de tu sitio web. Ve a «Apariencia» » «Menús» en el panel de control 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 hasta la posición que desees 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 del menú (normalmente «Menú principal» para el encabezado) y haz clic en «Guardar menú».

Si tu sitio web 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. A continuación, añade tu página de inicio de sesión siguiendo los mismos pasos que acabo de describir. Visita tu página de inicio después de guardar los cambios para asegurarte de que el enlace de inicio de sesión aparece donde esperabas.

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ás la pantalla de inicio de sesión estándar de WordPress.

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

Para ello, utilizaremos WPCode. Se trata de un plugin gratuito que permite añadir fragmentos de código a WordPress sin necesidad de editar los archivos del tema.

Instala y activa WPCode; a continuación, ve a Fragmentos de código » + Añadir fragmento. Selecciona «Añadir tu código personalizado (nuevo fragmento)».

Asigna al fragmento un nombre como «Redireccionamiento de la página de inicio de sesión» y pega el código de redireccionamiento. 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 un mensaje de confirmación una vez que se haya guardado correctamente.

Por último, activa el fragmento de código en la parte superior de la página.

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

Extra: Crear un formulario personalizado para restablecer la contraseña

Si tu sitio web permite que los usuarios se registren, te conviene disponer también de un formulario personalizado para restablecer la contraseña. Sin él, los usuarios que olviden su contraseña serán redirigidos a la pantalla predeterminada de WordPress para restablecer la contraseña, lo que rompe la experiencia de marca que acabas de crear.

El complemento de registro de usuarios incluye una plantilla de formulario para restablecer la contraseña de usuario. Ve a WPForms » Añadir nuevo y selecciónala.

Puedes personalizar este formulario del mismo modo que personalizaste el formulario de inicio de sesión: añade tu imagen de marca mediante el campo «Contenido», dale estilo en el editor de bloques y publícalo en su propia página. Para obtener instrucciones detalladas, consulta nuestra guía sobre cómo personalizar el formulario de restablecimiento de contraseña en WordPress.

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

Si quieres 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 web, estas respuestas abordan las dudas más habituales.

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

Sí. WPForms te permite crear y personalizar un formulario de inicio de sesión totalmente a través de su editor de arrastrar y soltar y del editor de bloques de WordPress. Puedes cambiar los colores, las fuentes y el estilo de los botones, así como añadir tu propia imagen de marca sin escribir ni una sola línea de CSS o PHP.

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

Yo recomendaría WPForms Pro con el complemento de registro de usuarios. Aunque algunas guías sugieren utilizar plugins distintos para el formulario, el diseño y la maquetación de la página, WPForms se encarga de los tres.

En un solo paquete encontrarás formularios de inicio de sesión, formularios de registro, formularios para restablecer contraseñas y herramientas de personalización visual. Si quieres conocer mejor las opciones disponibles, echa un vistazo a nuestro resumen de los mejores plugins de páginas de inicio de sesión para WordPress.

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

WPForms te lo pone fácil. Puedes insertar tu formulario de inicio de sesión utilizando el bloque de WPForms en el editor de bloques, un código corto o un widget.

Esto significa que puedes colocar un formulario de inicio de sesión en cualquier página, en la barra lateral o en el pie de página. Para ver 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 medida de seguridad inteligente. Redirigir wp-login.php Si rediriges a tu página de inicio de sesión personalizada, los bots y los scripts automatizados que apuntan a la URL predeterminada no podrán acceder a tu formulario de inicio de sesión real.

Asegúrate de que el código de redireccionamiento 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 ya tienes una página de inicio de sesión personalizada y totalmente adaptada a tu marca para tu sitio de WordPress. Al incluir un formulario para restablecer la contraseña, tus usuarios disfrutarán de una experiencia profesional y impecable de principio a fin.

Para completar, echa un vistazo a cómo crear un formulario de registro de usuarios con WPForms. Y si la seguridad es una prioridad, aprende a evitar los restablecimientos de contraseña no autorizados en WordPress para reforzar aún más la seguridad.

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

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

Si este artículo te ha ayudado, síguenos en Facebook y Twitter para más tutoriales y guías gratuitas sobre WordPress.