Cómo crear una página de inicio de sesión personalizada en WordPress (de forma FÁCIL)

¿Quieres crear una página de inicio de sesión personalizada para tu sitio web WordPress? Tener una página de inicio de sesión personalizada es una gran manera de reemplazar el inicio de sesión genérico de WordPress y añadir su propia marca.

En este artículo, le mostraremos la forma más sencilla de crear una página de inicio de sesión completamente personalizada para su sitio empresarial.

Cree su formulario WordPress ahora

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

Todos los sitios web de WordPress tienen la misma página de inicio de sesión. Es un simple formulario de inicio de sesión con el logotipo de WordPress encima.

Esta página es genérica, por lo que es difícil saber a qué sitio web se está accediendo realmente. El logotipo de WordPress también enlaza con WordPress.org, lo que podría alejar a los usuarios de tu sitio si hacen clic en él.

Sin embargo, si crea una página de inicio de sesión de WordPress personalizada para su sitio, podría utilizarla para:

• Promociones
• Notificaciones
• Y mucho más.

En WPForms, utilizamos el espacio extra de nuestra página de inicio de sesión personalizada para informar a los usuarios sobre nuevas funciones interesantes.

Es muy fácil crear una página de inicio de sesión personalizada, y también es eficaz para mejorar la seguridad del sitio web. Al crear una página de inicio de sesión personalizada, puedes ocultar la que viene por defecto para reducir el spam de inicio de sesión y mantener tu sitio WordPress seguro.

Ahora que sabemos por qué necesitas una página de inicio de sesión personalizada, vamos a crear una para tu sitio.

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

Vamos a utilizar WPForms para hacer un formulario de inicio de sesión completamente personalizado para su sitio. A continuación, le mostraremos cómo crear su página de inicio de sesión personalizado.

Bien, empecemos instalando el plugin de página de inicio de sesión personalizada para WPForms.

Paso 1: Instalar el plugin WPForms

Lo primero que tendrá que hacer es instalar y activar el plugin WPForms. Para más detalles, consulte esta guía paso a paso sobre cómo instalar un plugin en WordPress.

Para acceder a las funciones de registro de usuarios e inicio de sesión, necesitará WPForms Pro o superior. La versión Pro incluye el complemento Registro de usuarios, que facilita la creación de páginas de inicio de sesión personalizadas.

Una vez que haya instalado WPForms, vaya a WPForms " Addons.

Desplácese hacia abajo hasta encontrar el Complemento de Registro de Usuario. Haga clic en el botón para instalarlo.

Si quieres, puedes restringir el acceso a WordPress mientras construyes tu nuevo formulario de acceso. Para saber cómo hacerlo, consulta nuestra guía sobre cómo ocultar tu sitio de WordPress hasta que esté listo.

¡Ya estamos listos! Hagamos nuestro nuevo formulario de acceso personalizado.

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

Ahora que tenemos WPForms instalado, vamos a crear un nuevo formulario de inicio de sesión para WordPress.

Haga clic en WPForms " Añadir nuevo para empezar.

Ahora será llevado a la pantalla de selección de plantillas WPForms. El Complemento de Registro de Usuarios le ofrece algunas plantillas especiales con capacidades únicas, como se muestra a continuación.

Introduzca un nombre para el formulario y, a continuación, seleccione la plantilla Formulario de inicio de sesión de usuario.

Verás que el formulario se abre en el constructor de formularios. El formulario de inicio de sesión personalizado viene con un campo Nombre de usuario, un campo Contraseña y un campo Recuérdame.

El campo Recuérdame es especial y exclusivo de esta plantilla. Permite a los usuarios iniciar sesión automáticamente cada vez que visiten su sitio web después de enviar este formulario.

Puede utilizar esta plantilla tal cual o personalizarla si desea añadirle algún elemento adicional. Le mostraremos cómo hacerlo en el siguiente paso.

Paso 3: Añada una imagen de marca a su formulario de inicio de sesión

WPForms hace realmente fácil editar cualquier plantilla existente o construir un formulario desde cero. Por ejemplo, podemos insertar fácilmente elementos de marca en nuestro formulario de inicio de sesión para que destaque.

Una forma de hacerlo es añadir una imagen de cabecera que represente una marca hipotética. Solo tienes que arrastrar y soltar el campo Contenido en la parte superior de tu formulario, justo debajo del título.

Una vez que haya colocado el campo Contenido dentro de su formulario, haga clic en él para abrir sus Opciones de campo.

Ahora puede utilizar el editor WYSIWYG del panel izquierdo para insertar imágenes o añadir texto personalizado a su formulario.

Queremos añadir una imagen de marca a nuestro formulario de inicio de sesión de WordPress. Así que usaremos el botón Add Media para subir una imagen personalizada.

Cuando pulse el botón Añadir medios, verá que se abre la ventana modal de la Galería multimedia de WordPress. Aquí puedes subir una imagen como haces habitualmente en WordPress.

Cuando hayas terminado con las personalizaciones, asegúrate de pulsar Guardar.

Con una imagen de cabecera añadida, nuestro formulario de inicio de sesión personalizado de WordPress tiene un aspecto mucho más profesional y adaptado a una marca específica.

Si necesitas más ideas para personalizar tus formularios de inicio de sesión, consulta nuestro post sobre ejemplos de páginas de inicio de sesión.

Antes de continuar con el formulario de inicio de sesión, sería una buena idea crear también un formulario de restablecimiento de contraseña.

Paso 4: Personalizar la configuración del formulario de inicio de sesión personalizado

En este paso, veremos la configuración del formulario de inicio de sesión. Esto nos permitirá controlar el botón del formulario y la página a la que serán redirigidos nuestros visitantes.

Para empezar, haga clic en Configuración en la parte izquierda del generador de formularios.

La pestaña General estará preseleccionada cuando entres en la configuración, que es justo lo que queremos.

Dentro de la configuración general, desplácese hasta Submit Button Text y cámbielo por Log In.

También cambiamos el texto de procesamiento del botón Enviar para que el usuario pueda ver que el inicio de sesión está en curso. Puede escribir algo más aquí si lo desea.

A continuación, hagamos clic en Confirmaciones.

En esta pantalla, podemos elegir lo que sucede cuando se envía el formulario de inicio de sesión. Puedes hacer que tus usuarios abran el admin de WordPress si quieres. Para la mayoría de los sitios, tiene sentido redirigirlos de nuevo al frontend.

Así que en este ejemplo, vamos a redirigir al usuario a la página de inicio.

Hay un ajuste más que comprobar antes de continuar.

Si se desplaza hacia abajo en la pestaña Configuración del generador de formularios, verá el menú Registro de usuarios. Haz clic en Registro de usuarios para ampliar sus opciones.

Puede optar por ocultar este formulario a los usuarios registrados activando el botón. Utilice el cuadro de texto para editar el mensaje que se mostrará en lugar del formulario cuando un usuario ya haya iniciado sesión.

Estupendo. Tómate tu tiempo para revisar los demás ajustes y hacer los cambios que quieras. A continuación, haga clic en Guardar en la parte superior del generador de formularios.

Paso 5: Publique su formulario de inicio de sesión personalizado

Ahora estamos listos para publicar su nuevo formulario de inicio de sesión.

Puede incrustar su formulario de inicio de sesión personalizado en cualquier lugar de su sitio, incluyendo:

• Páginas
• Puestos
• En la barra lateral
• En el pie de página

En este ejemplo vamos a crear una página de inicio de sesión personalizada para WordPress. Para empezar, haz clic en el botón Incrustar en la parte superior del constructor de formularios.

En este punto, verás un modal preguntándote dónde quieres incrustar tu formulario. Para este ejemplo, crearemos una nueva página. Así que adelante y haga clic en Crear nueva página.

Y ahora dale un nombre a tu página. Una vez hecho esto, haz clic en Let's Go.

Esto le llevará al editor de bloques de WordPress con el formulario de inicio de sesión ya incrustado dentro.

Este es un gran lugar para utilizar las opciones de estilo de formulario en el bloque WPForms para personalizar fácilmente la apariencia de sus campos, etiquetas y botones.

Cuando esté satisfecho con el aspecto de su formulario de inicio de sesión personalizado, haga clic en el botón Publicar para publicar su página de inicio de sesión personalizada.

Ya está. Su página de inicio de sesión personalizada de WordPress está activa y lista para usar.

Recuerde: tendrá que cerrar la sesión de WordPress para ver su formulario terminado si ha utilizado la opción Ocultar si está conectado. Si has iniciado sesión, no verás la pantalla de inicio de sesión.

Si lo desea, puede utilizar un plugin de página de aterrizaje para crear una página de inicio de sesión personalizada e incrustar su formulario de inicio de sesión. Esto te permitiría configurar fácilmente una imagen de fondo y colores personalizados.

Paso 6: Añada el formulario de inicio de sesión a su menú de navegación

Acaba de crear su formulario de inicio de sesión personalizado con su marca. Perfecto.

Pero también es importante facilitar a los visitantes la localización y el acceso a su página de inicio de sesión personalizada.

La mejor manera de hacerlo es añadir su formulario de acceso al menú de navegación de su sitio web.

Para ello, abra su panel de WordPress y haga clic en Apariencia " Menús.

Si tu tema ya tiene un menú de navegación creado, puedes simplemente añadir tu nueva página de formulario al menú existente. Simplemente marca tu página de inicio de sesión en la columna de la izquierda y selecciona Añadir al menú.

La página de inicio de sesión aparecerá ahora a su derecha, junto con otras páginas de su menú. Si lo desea, puede reorganizar el orden de los elementos del menú arrastrando y soltando.

Después, tendrás que seleccionar la ubicación en la que quieres que aparezca el menú. La mayoría de los temas admiten hasta 5 ubicaciones para el menú, incluidas la cabecera y el pie de página, que son las más habituales.

En este ejemplo, añadiremos el menú a la cabecera. Esto es usualmente llamado el menú "Primario" en WordPress. Haga clic en Menú principal para seleccionar la ubicación de visualización y, a continuación, pulse el botón Guardar menú en la parte inferior para actualizar el menú.

El menú de navegación incluirá ahora su nueva página de inicio de sesión. Es una buena idea visitar su página de inicio después de actualizar o crear su menú y asegurarse de que todo se ve bien.

En caso de que su sitio web aún no tenga un menú, el proceso para crear un nuevo menú es muy similar a los pasos anteriores. La única diferencia es que primero tendrás que dar un nombre a tu nuevo menú en la sección Estructura del menú.

Una vez hecho esto, basta con hacer clic en el botón Crear menú de la parte inferior.

Ahora sólo tiene que seguir los mismos pasos para actualizar un menú existente para añadir la página de inicio de sesión a su navegación.

Si también ha creado un formulario personalizado de restablecimiento de contraseña, es posible que desee añadirlo también al menú.

Paso 7: Redirigir la página de inicio de sesión de WordPress a su página de inicio de sesión personalizada

Un último paso que puede querer dar es redirigir la página de inicio de sesión predeterminada de WordPress a su página de inicio de sesión personalizada. De este modo, cualquiera que intente acceder a la página de inicio de sesión predeterminada de WordPress será redirigido a la nueva.

Para ello, añadiremos un poco de código utilizando el plugin WPCode.

Este es un plugin gratuito que te permite añadir fácilmente código personalizado a tu sitio WordPress. Después de instalarlo y activarlo, ve a Fragmentos de código " + Añadir fragmento. A continuación, seleccione Añadir su código personalizado (nuevo fragmento).

En la siguiente pantalla, dale a tu snippet un nombre con el que puedas encontrarlo fácilmente. Hemos llamado al nuestro "Redirección de la página de inicio de sesión". A continuación, pega el siguiente código:

Asegúrese de cambiar https://sulliesflowers.com/login/ por la URL de su página de inicio de sesión personalizada. Ahora haga clic en Guardar fragmento.

Debería ver un mensaje de éxito una vez que su redirección se haya guardado y aplicado.

Por último, active la opción situada en la parte superior de la pantalla para que el fragmento quede activo.

¡Genial! Ahora los usuarios serán enviados a tu página personalizada cuando intenten iniciar sesión.

Opcional: Crear un formulario de restablecimiento de contraseña

Si aceptas registros de usuarios y permites que accedan a tu sitio web, te recomendamos encarecidamente que añadas también un formulario de restablecimiento de contraseña. Un formulario de restablecimiento permite a los usuarios recuperar su cuenta si han olvidado su contraseña o si sospechan que han sido pirateados.

La buena noticia es que el complemento WPFroms User Registration también le ofrece un formulario especial para restablecer la contraseña.

Vuelva a su panel de WordPress y haga clic en WPForms " Añadir nuevo. Esta vez, selecciona la plantilla User Password Reset Form.

Para obtener un tutorial completo sobre los formularios de restablecimiento de contraseña, consulte nuestra guía sobre la personalización del formulario de restablecimiento de contraseña en WordPress.

Y ya está. Ahora ya sabe cómo crear un formulario de inicio de sesión personalizado en WordPress. Puede utilizar esto como punto de partida para desarrollar la marca en su página de inicio de sesión.

A continuación, personalice su formulario de inscripción

A continuación, vea cómo crear un formulario de registro de usuario para su sitio. Hacer un formulario de registro personalizado es una gran manera de hacer que su sitio se vea más profesional.

También le puede interesar saber cómo evitar el restablecimiento no autorizado de contraseñas en WordPress.

Cree su formulario WordPress ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin más sencillo para crear formularios en WordPress. WPForms Pro incluye el complemento de registro de usuarios 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.