body_class()

Contenuti Extra

Descrizione

Dalla versione 2.8 di WordPress gli sviluppatori di questa piattaforma hanno a disposizione un nuovo Template Tag che gli permetterà di avere a disposizione un numero maggiore di classi CSS che saranno richiamabili all’interno del foglio di stile per aggiungere una maggior personalizzazione basato sulla struttura di appartenenza. Questo Template Tag si presenta come una funzione PHP di nome body_class() e, prendendo spunto dal nome, si riesce a capire che la posizione migliore per questa funzione sia all’interno dell’elemento <body>; contenuto, generalmente, all’interno del file header.php

Uso

La variabile $classi non è richiesta, ma ci può essere di aiuto visto che ci permetterà di aggiungere delle classi personalizzate all’interno dell’elemento <body>. Oltre alla classe, o classi, che possiamo aggiungere, WordPress popolerà l’elemento con diverse classi che verranno generate a seconda della pagina in cui ci troviamo o per altri fattori. Ma, al posto di elencare una ad una le varie classi che questa funzione sarà in grado di generare, preferisco andare a mostrarvi alcuni esempi pratici sull’utilizzo di questa funzione sulle pagine più comuni di WordPress.

Valori di Default

Front Page

Le classi generate da body_class() per Front Page

Se non siamo andati a modificare le impostazioni riguardanti le Visualizzazioni pagina iniziale, che trovate in Impostazioni -> Scrittura, allora la vostra installazione WordPress mostrerà come pagina iniziale la lista dei vostri ultimi articoli. In questo caso, alcune, tra le classi generate da questa funzione sono bloghome; WordPress ne aggiungerà anche altre ma per identificare questa pagina ci basteranno queste. Se invece abbiamo modificato le impostazioni precedenti mostrando come homepage una pagina statica, allora questa funzione genererà, oltre alla classe home, anche le classi page e page-id-ID.

Singolo Articolo

Le classi che vengono generate da body_class() per una Pagina Singola

Quando stiamo consultando la pagina che mostra un singolo articolo (per gli sviluppatori in ascolto ci stiamo riferendo alla generica single.php) allora WordPress genererà una utilissima classe single che ci permetterà di personalizzare questa pagina.

Se invece siete alla ricerca di un metodo per personalizzare un singolo articolo, sono lieto di farvi sapere che WordPress genererà anche una classe postid-ID dove sostituirà ID con il numero identificatore dell’articolo. A questo punto basterà segnarvi l’id dell’articolo per il quale volete modificare la pagina ed il gioco è fatto!

Pagine Statiche

Ecco le classi generate da body_class() per una Pagina Statica

Le pagine statiche sono un elemento molto comodo da avere all’interno di un sito basato su WordPress. A seconda delle vostre necessità potrete utilizzare questi tipi di elementi per creare una pagina about, una pagina contatti e qualsiasi altro tipo di pagina statica desideriate. Utilizzando questa funzione WordPress andrà a generare principalmente due classi: pagepage-id-ID, anche in questo caso ID verrà sostituito con il valore numerico dell’identificatore. Ma le pagine statiche in WordPress non si fermano qua! Magari non lo sapete ancora, ma è possibile creare delle relazioni tra le varie pagine identificandone alcune come pagine parenti ed altre come pagine figlie. Questo non è un obbligo, ma nel caso in cui abbiate una pagina Prodotti potreste avere la necessità di creare delle pagine figlie per ogni singolo prodotto che volete inserire al suo interno. La funzione body_class() viene in nostro soccorso anche questa volta andando a generare la classe page-parent, quando in presenza di una pagina genitore, mentre avremo page-childparent-pageid-parent-IDper quelle pagine che risultano essere figlie di altre. Questo ci darà una grande elasticità se ci troviamo nella necessità di personalizzare le pagine figlie di un determinato parente, tutto con una semplice classe.

Autore

Le classi generate da body_class() per la Pagina Autore

WordPress pensa proprio a tutto! Infatti con questa funzione ci sarà facile andare a personalizzare le pagine degli autori di un blog con le seguenti classi: authorauthor-user_nicename, in questo caso nicenameverrà sostituito con il nome pubblico dell’autore (impostabile all’interno di Utenti -> Il tuo profilo).

Categorie e Tag

Le classi generate da body_class() per una Pagina Categoria

La possibilità di archiviare i nostri articoli all’interno di categorie e tag personalizzabili è, da sempre, stata una caratteristica che molti utenti WordPress amano e che continuano ad utilizzare, per questo motivo è stato pensato di utilizzare la funzione body_class() anche per identificare questi tipi di pagine. In questo caso, a differenza della Pillola su post_class() che ci permetteva di modificare i singoli articoli, saremo in grado di modificare l’intera pagina andando ad aggiungere personalizzazioni di layout e design. Quando WordPress andrà a generare una pagina Categoria andrà ad inserire anche le seguenti classi: archivecategorycategory-name.

Le classi generate da body_class() per una Pagina Tag

Mentre quando parliamo di Tag verranno generate queste: archivetagtag-slug. Vorrei farvi notare che, in entrambi gli esempi, è spuntata anche la classe archive; questo perché WordPress considera questi tipi di pagine pagine archivio, rispettivamente un archivio degli articoli in una categoria ed un archivio degli archivi con un determinato tag. Troverete questa classe anche in qualsiasi altra pagina archivio, quindi preparatevi al suo utilizzo 😀

Pagina Errore

Le classi generate da body_class() per la Pagina Errore

Come sappiamo o come scoprirete a breve nel corso “Costruiamo un Template WordPress da Zero” molti designer si sono sbizzarriti nella creazione di pagine errori. Se anche voi siete intenzionati a sfruttare questa caratteristica per dare un tono differente al vostro sito non dovrete far altro che utilizzare la classe error404 che vi permetterà di cambiare il background di default per il vostro <body> e molto altro. Prima di concludere questa Pillola, c’è un altra classe viene generata e che potrà essere di grande interesse per chi sta usando WordPress per gestire i suoi utenti. Infatti grazie a body_class() potremmo sapere se il nostro utente è loggato all’interno del sistema o meno grazie alla presenza della classe logged-in.

Conclusioni

In questa pillola siamo andati a vedere come sia possibile utilizzare questa interessante funzione per aggiungere dinamicamente delle classi che ci saranno di aiuto quando vogliamo personalizzare con i CSS il nostro tema. Proprio come per la precedente post_class() abbiamo moltissime classi interessanti ma vi sembra che mi sia dimenticato qualcosa? Ad essere sincero ho evitato volontariamente alcune classi perché altrimenti, più che pillola, questo sarebbe stato un pranzo completo 😀

Ma se avete bisogno di aiuto o di altri suggerimenti, vi consiglio di utilizzare la sezione commenti qua in basso per comunicare con me! Oltre a questo, questa volta vorrei chiedervi un piccolo favore… A vedere dal traffico che sta man mano acquistando questo sito, devo dire che i miei contenuti vi piacciono! Perché allora non mi date una mano a far crescere questo sito utilizzando i bottoni qua in basso che vi permetteranno di utilizzare i maggiori social media? Grazie mille per il vostro supporto e, come sempre, buona formazione!

Lascia il tuo Pensiero