Avisos
Vaciar todo

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

 
M¬™ √Āngeles
 M¬™ √Āngeles
Usuario eminente

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
 M¬™ √Āngeles
Usuario eminente

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

Cursos Gratuitos WordPress

Karen Rios
 Karen Rios
Soporte CMS Webempresa 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
 M¬™ √Āngeles
Usuario eminente

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

wpdoctor-revisa-la-salud-de-tu-wordpress

M¬™ √Āngeles
 M¬™ √Āngeles
Usuario eminente

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

Respondido : 25/11/2021 6:16 pm
Bruno
 Bruno
Soporte CMS Webempresa 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

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

M¬™ √Āngeles
 M¬™ √Āngeles
Usuario eminente

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
 Bruno
Soporte CMS Webempresa 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

Gestor de Contrase√Īas - VPN Conexi√≥n Segura - Gestor 2FA (Segundo Factor de Autenticaci√≥n

M¬™ √Āngeles
 M¬™ √Āngeles
Usuario eminente

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
 M¬™ √Āngeles
Usuario eminente

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

Cursos Gratuitos WordPress

Pepe
 Pepe
Soporte CMS Webempresa 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
 M¬™ √Āngeles
Usuario eminente

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

wpdoctor-revisa-la-salud-de-tu-wordpress

Pepe
 Pepe
Soporte CMS Webempresa 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