En WordPress, es común querer personalizar el aspecto de ciertas partes de tu sitio, como el header navbar, dependiendo de la página en la que te encuentres. Afortunadamente, WordPress hace esto fácil al agregar clases CSS específicas al elemento body para cada tipo de página.
Estilos CSS en el Home
Cuando deseas aplicar estilos CSS solo en la página de inicio (home), puedes hacerlo utilizando la clase .home que WordPress agrega al body. Aquí está cómo puedes hacerlo:
body.home .tu-header-navbar {
/* Estilos personalizados aquí */
}Reemplaza .tu-header-navbar con la clase específica de tu navbar en WordPress y añade los estilos que desees aplicar en la página de inicio.
Estilos CSS fuera del Home
Si deseas aplicar estilos CSS en todas las páginas, excepto en la página de inicio, puedes usar la pseudo-clase :not() junto con la clase .home. Esto se ve así:
body:not(.home) .tu-header-navbar {
/* Estilos personalizados aquí */
}Esto asegura que los estilos se apliquen en todas las páginas, excepto en la página de inicio.
Aplicación en Otras Páginas
La misma técnica se puede aplicar para personalizar elementos en otras páginas de tu sitio. Por ejemplo, para aplicar estilos solo en una página de producto, puedes usar la clase .single-product que WordPress agrega al body:
body.single-product .tu-elemento {
/* Estilos personalizados aquí */
}Reemplaza .tu-elemento con la clase específica del elemento que deseas personalizar en la página de producto.
Con estas técnicas, puedes tener un control granular sobre el diseño y la apariencia de diferentes partes de tu sitio WordPress, adaptando el estilo según la página en la que se encuentre el usuario.