25 Stile alla classe BODY

Pubblicato il di

Come post_class() è per il contenitore <div> similmente per il tag <body> il tamplate tag da usare è body_class().

<body <?php body_class(); ?>>

In base al punto del sito in cui vi trovate, il tag body otterrà classi diverse. Supponete di leggere un post con ID 245 e di aver effettuato il login. Otterreste il seguente tag body:

<body class="single single-post postid-245 single-format-standard logged-in">

Un elenco di categorie restituirebbe altre classi e un elenco di tag darebbe come risultato un’altra serie. Le pagine, la home page, la ricerca, ogni parte immaginabile del sito restituiranno classi più o meno diverse per il tag body.

Supponete di volere una dimensione diversa per gli heading <h2> a seconda che vengano caricati in un elenco o in un singolo post. È possibile definirlo aggiungendo classi ai vari template file oppure è possibile farlo nel codice CSS con le classi generate da body_class().

Scoprire quali classi vengono restituite e in che situazione. Per esempio la classe single viene passata al tag body quando si visualizza un singolo post e archive viene passata per tutte le pagine di elenchi. Ecco un esempio:

body.single h2 { font-size: 48px; }
body.archive h2 { font-size: 36px; }

applicando codice CSS vedrete che potete controllare meglio il design dalle classi passate a <body> invece che aggiungendo le classi a ogni elemento nei template file.

  • rtl
  • home
  • blog
  • archive
  • date
  • search
  • paged
  • attachment
  • error404
  • single-postid-X (dove X è l’ID del post)
  • page-id-X (dove X è l’ID della pagina)
  • attachmentid-X (dove X è l’ID dell’allegato)
  • attachment-MIME (dove MIME è il tipo MIME)
  • authorauthor-USER (dove USER è il nickname dell’autore)
  • categorycategory-X (dove X è lo slug delle categorie)
  • tag
  • tag-X (dove X è lo slug dei tag)
  • page-parent
  • page-child parent-pageid-X (dove X è l’ID della pagina)
  • page-template page-template-FILE (dove FILE è il nome del template file)
  • search-results
  • search-no-results
  • logged-inpaged-X (dove X è il numero di pagina, riferendosi agli elenchi)
  • single-paged-X (dove X è il numero di pagina, riferendosi ai post di più pagine)
  • page-paged-X (dove X è il numero di pagina, riferendosi ai post di più pagine)
  • category-paged-X (dove X è il numero di pagina, riferendosi agli elenchi)
  • tag-paged-X (dove X è il numero di pagina, riferendosi agli elenchi)
  • date-paged-X (dove X è il numero di pagina, riferendosi agli elenchi)
  • author-paged-X (dove X è il numero di pagina, riferendosi agli elenchi)
  • search-paged-X (dove X è il numero di pagina, riferendosi agli elenchi)
  • tax-X (dove X è il nome della tassonomia)
  • term-X (dove X è il nome del termine)
  • admin-barcustom.background

Usare le classi restituite da body_class() è un metodo utile per aggiungere un controllo visivo più preciso alle varie sezioni di un sito.