Saltar al contenido

La página de inicio de sesión de WordPress: ¿Cómo personalizarla?

15/06/2021

La página de inicio de sesión de WordPress es una página a través de la cual puede conectarse al back office de su sitio web, es decir, la parte de administración.

Una vez que haya iniciado sesión, puede acceder a su panel de control, crear nuevos artículos, nuevas páginas, actualizar sus temas, agregar nuevos plugins y mucho más. En este artículo, veremos en detalle qué es posible hacer …

 

1 / Cómo encontrar la URL de inicio de sesión de WordPress

Si es nuevo en WordPress y no tiene idea de cómo acceder a la parte de administración de su sitio o si sus clientes siempre olvidan su URL de inicio de sesión, aquí hay una pequeña explicación …

  • Caso # 1 => conectarse a un sitio clásico de WordPress:

    en un sitio típico de WordPress, todo lo que necesita hacer es agregar
    / login / o / admin / al final de la URL de su sitio en la barra de búsqueda de su navegador favorito. Por ejemplo: https://mysite.com/login/ o https://mysite.com/admin/

    Estas dos URL lo llevarán a su página de inicio de sesión donde puede ingresar su nombre de usuario y contraseña.
    Una vez que haya iniciado sesión, será redirigido directamente al área de administración de su sitio.
  • Caso n ° 2 => conexión a un sitio de WordPress instalado en un subdirectorio:

    si su sitio está instalado en una subcarpeta o subdirectorio, debe agregar
    / login / o /wp-login.php al final de la URL de su sitio. Por ejemplo: https://monsite.com/mon-repertoire/login/ o https://monsite.com/mon-repertoire/wp-login.php
  • Caso n ° 3 => conexión a un sitio de WordPress instalado en un subdominio:

    si su WordPress se instaló en un subdominio, la URL de su conexión debería verse así:
    my-sub-domain.monsite.com/login / o my-sub- domain.mysite.com/wp-login.php

Pequeño consejo:

si usted o su cliente no pueden recordar la URL de conexión, le recomiendo que cree una pestaña de favoritos desde las opciones de su navegador (marcador o barra de favoritos).
Por lo tanto, podrá acceder a la página de inicio de sesión de WordPress con solo un clic.

 

2 / Página de inicio de sesión de WordPress y seguridad

Ahora que sabe cómo iniciar sesión en su sitio de WordPress, hay una cosa que debe saber: ¡miles de hackers y malware también lo saben! No es necesario tener un Bac + 12 para comprender que todos los sitios de WordPress tienen la misma terminación de URL para conectarse al Back Office …

Solo tienes que intentar ver: toma la URL del blog de tu colega y agrega / wp-admin / al final. Qué esta pasando ? Ciertamente aterrizas en la página de inicio de sesión …

Imagínese si su identificador de conexión es «ADMIN», todo lo que queda es encontrar la contraseña. Ves lo que quiero decir ?

Se ha diseñado algún malware para intentar conectarse a su sitio utilizando las prácticas habituales que acabamos de comentar. Estos programas luego intentarán un montón de combinaciones de contraseñas en un tiempo récord, hasta que alcancen una conexión válida, esto se llama ataques de fuerza bruta .

Luego, se deben implementar algunas buenas prácticas tan pronto como se instale su sitio:

  • no use ADMIN como ID de conexión: asegúrese también de cambiar su apodo en la pestaña USUARIOS para que el nombre del autor de un artículo no sea el mismo que el del identificador de conexión.

    El ID de inicio de sesión debe ser diferente del nombre de usuario / autor para mostrar

  • no use una contraseña demasiado fácil: 4gH? y13lMm2Kp! Qdt98 debería hacer el truco 😉
  • modificar la URL de la página de inicio de sesión: para que nadie pueda acceder a su página de inicio de sesión en la dirección https://mysite.com/wp-admin/, simplemente tendrá que modificar esta URL. Por ejemplo, la URL https://mysite.com/coucou-c-moi/ sería menos común … Algunos plugins de seguridad ofrecen esto en sus opciones, si este no es el caso, el plugin WPS Hide Login es perfecto y muy rápido de configurar.

 

3 / ¿Cómo personalizar la página de inicio de sesión de WordPress manualmente?

Si es un desarrollador, ya sabe que hay muchas personalizaciones posibles en la página de inicio de sesión de WordPress, pero si recién está comenzando, aquí hay algunas personalizaciones fáciles:

3.1 / ¿Cómo agregar un fondo personalizado?

Por ejemplo, puse una foto de arena en el «fondo» de mi página de inicio de sesión.



Para eso, necesitaba
un tema hijo en el que creé una carpeta llamada «inicio de sesión» . Coloqué una imagen allí (en mi ejemplo es range.jpg ) y un archivo login-style.css en el que ingresé :

/ * cambiar la imagen de fondo de mi página de inicio de sesión de WordPres * /
body.login { 
 imagen de fondo: url (' rango.jpg ');
 repetición de fondo: no repetición; 
 archivo adjunto de fondo: fijo; 
 posición de fondo: centro; 
}

Luego, en el archivo functions.php de mi tema hijo, agregué estas pocas líneas que permitieron que mi tema hijo tomara en cuenta mi nueva hoja de estilo (la hoja de estilo del tema hijo no es compatible). Cuenta):

// tener en cuenta mi nueva hoja de estilo por mi tema hijo
function my_login_stylesheet () {
 wp_enqueue_style ('inicio de sesión personalizado', get_stylesheet_directory_uri (). ' /login/login-style.css ');
}
add_action ('login_enqueue_scripts', 'my_login_stylesheet');

Si usa estos códigos, asegúrese de modificar sus propios parámetros (en rojo).

3.2 / ¿Cómo reemplazar el logo de WordPress por un logo personalizado?

Aquí tendrás dos soluciones. Si ha cambiado la imagen de fondo de su página de inicio de sesión , todo lo que tiene que hacer es agregar su archivo de logotipo en la carpeta llamada «login» (logo.png por ejemplo), así como el siguiente código para colocarlo en el archivo llamado login -style.css creado un poco antes:

.login h1 a { 
 imagen de fondo: url (' logo.png ');
}

Si no necesita cambiar la imagen de fondo de su página de inicio de sesión y solo desea cambiar su logotipo , puede eliminar el paso 1 de este tutorial y seguir las recomendaciones del Codex de WordPress para el cambio. Logotipo, simplemente agregando las siguientes líneas al archivo functions.php de su tema hijo. Por lo tanto, esto le evita crear una carpeta llamada «login» , así como una hoja de estilo llamada login-style.css (mientras se asegura de colocar su archivo logo.png en la raíz de su tema hijo).

// cambia el logo en la página de inicio de sesión de WordPress
función my_login_logo () {?>
 <style type = "text / css">
 #login h1 a, .login h1 a {
 imagen de fondo: url (<? php echo get_stylesheet_directory_uri ();?> /logo.png );
 altura: 65px; 
ancho: 320px; 
tamaño de fondo: 120px 120px;
 repetición de fondo: no repetición;
 fondo acolchado: 60px;
 }
 </style>
<? php}
add_action ('login_enqueue_scripts', 'my_login_logo');

Asegúrese de cambiar los elementos indicados en rojo para que coincidan con sus necesidades y configuración.

3.3 / Personalizar la apariencia del formulario de inicio de sesión y otros elementos

De la misma manera, podrá personalizar todos los elementos presentes en la página de inicio de sesión de su sitio de WordPress. Para ayudarlo, aquí están las clases de CSS que pueden resultarle útiles:

body.login {}
body.login div # login {}
body.login div # login h1 {}
body.login div # login h1 a {}
body.login div # login form # loginform {}
body.login div # formulario de inicio de sesión # formulario de inicio de sesión p {}
body.login div # login form # loginform p label {}
body.login div # login form # loginform input {}
body.login div # login form # loginform input # user_login {}
body.login div # login form # loginform input # user_pass {}
body.login div # login form # loginform p.forgetmenot {}
body.login div # login form # loginform p.forgetmenot input # recuérdame {}
body.login div # formulario de inicio de sesión # formulario de inicio de sesión p.submit {}
body.login div # login form # loginform p.submit input # wp-submit {}
body.login div # login p # nav {}
body.login div # login p # nav a {}
body.login div # login p # backtoblog {}
body.login div # login p # backtoblog a {}

3.4 / Cambiar la URL del logo de conexión

De forma predeterminada, el logotipo apunta a WPFR, pero puede cambiarlo para que apunte a su propio sitio. Para hacer esto, agregue el siguiente código al archivo functions.php de su tema hijo:

// cambie la URL del logotipo de la página de inicio de sesión para que apunte a su sitio
function my_login_logo_url () {
return get_bloginfo ('url');
}
add_filter ('login_headerurl', 'my_login_logo_url');

function my_login_logo_url_title () {
devuelva 'Nombre e información de su sitio';
}
add_filter ('login_headertitle', 'my_login_logo_url_title');

 

4 / plugins para personalizar la página de inicio de sesión

Bueno, es cierto, el método manual es bueno … pero hay plugins que ofrecen funcionalidades mucho más avanzadas sin tener que meter las manos en el código … hice una pequeña selección para ti:

 

En conclusión…

Supongo que ahora la página de inicio de sesión de WordPress casi no tiene secretos para ti ^^

Ya sea que sea un principiante o un experto, ¡seguramente necesitará personalizar esta página un día u otro! Además, si su sitio está diseñado para albergar a los usuarios que inician sesión con regularidad, la personalización de su página de inicio de sesión vale la pena: le permitirá diferenciarse de su competencia.

Tenga cuidado, tan pronto como modifique el código en WordPress, incluso si es un tema hijo, es preferible probar en una versión local de su sitio