Cómo crear una página de inicio de sesión personalizada en WordPress (5 formas sencillas)

¿Busca una solución para crear una página de inicio de sesión personalizada en WordPress?

Si permite que la gente se registre en su sitio, personalizar la página de inicio de sesión le permite mejorar la imagen de marca de su sitio y crear una experiencia más fácil de usar para sus usuarios. Podrás añadir tu propio logotipo, cambiar la URL, personalizar los colores, añadir más contenido, ofrecer inicio de sesión social y mucho más.

En esta guía para principiantes, compartiremos cinco métodos diferentes que puede utilizar para crear una página de inicio de sesión personalizada en WordPress.

Puede elegir el método que mejor se adapte a sus necesidades, presupuesto y nivel de conocimientos.

Cinco métodos para crear una página de inicio de sesión personalizada en WordPress

Estos son los cinco métodos que vamos a tratar:

1. Personalización de la página de inicio de sesión nativa con un plugin gratuito
2. Uso de Elementor para diseñar una página de inicio de sesión personalizada con una interfaz visual de arrastrar y soltar.
3. Utilizando un Plugin de registro de WordPress
4. Utilizar un plugin de formularios de WordPress normal
5. Añadir fragmentos de código propios

Método 1: Personalizar la página de inicio de sesión nativa de WordPress con un plugin

Por defecto, el página de inicio de sesión nativa de WordPress se encuentra en yoursite.com/wp-login.php y tiene este aspecto:

Si estás de acuerdo con este comportamiento pero quieres personalizar esta página por defecto, puedes encontrar muchos plugins gratuitos que te lo permiten:

• Cambie el logotipo de WordPress por su propio logotipo.
• Cambia los tipos de letra.
• Personalizar todos los colores de los formularios y botones
• Añade un color de fondo personalizado.

Su página de acceso seguirá estando en yoursite.com/wp-login.phppero puede hacer que coincida con el resto de la marca de su sitio. Como ventaja añadida, los cambios que realice también se aplicarán a la página de registro nativa de WordPress.

Utilizaremos el Plugin LoginPress para este tutorial ya que es una de las opciones más populares y te da mucho control.

Para empezar, instale y active el plugin gratuito de WordPress.org.

A continuación, abra el Personalizador de WordPress yendo a LoginPress → Personalizador.

En la configuración del Personalizador, seleccione la opción LoginPrensa opción. Esta es la interfaz normal del Personalizador de WordPress (donde se personalizan la mayoría de los temas, incluidos Astra), con la única diferencia de que verá una vista previa de su página de inicio de sesión en lugar de su tema habitual de WordPress.

Ahora puedes utilizar las numerosas opciones del Personalizador para ajustar tu formulario de inicio de sesión. A medida que realices cambios, los verás reflejados al instante en la vista previa en vivo de tu formulario de inicio de sesión:

Asegúrese de guardar los cambios cuando esté satisfecho con el aspecto de su página de inicio de sesión. A continuación, debería ver los cambios reflejados de inmediato cuando visite la página de inicio de sesión predeterminada.

Método 2: Diseñar una página de inicio de sesión personalizada con Elementor + Ultimate Addons for Elementor

¿Quieres liberarte del formulario de inicio de sesión nativo de WordPress y crear una página de inicio de sesión realmente personalizada? Utilice el popular Plugin constructor de páginas Elementor y el widget de inicio de sesión en Ultimate Addons for Elementor extensión.

Si no está familiarizado con Elementor, le permite crear sus propios diseños personalizados mediante una interfaz visual de arrastrar y soltar.

El plugin gratuito Elementor no incluye un widget de inicio de sesión, pero puedes añadir un widget flexible utilizando Ultimate Addons for Elementor. Viene con más de 50 widgets para mejorar tus diseños Elementor.

Algunas de las ventajas de este enfoque:

• Tendrá 100% control sobre el diseño de toda su página de inicio de sesión gracias a la interfaz visual de arrastrar y soltar de Elementor. También puede añadir fácilmente contenido personalizado más allá de su formulario de inicio de sesión, ayudándole a proporcionar información útil o a crear una mejor imagen de marca.
• Puede añadir el inicio de sesión social de Facebook y/o Google a su formulario, lo que reduce la fricción y es algo que prefieren muchos usuarios.
• Podrá configurar redireccionamientos personalizados después de que los usuarios inicien sesión y ajustar el comportamiento de inicio de sesión.

Para empezar, instale plugin gratuito de Elementor de WordPress.org y el Complemento Ultimate Addons para Elementor.

A continuación, cree una nueva página de WordPress (Páginas → Añadir nuevo) y pulse el botón Editar con Elementor para abrir la interfaz Elementor

Para empezar, puede utilizar los widgets habituales de Elementor para controlar el diseño básico de su página de inicio de sesión.

Por ejemplo, puede añadir títulos, texto explicativo y otros elementos. Consulta nuestro tutorial sobre el Elementor si no estás seguro de cómo utilizarlo.

Cuando esté listo para añadir el formulario de inicio de sesión, arrastre sobre el icono Formulario de acceso widget de Ultimate Addons for Elementor (EAU):

A continuación, abra la configuración del widget para controlar el comportamiento y el estilo del formulario de inicio de sesión.

Estas son algunas de las cosas que puedes hacer con los ajustes:

En el Inicio de sesión social puede activar el inicio de sesión social de Google y/o Facebook. Hacerlo requerirá algunos pasos de autorización adicionales con esos servicios:

• Instrucciones de configuración de Google
• Instrucciones de configuración de Facebook

En Opciones adicionales le permiten configurar redireccionamientos personalizados después de que un usuario inicie o cierre sesión. También puedes personalizar la función de restablecimiento de contraseña.

En Estilo y Avanzado le dan mucho control sobre el aspecto de su formulario de acceso.

Merece la pena explorar todas las opciones, ya que podrías encontrar algo más útil para tu situación.

Una vez que haya terminado, publique la página. Tu formulario de acceso estará ahora activo en la URL de la página de WordPress. Puedes editar la URL de la página para cambiar la URL de inicio de sesión según sea necesario.

Bono - Ultimate Addons for Elementor también puede ayudarle a crear formularios de registro personalizados para su sitio web con la herramienta Formulario de registro de usuario widget.

Podrá personalizar los campos de su formulario de registro, añadir acciones posteriores al registro, dar estilo a su formulario y mucho más. ¿Le interesa? Aprenda cómo crear un formulario de registro personalizado en WordPress con Elementor.

Método 3: Utilizar un plugin de registro de WordPress para crear una página de inicio de sesión

Si desea tener un mayor control sobre todo el proceso de registro e inicio de sesión de su sitio de WordPress, puede que le convenga más un plugin de registro dedicado de WordPress.

La principal ventaja de este método es que también le permite crear una página de registro personalizada (con campos personalizados) además de un formulario de inicio de sesión personalizado. También puede permitir a los usuarios gestionar sus perfiles desde el front-end de su sitio.

Sin embargo, es excesivo si sólo desea personalizar sólo el formulario de acceso. Es posible que desee elegir un método diferente si ese es su único objetivo.

Para una solución completa de registro e inicio de sesión en WordPress, puede utilizar la aplicación gratuita Plugin de creación de perfiles en WordPress.org.

Una vez que instale y active el plugin gratuito de WordPress.org, podrá añadir un formulario de inicio de sesión personalizado en cualquier lugar de su sitio mediante la función [wppb-login] o el shortcode Widget de inicio de sesión de Profile Builder:

También puede personalizar su formulario de inscripción accediendo a Generador de perfiles → Campos de formulario y puede añadir su formulario de registro en el front-end utilizando la función [wppb-register] código corto.

Método 4: Página de inicio de sesión personalizada de WordPress con el plugin de formularios (WPForms)

Muchos plugins de formularios de WordPress tienen funciones que le ayudarán a crear un formulario de inicio de sesión personalizado, aunque normalmente necesitará la versión premium de las opciones más populares.

Esta puede ser una buena opción si ya estás utilizando el plugin en tu sitio, pero probablemente no quieras comprar un plugin de formularios sólo para la función de inicio de sesión.

En este tutorial, nos centraremos en WPForms. Otros plugins de formularios populares como Gravity Forms y Ninja Forms también ofrecen esta función.

Para utilizar WPForms para crear una página de inicio de sesión personalizada en WordPress, necesitará el complemento Registro de usuarios, que sólo está disponible en la versión $199 Pro licencia.

Para empezar, necesitará instalar tanto el plugin principal WPForms como el complemento Registro de usuarios.

A continuación, vaya a WPForms → Añadir nuevo y elija el Formulario de inicio de sesión de usuario plantilla:

Puede utilizar la interfaz del creador de formularios para realizar algunas personalizaciones adicionales. Algunas personalizaciones que puede hacer incluyen:

• Añadir un enlace para restablecer la contraseña utilizar la etiqueta inteligente de contraseña perdida - {url_lost_password}
• Configure una redirección personalizada después de que un usuario inicie sesión yendo a Ajustes → Confirmaciones
• Active la protección antispam accediendo a Ajustes → General

Puede añadir su formulario de acceso personalizado en cualquier lugar de su sitio utilizando los siguientes métodos:

• El bloque WPForms dedicado.
• El shortcode WPForms para su formulario.
• Su favorito plugin constructor de páginas. Por ejemplo, puede utilizar el styler WPForms en Ultimate Addons for Elementor o en Ultimate Addons for Beaver Builder para tener más control sobre el diseño de su formulario.

Método 5: Página de inicio de sesión personalizada de WordPress con código

Si eres un usuario avanzado que al menos se siente cómodo trabajando con PHP, HTML y CSS, también puedes personalizar la página de inicio de sesión de WordPress sin necesidad de un plugin de terceros.

No recomendamos este método para usuarios ocasionales.. Pero si te sientes cómodo trabajando con código, aquí tienes algunos de los retoques que puedes hacer.

Deberá añadir estos fragmentos de código al archivo funciones.php de un tema infantil o a través de un plugin como Fragmentos de código.

Cambiar el logotipo de inicio de sesión:

function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
		height:65px;
		width:320px;
		background-size: 320px 65px;
		background-repeat: no-repeat;
        	padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

Cambie la URL a la que enlaza el logotipo:

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
 
function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

También hay varios ganchos que puede utilizar para añadir contenido personalizado, mensajes y etiquetas a su página de inicio de sesión. Puede consulte esta entrada del Códice para más detalles.

Reflexiones finales

Si permite que otros usuarios se registren en su sitio, la creación de una página de inicio de sesión personalizada ayuda a mejorar la imagen de marca de su sitio y a crear un proceso de inicio de sesión más fácil de usar.

En este post, hemos compartido cinco métodos diferentes que puede utilizar para personalizar la página de inicio de sesión de WordPress.

Para ajustes sencillos, puede mantener la página de inicio de sesión nativa de WordPress y simplemente actualizarla con su propia marca utilizando un plugin gratuito como LoginPress.

O, para una solución más flexible y fácil de usar, puede utilizar Elementor y Ultimate Addons for Elementor. Le ayudan a crear una página totalmente personalizada utilizando la interfaz visual de arrastrar y soltar de Elementor, con inicio de sesión social, redireccionamientos personalizados y mucho más.

Dependiendo de tus necesidades y nivel de conocimientos, también existen otras soluciones, como utilizar tu propio código.

¿Todavía tienes alguna pregunta sobre cómo personalizar la página de inicio de sesión de WordPress? ¡Háznoslo saber en la sección de comentarios!