Avisos
Vaciar todo

[Resuelto] Poner width y height explícitos en el logo

13 Respuestas
4 Usuarios
0 Reactions
46 Visitas
Mª Ángeles
Respuestas: 217
Estimable Member
Topic starter
 

Hola,

Estoy intentando optimizar el CLS con los resultados de Page Speed, y resulta que tengo un problema con el logo. Me indica que el logo que aparece al inicio de la web, en el lado izquierdo (en el encabezado) no tienen width y height explícitos.

La imagen del logo la he subido a través de la biblioteca de medios de Wordpress.

Por favor, qué código de CSS podría introducir para acabar con este problema. Como siempre, confío plenamente en vosotros…;).

Un saludo.

Contenido solo visible a usuarios registrados


 
Respondido : 25/11/2021 11:26 am
Mª Ángeles
Respuestas: 217
Estimable Member
Topic starter
 

Acabo de ver este código para functions.php, ¿puede servir?:

// Add support for custom header
add_theme_support( 'custom-header', array(
 'width' => 540,
 'height' => 160,
 'header-selector' => '.site-title a',
 'header-text' => false,
 'flex-height' => false,
) );

 

Ya que mi theme indica: Tu tema funciona mejor con una imagen con tamaño de cabecera de 540 × 160 pixels — podrás recortar tu imagen una vez la subas para un ajuste perfecto.


 
Respondido : 25/11/2021 11:37 am
Karen Rios
Respuestas: 18667
Illustrious Member Moderator
 

Hola Ma Angeles, 

No estoy segura de que este código funcione en tu tema, puedes probar y revisarlo. De igual forma puedes verificar el siguiente código 

add_filter( 'generate_mobile_header_logo_output', function( $output ) {
if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
return $output;
}

$settings = wp_parse_args(
get_option( 'generate_menu_plus_settings', array() ),
generate_menu_plus_get_defaults()
);

return sprintf(
'<div class="site-logo mobile-header-logo">
<a href="%1$s" title="%2$s" rel="home">
<img src="%3$s" width="590" height="60" alt="%4$s" />
</a>
</div>',
esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
esc_url( apply_filters( 'generate_mobile_header_logo', $settings['mobile_header_logo'] ) ),
esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
);
} ); Tienes que editar tienes que editar esta línea <img src="%3$s" width="590" height="60" alt="%4$s" /> para agregar los atributos de ancho y alto que necesitas. 

Puedes revisar esto en la documentación oficial de tu tema -> Contenido solo visible a usuarios registrados

Comprueba esto y nos comentas

Un Saludo 

 

 


 
Respondido : 25/11/2021 12:42 pm
Mª Ángeles
Respuestas: 217
Estimable Member
Topic starter
 

Hola Karen,

Gracias por responder. Acabo de aplicar el código que me has dado, pero al revisar con la Herramienta de desarrolladores de Google Chrome parece que no se ha aplicado este cambio, y que sigue igual.

Por fa, alguna sugerencia?


 
Respondido : 25/11/2021 6:06 pm
Mª Ángeles
Respuestas: 217
Estimable Member
Topic starter
 

Por cierto, aclarar, que mi theme es de Génesis (StudioPress) 


 
Respondido : 25/11/2021 6:16 pm
Bruno
Respuestas: 6479
Illustrious Member Moderator
 

Que tal Mª Ángeles, 

El problema radica es que tu logo esta siendo tomado como un fondo y no como una imagen independiente, necesitamos definirle un ancho y un alto por lo que vamos a probar con el siguiente CSS

image
.header-image .site-title a {
height: 0 !important;
padding-top: 20% !important;
}

Nos comentas si te funciona, Saludos!


 
Respondido : 25/11/2021 6:46 pm
Mª Ángeles
Respuestas: 217
Estimable Member
Topic starter
 

Hola Bruno, 

Disculpa, acabo de encontrar un código de CSS en el foro de Studiopress que parece que funciona según Page Speed, pero no sé si el tuyo puede ser mejor por lo que comentas de la foto. Es el siguiente:

.site-header .custom-logo-link .custom-logo {
height: 240px;
width: 160px;
}

¿Qué opinas?


 
Respondido : 25/11/2021 7:29 pm
Bruno
Respuestas: 6479
Illustrious Member Moderator
 

Hola Mª Ángeles, 

Pues el principio es el mismo solo que debes colocarle los !important para que lo tome, en el caso sugerido coloque la proporción con padding ya que tal como que comente el logo no es tomado como una imagen sino como un fondo y el fondo necesita espacio para mostrarse.

Prueba ambos casos y ya nos cuentas cual te funciono.

Saludos!


 
Respondido : 25/11/2021 7:33 pm
Mª Ángeles
Respuestas: 217
Estimable Member
Topic starter
 

Hola Bruno!, 

Sí, tienes toda la razón, mucho mejor el tuyo, con diferencia. Ya lo tengo aplicado. Lo que pasa que al revisar el PageSpeed no sé porqué ha dejado de medirse el LCP y el FID en móviles. Adjunto imagen.

Métricas PageSpeed

 


 
Respondido : 26/11/2021 10:25 am
Mª Ángeles
Respuestas: 217
Estimable Member
Topic starter
 

Un momento, en las métricas de ordenador de PageSpeed de "esta url" tampoco hay datos, en el resto sí. Adjunto imagen.

Métricas ordenador

 


 
Respondido : 26/11/2021 10:30 am
Pepe
 Pepe
Respuestas: 41115
Illustrious Member Admin
 

Hola Mª Angeles.

Puede haber sido algo puntual o del propio navegador que estes utilizando.

Veo que si se muestran los datos:

screenshot pagespeed.web.dev 2021.11.26 11 42 24

 

Un saludo


 
Respondido : 26/11/2021 10:44 am
Mª Ángeles
Respuestas: 217
Estimable Member
Topic starter
 

Hola Pepe.

Gracias por contestar, sí ahora aparecen. Como dices para ser algo puntual, y también de navegadores, porque cada uno arroja unos datos distintos. Muchas gracias a todos.

Un saludo.


 
Respondido : 26/11/2021 11:23 am
Pepe
 Pepe
Respuestas: 41115
Illustrious Member Admin
 

Hola Mª Angeles.

Nada, Gracias a ti 😀 

Cualquier consulta que tengas no dudes en comunicarlo 😉 

 

Cerramos el tema.

Un saludo


 
Respondido : 26/11/2021 11:37 am