Modificare lo stile solo nella pagina principale

Question

Modificare lo stile solo nella pagina principale

4 dic 2013, 07:46:35

Visualizzazioni: 59.4K

Voti: 10

Sono relativamente nuovo con WordPress, ma sono sicuro che ci sia un modo per fare quello che vorrei fare.

Ho un contenitore nel mio template e nella pagina principale vorrei specificare un padding leggermente diverso per questo elemento.

Il mio CSS attuale è il seguente:

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

Vorrei ridurre il padding a 80px se mi trovo nella pagina Home, altrimenti mantenerlo così com'è.

È qualcosa che dovrei fare all'interno del template oppure esistono trucchi CSS 'solo per WordPress' di cui non sono attualmente a conoscenza?

Nella mia limitata esperienza, penso che dovrei essere in grado di specificare se la pagina è is_home o simile, e selezionare un foglio di stile personalizzato nel file header.php per la home page. Presumibilmente, con !important dopo la modifica del padding nel CSS.

Potete darmi qualche indicazione? I risultati che sto trovando attraverso le ricerche non sono particolarmente quello che sto cercando di fare.

MrS1ck

103

css homepage

Tutte le risposte alla domanda

Commenti

La tua risposta è stata molto utile e approfondita, grazie!

MrS1ck

4 dic 2013 18:57:52

Se sei nella pagina Home, il tuo tag body verrà renderizzato come <body class="blog"> invece di home e nella Pagina Frontale <body class="home"> invece di 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, ho applicato del CSS alla classe ".page" per le mie pagine interne. Ma la mia home page ha sia la classe ".home" che ".page". Come dovrei gestire questa situazione?

Sopo

8 mag 2018 22:29:23

quello che ho trovato è che la classe "page-template-default" è presente su tutte le pagine interne tranne la home page, quindi ho usato quella. Grazie comunque... è stato utile

Sopo

8 mag 2018 22:50:20

Controlla la classe del tag body, c'è una classe chiamata home per la pagina principale. Spero che il seguente CSS ti possa aiutare.

.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 funzione body_class($class) di WordPress è un modo dinamico e utile per caricare stili e JavaScript specifici per i contenuti del body. Se il tuo tema non supporta la classe del body, puoi aggiungerla molto semplicemente:

Apri il file header.php (o il template che contiene il tag <body>)
Modifica il tag <body> trasformandolo in <body <?php body_class(); ?>> — e il gioco è fatto! :)

Ora, quando ti trovi nelle seguenti pagine:

Pagina Home, il tuo tag body verrà renderizzato come <body class="blog">
Pagina Front Page, il tuo tag body verrà renderizzato come <body class="home">
Pagina dettaglio di un post del blog (single.php), il tuo tag body verrà renderizzato come <body class="single">
Pagina dettaglio di una pagina (page.php), il tuo tag body verrà renderizzato come <body class="page">

Ora sei libero di stilizzare come preferisci. Per un foglio di stile esterno, per la home page il tuo stile sarà (come già menzionato da @saifur):

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

CSS Interno

Per il CSS interno, WordPress offre un controllo condizionale chiamato is_home(), e un altro chiamato is_front_page(). Con questi due, puoi verificare se ti trovi nella home page o nella front page, e quindi caricare il tuo codice 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; ?>

Allo stesso modo, puoi utilizzare is_single(), is_page(), is_category(), is_archive(), is_day(), e così via...