Hoy vamos a cambiar la pantalla de inicio de sesión de WordPress a su gusto, usando solo unos pocos códigos.
¿Por qué debería personalizar la pantalla de inicio de sesión de wordpress?
Hay varias razones por las que es recomendable cambiar la pantalla de inicio de sesión de su sitio web de WordPress, y las principales son estas:
- No tiene el logotipo de su marca, sino el logotipo de WordPress.
- El logotipo de WordPress se vincula a wordpress.org en lugar de a su sitio web.
- Carece de enlaces útiles personalizables.
- No puede elegir a qué página enviar a los usuarios después de iniciar sesión.
- Los colores son aburridos y no encajan con la imagen de su sitio web.
Pero el factor principal es que no está personalizado para que coincida con la apariencia y el diseño de la web, y es un toque de distinción que siempre se debe ofrecer, especialmente en los sitios de los clientes.
Procedimientos para agregar los códigos personalizazdos
En este caso utilizaremos varios códigos que deben ser agregados al archivo funtions.php ubicado en nuestra carpeta del tema ingresando a nuestro hosting, podemos seguir esta ruta predeterminada:
Cpanel > Administrador de archivos > Public_html > Dominio > wp-content > themes > tema utilizado > archivo functions.php
También se puede agregar con el complemento Code snippets, directamente en este complemento encontraremos una opción en nuestro wordpress en el escritorio que indica fragmento de código, en ella tendremos la opción de agregar un nuevo código.
Ya con estos conocimientos podemos comenzar a personalizar nuestro inicio de sesión.
Personalizar el logotipo de inicio de sesión de wordpress
Lo primero que hay que hacer sería cambiar el logo de inicio de sesión, para que en lugar del logo de WordPress se muestre nuestro logo o el logo de nuestro cliente.
El código a agregar sería el siguiente:
function webempresa_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(https://prueba18-cp5025.wordpresstemporal.com/prueba4/wp-content/uploads/2021/10/34Mesa-de-trabajo-18.png);
height:150px;
width:150px;
background-size: 150px 150px;
background-repeat: no-repeat;
padding-bottom: 10px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'webempresa_login_logo' );
Lo más importante del código es que se deben realizar algunos ajustes en él, no simplemente copiarlo y pegarlo:
- Cambia la background-imageURL por la de tu logo, preferiblemente en formato PNG con fondo transparente, para que se ajuste a cualquier fondo.
- Cambie los píxeles del parámetro height a la altura real de su imagen.
- Cambie los píxeles del parámetro width al ancho de su imagen.
- Cambie los píxeles del parámetro background-size a los tamaños definidos en height y width arriba.
- Cambie el parámetro padding-bottom a los píxeles que desee, simplemente agregue un espacio entre el logotipo y el cuadro de relleno de datos.
Un par de consejos más:
Por defecto, el tamaño reservado para el logotipo de la pantalla de inicio de sesión es cuadrado, 80 × 80 píxeles, por lo que si no especifica el alto y el ancho como indiqué arriba, su imagen se verá muy pequeña, adaptada al espacio disponible (background-size).
Trate de no hacer la imagen demasiado grande, de unos 300 píxeles de ancho como máximo, o el logotipo será demasiado grande en relación con el cuadro de entrada.
Para conocer la URL de tu logo, luego de subirlo a la pantalla de medios de la administración de WordPress, haz clic en la imagen y ahí tendrás un campo con la URL, para que lo copies y pegues en el fragmento de código.
WordPress es tan bueno que incluso te ofrece un botón para copiar la URL.
Una vez que se hayan guardado los cambios en nuestro fragmento de código o archivo functions.php, tendremos una pantalla de inicio de sesión mostrando ahora nuestro logo o imagen definida.
Personalice la url del logotipo de inicio de sesión de wordpress
Ahora que tenemos el logo a nuestro gusto vamos a cambiar la URL a la que enlaza, que como dije antes, por defecto te llevaría a WordPress.org, y normalmente lo lógico sería llevarte al frente página de nuestro sitio web, para ello podemos utilizar el siguiente código:
function webempresa_login_url() {
return 'URL_DEL_SITIO';
}
add_filter('login_headerurl', 'webempresa_login_url');
Como puede haber adivinado por el código, solo hay un cambio que realizar aquí. Exactamente la URL de ejemplo (URL_DEL_SITIO) por la que está en uso en su sitio.
Guardar cambios y listo.
Personalizar la URL del logotipo de inicio de sesión de wordpress
Como toque adicional de personalización al anterior también podemos agregar un texto emergente que se mostrará al pasar el cursor sobre nuestro nuevo logo, por ejemplo:
function webempresa_logo_texto() {
return 'Regresar al sitio web';
}
add_filter('login_headertitle', 'webempresa_logo_texto');
En este código solo tienes que cambiar el texto personalizado (Regresar al sitio web) por el que desees.
Agregar enlaces personalizados debajo del formulario de la pantalla de inicio de sesión de wordpress
Es posible que ya haya notado que, de forma predeterminada, WordPress muestra varios enlaces debajo del formulario en la pantalla de inicio de sesión:
- ¿Perdiste tu contraseña?
- Ir a tu nombre del sitio.
- Política de privacidad (si la ha creado y configurado correctamente en la configuración de WordPress)
Pero, ¿qué pasa si desea agregar sus propios enlaces personalizados en esa área? Bueno, para este caso en particular vamos a agregar un código personalizado donde incluiremos un enlace adicional.
function webempresa_url_personalizado_bot() { ?>
<p style="text-align: center; margin-top: 1em;">
<a style="color: #4da28f; text-decoration: none;" href="URL_A_CREARSE">Texto que va a contener el enlace →
</a>
</p>
<?php }
add_action('login_footer','webempresa_url_personalizado_bot');
Imagen de fondo personalizada en la pantalla de inicio de sesión
Otra personalización interesante que puede hacer es agregar una imagen de fondo personalizada en la pantalla de inicio de sesión de WordPress.
El código para agregar se vería así:
function webempresa_login_background() {
echo '<style type="text/css">
body.login{
background-image: url( "URL DE LA IMAGEN" )!important;
background-size: cover;
}
</style>';
}
add_action('login_head', 'webempresa_login_background');
En este caso la imagen se aplicará lo suficiente para ajustarse al ancho completo del sitio por lo que hay que seleccionar una imagen que sea lo suficientemente grande para que no se deje de visualizar en su parte inferior, lo recomendable es una proporción de 1920 x 1080 pixeles.
Color de fondo personalizado en la pantalla de inicio de sesión
Si prefiere algo menos radical que agregar una imagen de fondo, una muy buena opción sería personalizar el fondo de inicio de sesión de WordPress.
Se haría con un código como este:
function webempresa_color_fondo() {
echo '<style type="text/css">
body { background: #b6d5ed; }
.login form { background: #fcf499; }
</style>';
}
add_action('login_head','webempresa_color_fondo');
En este código simplemente agregamos dos colores de fondo, uno para el formulario y uno para el fondo es suficiente con cambiar login form para modificar el color del formulario así como body para modificar el del fondo.
Redirección personalizada después de iniciar sesión
Por defecto, cuando cualquier usuario accede desde la pantalla de inicio de sesión de WordPress se envía al área de administración del sitio web, pero ¿y si quieres que eso no funcione así?
Podríamos, como en este ejemplo, realizar un redireccionamiento condicional, en función del perfil del usuario que accede:
- Si el usuario tiene perfil de administrador (administrator) redirigirlo a la administración de WordPress.
- Si el usuario tiene otro perfil que no sea el de administrador, redirigirlo a la página principal del sitio web.
El código sería este:
function webempresa_login_redirect( $redirect_to, $request, $user ) {
if ( isset( $user->roles ) && is_array( $user->roles ) ) {
if( in_array('administrator', $user->roles)) {
return admin_url();
} else {
return site_url();
}
} else {
return site_url();
}
}
add_filter('login_redirect', 'webempresa_login_redirect', 10, 3);
Funciona como está, no tiene que modificar nada en este código, solo agregue algunos perfiles más (editor, author) al in_array, si desea que estos perfiles también sean redirigidos a la administración.