Aplicar estilos solo en la página de inicio

Question

Aplicar estilos solo en la página de inicio

4 dic 2013, 07:46:35

Vistas: 59.4K

Votos: 10

Soy relativamente nuevo en WordPress, pero estoy seguro de que hay una manera de hacer lo que me gustaría hacer.

Tengo un contenedor en mi plantilla y en la página de inicio me gustaría especificar un padding ligeramente diferente para este elemento.

Mi CSS actual es el siguiente:

#main_content .container {
position: relative;
padding: 120px 0;
}

Me gustaría reducir el padding a 80px si estoy en la página de inicio, de lo contrario mantenerlo como está.

¿Es esto algo que tendría que hacer dentro de la plantilla o hay trucos de CSS 'exclusivos de WordPress' que actualmente desconozco?

En mi experiencia limitada, creo que debería poder especificar si la página es is_home o similar, y seleccionar una hoja de estilos personalizada en el archivo header.php para la página de inicio. Presumiblemente, con !important después de mi cambio de padding en el CSS.

¿Pueden darme alguna dirección? Los resultados que estoy encontrando a través de la búsqueda no son particularmente lo que estoy tratando de hacer.

MrS1ck

103

css página de inicio

Todas las respuestas a la pregunta

Comentarios

¡Tu respuesta fue muy útil y detallada, gracias!

MrS1ck

4 dic 2013 18:57:52

Si estás en la página Home, tu etiqueta body se renderizará como <body class="blog"> en lugar de home y en la Front Page como <body class="home"> en lugar de front-page: https://core.trac.wordpress.org/browser/tags/4.9.2/src/wp-includes/post-template.php#L570

rafawhs

1 mar 2018 15:37:48

@mayeenul Islam, he aplicado algo de CSS en la clase ".page" para mis páginas internas. Pero mi página de inicio tiene ambas clases ".home" & ".page". ¿Cómo debería manejar esto?

Sopo

8 may 2018 22:29:23

Lo que he encontrado es que la clase "page-template-default" está disponible en todas las páginas internas excepto en la página de inicio, así que usé esa. De todas formas gracias... fue útil

Sopo

8 may 2018 22:50:20

Revisa la clase de la etiqueta body, hay una clase llamada home para la página de inicio. Espero que el siguiente CSS te ayude.

.home #main_content .container {
position: relative;
padding: 120px 0;
}

saifur

166

4 dic 2013 08:01:11

Mayeenul Islam 12.9K · Accepted Answer · 2013-12-04T08:32:15Z

La función body_class($class) de WordPress es una forma dinámica y útil de cargar estilos y JavaScript para contenidos específicos del cuerpo. Si tu tema no soporta las clases del cuerpo, puedes agregarlas fácilmente:

Abre el archivo header.php (o la plantilla que contiene la etiqueta <body>)
Edita la etiqueta <body> y cámbiala a <body <?php body_class(); ?>> — ¡Listo! :)

Ahora, cuando estés en:

La página de Inicio, tu etiqueta body se renderizará como <body class="blog">
La Página de Portada, tu etiqueta body se renderizará como <body class="home">
La página de detalle de una entrada (single.php), tu etiqueta body será <body class="single">
La página de detalle de una página estática (page.php), tu etiqueta body será <body class="page">

Así que ahora eres libre de estilizar como quieras. Para una hoja de estilos externa, y para la página de inicio, tu estilo será (como @saifur ya mencionó):

body.home #main_content .container {
   position: relative;
   padding: 120px 0;
}

CSS Interno

Para CSS interno, WordPress tiene un verificador condicional llamado is_home(), y otro llamado is_front_page(). Con estos dos, puedes verificar si estás en la página de inicio o en la página de portada, y luego cargar tu código CSS interno:

<?php if( is_home() || is_front_page() ) : ?>
<style id="my-internal-css">
    #main_content .container {
       position: relative;
       padding: 120px 0;
    }
</style>
<?php endif; ?>

De manera similar, existen is_single(), is_page(), is_category(), is_archive(), is_day(), ... y así sucesivamente...