Personalizar la página de inicio de sesión de WordPress: la guía definitiva

¿Estás cansado de ver la misma página de inicio de sesión de WordPress una y otra vez? Si tiene un sitio web normal, sus visitantes no ven la página de inicio de sesión. Pero si tiene un sitio de membresía o una tienda en línea, verán la página de inicio de sesión predeterminada de WordPress, lo cual es una mala experiencia de usuario. Así que decidí escribir una guía fácil sobre cómo personalizar la página de inicio de sesión de WordPress. Esta es una guía completa que puedes seguir fácilmente.

Lo que vas a aprender hoy:

Hay plugins que puedes utilizar para personalizar el diseño/diseño de la página de inicio de sesión de tu sitio web. Aquí, en este artículo, voy a hablar de dos de ellos y le mostraré cómo personalizar la página de inicio de sesión con esos dos. Además, finalmente, le mostraré cómo cambiar el logotipo de WordPress de la página de inicio de sesión a su propio logotipo de forma manual. Sin usar ningún complemento de terceros.

Bien, vamos a sumergirnos.

Personaliza la página de inicio de sesión de WordPress con LoginPress

LoginPress es un plugin gratuito que puedes descargar desde el repositorio de plugins de WordPress. Existe una versión pro pero la versión gratuita es más que suficiente para lo que vamos a hacer hoy.

Dirígete a la Dashboard > Plugins > Añadir Nuevo y búsqueda de Iniciar sesiónPrensa . Una vez que lo hayas encontrado, haz clic en Instalar ahora y activarlo.

Tras la activación, el complemento agregará un nuevo elemento de menú ' Iniciar sesiónPrensa ' al panel de control. Solo tienes que hacer clic en el botón Iniciar sesiónPresione > Configuración para establecer la configuración básica del complemento.

Iniciar sesiónConfiguración básica de la prensa

En la página de configuración, puede configurar algunas cosas básicas como la opción mostrar/ocultar para recordarme, la hora de vencimiento de la sesión, el campo de contraseña personalizada en el campo de registro, etc. (Normalmente muestra solo el nombre de usuario y el campo de correo electrónico en la página de registro).

Marca tu página de inicio de sesión de WordPress

Una vez que haya terminado con la configuración básica, pasemos a diseñar la página de inicio de sesión. Haga clic en el enlace Personalizador y se abrirá el Personalizador de WordPress. Sí, la configuración de estilo de LoginPress está dentro del Personalizador de WP.

Como puede ver arriba, el complemento ofrece muchas opciones para personalizar nuestra página de inicio de sesión.

• Logotipo : Aquí puede agregar un logotipo personalizado y cambiar el tamaño, el enlace, etc.
• Fondo: Puede cambiar la imagen de fondo y la configuración relacionada aquí. Además, si lo desea, también puede usar un video como fondo.
• Personalizar el formulario de inicio de sesión: En esta sección, puede jugar con la apariencia del formulario de inicio de sesión.
• Personalizar el formulario de olvido: Aquí puede agregar un color de fondo o una imagen para el formulario de olvido de contraseña.
• Recaptcha: Puedes añadir Recaptcha aquí, pero necesitas la versión de pago del plugin.
• Belleza del botón: Cambie el estilo del botón de inicio de sesión aquí.

Hay algunas configuraciones más con las que puedes jugar. Al final, tendrá una página de inicio de sesión de marca que es mejor para la experiencia del usuario. Por lo tanto, sus clientes o lectores nunca volverán a ver esa página de inicio de sesión básica y predeterminada de WordPress.

Así es como puede personalizar la página de inicio de sesión con LoginPress. Vamos a comprobar el otro plugin de la lista.

Cómo personalizar la página de inicio de sesión de WordPress con el plugin Theme My Login

Tema Mi inicio de sesión es otro gran plugin que puedes encontrar en el repositorio de plugins de WordPress. Solo tienes que ir a Plugins > Añadir Nuevo y búsqueda de Tema Mi inicio de sesión .

Instálalo y actívalo. Una vez que hayas activado el plugin, verás el elemento de menú recién añadido Tema Mi inicio de sesión en el panel de control.

Este complemento es diferente de lo que discutimos anteriormente. En lugar de diseñar la pantalla de inicio de sesión predeterminada de WordPress Tema Mi inicio de sesión El complemento crea URL personalizadas para su página de inicio de sesión, página de cierre de sesión, página de registro, página de olvidé mi contraseña y página de restablecimiento de contraseña. Como puede ver en la siguiente captura de pantalla www.yourtheme.com/wp-admin ya no es su página de inicio de sesión. Este plugin lo cambia a www.yourtheme.com/login. Puedes cambiar esto por algo único que le dará otra capa de seguridad a tu sitio de WordPress.

Adicionalmente Tema Mi inicio de sesión Le permite crear páginas personalizadas y agregar los formularios correspondientes a las páginas creadas. De esa manera, puede tener un inicio de sesión único y personalizado, registrar páginas para su sitio web. Profundicemos y veamos cómo hacerlo.

Dirígete a Páginas > Agregar Nuevo . Crea una nueva página y publícala. A continuación, agregue un nuevo Bloque de código corto en la página y pegue el siguiente código abreviado dentro.

[tema-mi-login]

A continuación, copie el archivo URL-slug del Enlace permanente meta en el lado derecho. Necesitamos pegar este slug en Tema Mi inicio de sesión página de configuración como lo he hecho a continuación (verifique la captura de pantalla).

Así que ahora, la página recién creada es su página de inicio de sesión. Como es solo una página normal de WordPress, puede diseñarla de la manera que desee. Sin limitación. Avanza y diseña la página para que coincida con la marca de tu empresa.

Puede hacer lo mismo con otras páginas como registrarse, olvidar contraseña, restablecer contraseña, etc. A continuación se muestran los códigos cortos a usar.

• Formulario de inscripción : [theme-my-login action="registrarse"]
• Página de contraseña perdida : [theme-my-login action="lostpassword"]
• Página de restablecimiento de contraseña: [theme-my-login action="resetpass"]

No olvide actualizar los slugs en el archivo Configuración del tema Mi plugin después de crear sus nuevas páginas de inicio de sesión.

Así es como puedes personalizar la página de inicio de sesión de WordPress de forma sencilla. Usando algunos plugins de terceros. Pero hay otra forma que será un poco más difícil para una persona que no es experta en tecnología. Podemos cambiar el logotipo de la página de inicio de sesión y la URL simplemente agregando algo de PHP al archivo functions.php. Veamos cómo hacerlo.

Cambiar el logotipo y la URL de inicio de sesión de WordPress manualmente (para usuarios avanzados)

Si te gusta mantener el mínimo número posible de plugins instalados, como yo, entonces esta es una buena opción para ti. Podemos cambiar el logotipo de inicio de sesión y la URL manualmente agregando algunos fragmentos de PHP al archivo functions.php del tema y evitar agregar otro complemento a nuestro sitio web.

Paso uno: Agregue el logotipo a la biblioteca de medios

Continúe y cargue el archivo de su logotipo en la biblioteca de medios y copie la URL del archivo.

Paso dos: Reemplace el logotipo con PHP

Vete a Apariencia > Editor de temas y seleccione la opción functions.php de tu tema.

Importante: Siempre es una buena práctica utilizar el tema hijo al crear un sitio web de WordPress.

Desplácese hacia abajo hasta la parte inferior del archivo functions.php y pegue el siguiente código PHP dentro.

función my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            imagen de fondo: url(http:yourwebsite.com/my_logo.png);
		altura:65px;
		ancho: 320px;
		tamaño de fondo: 320px 65px;
		background-repeat: sin repetición;
        	fondo de relleno: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo'); 

Ahora actualice el archivo URL de la imagen de fondo a la URL del logotipo que cargó en el primer paso. Juega con la configuración de ancho y alto de CSS para que coincida con el ancho y la altura de tu logotipo.

Así que eso actualizará el logotipo predeterminado de WordPress que puede ver en la página wp-admin. Pero como ya sabes, ese logotipo está vinculado a la wordpress.org sitio web. Con otro simple fragmento de PHP, puedes cambiar esa URL para que apunte a la página de inicio de tu sitio web.

función my_login_logo_url() {
    devolver home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url');

función my_login_logo_url_title() {
    devuelve 'Nombre e información de tu sitio';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title ); 

Cambiar ' El nombre y la información de tu sitio ' al nombre de su sitio web y actualice el archivo functions.php. Ahora vaya a la página de inicio de sesión de wp-admin y verá que el logotipo está actualizado. Intente hacer clic en el logotipo. Debería redirigirte a la página de inicio.

Eso es todo. Así es como puedes personalizar la página de inicio de sesión de WordPress para que sea única, más personal.