Diseñe algo solo en la página de inicio

6

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 relleno ligeramente diferente a este elemento.

Mi CSS actual es el siguiente:

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

Me gustaría bajar el relleno a 80px si estoy en la página de inicio, de lo contrario, manténgalo así.

¿Es esto algo que tendría que hacer dentro de la plantilla o hay trucos de CSS 'WordPress only' de lujo que actualmente no conozco?

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

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

    
pregunta MrS1ck 04.12.2013 - 06:46

2 respuestas

7

WordPress body_class($class) es una buena forma dinámica de cargar estilos, js para contenidos corporales específicos. Si su tema no es compatible con la clase de cuerpo, agréguelos muy simplemente:

  • Abra el header.php (o la plantilla que contiene la etiqueta <body> )
  • Edite la etiqueta <body> y conviértala en <body <?php body_class(); ?>> . ¡Está listo! :)

Ahora cuando estés en:

  • página Home , su etiqueta de cuerpo mostrará <body class="blog">
  • Front Page , tu etiqueta de cuerpo mostrará <body class="home">
  • En la página de detalles de la publicación del blog ( single.php ), la etiqueta de tu cuerpo mostrará <body class="single"> .
  • En la página de detalles de la página ( page.php ), su etiqueta de cuerpo mostrará <body class="page">

Entonces, eres libre ahora. Estilo como quieras. Para la hoja de estilo externa, y para la página de inicio, su estilo será (@saifur ya mencionado):

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

CSS interno

Para CSS interno, hay un verificador condicional en WordPress, llamado is_home() , y otro es is_front_page() . Con estos dos, puede verificar si "usted" se encuentra en la página de inicio o en la primera página, y luego puede cargar su 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 forma similar, is_single() , is_page() , is_category() , is_archive() , is_day() , ... así sucesivamente ...

    
respondido por el Mayeenul Islam 04.12.2013 - 07:32
1

Verifique la clase de etiqueta del cuerpo, 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;
}
    
respondido por el saifur 04.12.2013 - 07:01

Lea otras preguntas en las etiquetas