Está claro que contar con una buena imagen corporativa refuerza nuestra marca y hace que la percepción de clientes y usuarios hacia nosotros sea más robusta y profesional. Por eso no hay que dejar escapar la oportunidad de dotar de nuestra personalidad a cada uno de los elementos que nos pertenecen, producimos o simplemente, estamos relacionados. Uno de estos elementos al que solemos olvidar y que siempre parece poco profesional al verse el logotipo de la empresa a la que pertenece en sí es el login de WordPress. Al entrar aparece el logo del CMS, con sus colores corporativos y demás. Eso da una sensación de poco detallismo. ¿Es posible cambiar esto? La respuesta es sí y en este artículo te indicamos cómo hacerlo.
El nuevo filtro logo_headertext introducido en WordPress 5.2
Una de las nuevas características que más pasó desapercibida en WordPress 5.2 fue la adición de un nuevo filtro que nos ayuda a modificar el logo que aparece en la pantalla de login del backoffice de WordPress que, por si no recuerdas, es el del propio WordPress.
Es decir, si abres el fichero wp-login.php del directorio raíz de tu proyecto, verás cómo se utiliza el nuevo filtro. Este es el código en el que aparece:
$login_header_text = apply_filters( 'login_headertext', $login_header_text );
Añadir un logo personalizado mediante el nuevo filtro
Ya que hemos visto como en esta nueva versión de WordPress se utiliza el filtro para modificar el logo de la pantalla de login, vamos a proceder a modificarlo. Para ello, abre el fichero functions.php del tema que estés utilizando actualmente en WordPress e introduce este código al final.
function cambiar_login_logo( $login_header_text ) {
$logo_url = 'LA_URL_DE_TU_LOGO_AQUI';
$login_header_text = ''; .
$login_header_text = '<img src="' . $logo_url . '" alt="' . get_bloginfo( 'title' ) . '" />';
return $login_header_text;
}
// Si la versión de WP es igual o mayor a la 5.2...
if ( 5.2 >= get_bloginfo( 'version' ) ) {
add_filter( 'login_headertext', 'cambiar_login_logo' );
}Ni que decir tiene que debes modificar el texto LA_URL_DE_TU_LOGO_AQUI por la URL de tu logo en el código.
Ahora vamos a eliminar los estilos CSS que WordPress aplica al logo por defecto. WordPress sabe que ahí se va a mostrar el logo de WordPress (valga la redundancia) por eso cuenta con reglas CSS que se adecúan perfectamente a sus dimensiones. Pero claro, nuestro logo es posible que cuente con unas dimensiones bien distintas. Por eso, hay que modificarlos.
Añade esto en el fichero functions.php del tema que estés utilizando actualmente:
function cambiar_estilos_login_logo() { ?>
<style type="text/css">
#login h1 a,
.login h1 a {
background-size: auto;
background-image: none;
background-position: center center;
text-indent: 0;
width: auto;
height: auto;
max-width: 320px; //el ancho en px de tu logo
}
#login h1 a img,
.login h1 a img {
max-width: 100%;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'cambiar_estilos_login_logo');¿Y si gestionamos esto con el Personalizador de WordPress?
El anterior código para reemplazar el logo de WordPress por nuestro logo en la pantalla de WordPress está muy bien, pero peca de estático. Si alguna vez quisiéramos modificar el logo, tendríamos que editar otra vez el código del archivo functions.php y eso puede ser delicado.
Lo ideal es que podamos modificar el logo de la pantalla de login desde el Personalizador de WordPress.
Este código sustituye al primer código del artículo:
function cambiar_login_logo( $login_header_text ) {
$login_header_text = $login_header_text;
if ( '' != get_theme_mod( 'logo_login' ) ) {
$login_header_text = '';
$logo_url = get_theme_mod( 'logo_login' );
$login_header_text = '<img src="' . $logo_url . '" alt="' . get_bloginfo( 'title' ) . '" />';
}
return $login_header_text;
}
// Si la versión de WP es igual o mayor a la 5.2...
if ( 5.2 >= get_bloginfo( 'version' ) ) {
add_filter( 'login_headertext', 'cambiar_login_logo' );
}Mediante este código contaremos con una sección en el Personalizador de WordPress en la que podremos subir el logo que nos de la gana para que se miestre en el login de la plataforma. Un lujo, ¿verdad?
Modificar colores también con el Personalizador
Ahora que hemos sentido en nuestras carnes el poder del Personalizador de WordPress, ¿qué tal si lo extendemos a otros ámbitos como los colores de diversos elementos de la página de login?
En este caso vamos a modificar el color de los enlaces. Para ello debes agregar este código en el segundo código que he puesto en este artículo (sí, el que modificaba el CSS del logo).
body.login a,
body.login a:visited,
body.login a:focus,
body.login a:active,
body.login #backtoblog a,
body.login #nav a {
color: <?php echo get_theme_mod( 'login_link_color' ); ?>;
}
body.login #backtoblog a:hover,
body.login #nav a:hover,
body.login h1 a:hover,
body.login #backtoblog a:focus,
body.login #nav a:focus,
body.login h1 a:focus {
color: <?php echo get_theme_mod( 'login_link_hover_color' ); ?>;
}Ahora, vamos a modificar la apariencia de los botones que aparecen en pantalla. Huelga decir que he hecho que los botones sean full-width. Si no te gusta, recuerda modificar el porcentaje del atributo width del código. Ojo, este código va donde iba el anterior.
body.login.wp-core-ui .button-primary { background-color: <?php echo get_theme_mod( 'login_button_color' ); ?>; border-color: <?php echo get_theme_mod( 'login_button_color' ); ?>; box-shadow: none; text-shadow: none; color: <?php echo get_theme_mod( 'login_button_text_color' ); ?>; width: 100%; margin-top: 16px; padding: 6px 12px 6px 12px; height: auto; font-size: 16px;}body.login.wp-core-ui .button-primary:hover { background-color: <?php echo get_theme_mod( 'login_button_hover_color' ); ?>; border-color: <?php echo get_theme_mod( 'login_button_hover_color' ); ?>; box-shadow: none; text-shadow: none; color: <?php echo get_theme_mod( 'login_button_hover_text_color' ); ?>;}Y hasta aquí nuestro artículo sobre cómo personalizar la pantalla de login de WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. ¡Nos leemos!
