Guida alla personalizzazione delle singole pagine di un blog Wordpress, con una semplice funzione php.
La versione 2.8 di WordPress introduce una novità molto utile per chi sviluppa dei temi. E’ stata infatti creata una nuova funzione php, chiamata body_class().
Utilizzandola nel template è possibile avere delle classi differenti sul tag HTML body, a seconda della pagina visualizzata. Questo consente di personalizzarne l’aspetto esclusivamente tramite CSS, senza bisogno di creare template su misura.
Per utilizzarla è sufficiente aggiungerla nel tag body, che di solito è nel template header.php, in questo modo:
<body <?php body_class(); ?>>
Il risultato sulla homepage del blog sarà:
<body class="home blog">
mentre su un singolo articolo (ad esempio con ID 23):
<body class="single postid-23">
E’ possibile anche aggiungere una o più classi personalizzate a piacere, che appariranno insieme alle altre:
<body <?php body_class('nome-classe'); ?>>
Una funzione php analoga, relativa però ai singoli post, è chiamata post_class(): ne ho parlato in passato, trovate la relativa guida a questo indirizzo.
Le potenzialità di queste funzioni sono notevoli, ma credo sia bene utilizzarle solo se veramente necessario. Soprattutto nel caso di body_class(), il rischio è quello di trovarsi il codice inutilmente appesantito. L’elenco completo delle classi stampate dalla nuova funzione è in questo post di WPEngineer.
forte.. io uso da parecchio tempo una funzione identica, sviluppata dentro i temi/framework Sandbox e Thematic
queste funzioni usano ancora più classi
per esempio una pagina post su Thematic può avere un body con queste classi:
wordpress y2009 m06 d30 h06 single postid-24 s-y2007 s-m04 s-d07 s-h21 s-category-asides s-author-admin
a me personalmente non da fastidio che siano troppe o in eccesso
quali potrebbero essere gli inconvenienti?
e poi in questo modo con un solo style.css puoi veramente gestire tutto un sito in wordpress
puoi fare cose come cambiare il CSS in base al tipo di pagina, in base all’autore, alla categoria o adirrittura al mese in cui è stato pubblicato l’articolo, semplicemente con una riga di CSS
adoro questa funzionalità!
@Valentino: inconvenienti pratici non ce ne sono, è più che altro una questione di pulizia ed ordine del codice… avere qualche classe in più sul body non influisce sui tempi di caricamento delle pagine. Io tendo sempre ad utilizzare il minimo indispensabile, per questo userei la funzione body_class() solo se fossi sicuro di sfruttarla tramite CSS.
Ma la si può usare anche in altri tag? Per esempio un menu di navigazione. Eviterebbe gli if(is_home()) vari per creare highlight di pagina.
@Ted: la funzione ti genera semplicemente delle classi, puoi posizionarle dove vuoi… ma metterle su un menu non ti cambia molto le cose, anzi in quel modo hai meno possibilità di sfruttare i selettori discendenti nel CSS.
Per testare certe condizioni i vari if in php all’interno del template sono indispensabili, almeno per sapere qual è la tab corrente (il primo caso che mi viene in mente).
be’, perché non mi cambia? Se io ho un bottone home, con quella classe posso assicurarmi che, per esempio, gli sprite di quel bottone funzionino senza sbattimenti, no?
@Ted: diciamo che non è il modo migliore di utilizzare la funzione, come dice anche il nome è stata ideata per altro, poi puoi usarla come preferisci :)
Il fatto è che oltre alla classe “home” vengono create altre classi che in quel caso non c’entrano niente, e sulle pagine diverse dalla home la tab “homepage” avrebbe delle classi improbabili.
Ted, non ti serve metterla in altri tag perchè come dice Tom puoi usare i selettori discendenti, cioè puoi fare la stessa cosa così:
body.home #miomenu{ /* stile del mio menu, applicato solo in home */ }
per il tab selezionato invece, se non ricordo male WordPress lo fa già, aggiungendo ad esempio la classe “current_page_item” all’elemento del menu pagina aperto in questo momento
@valentino: sì, ma se il mio selettore è un #menu li.home non funziona. Io faccio l’esempio di una lista non ordinata che abbia, per dire, la prima voce “home”. In quel caso, non current_page_item non va bene, perché serve solo per le wp_list_pages. Però effettivamente basterebbe fare un body.home #homebtn. Proverò, anche se con tutti questi selettori discendenti mi rincoglionisco :-)
Trovo le body class molto molto utili. Le uso da anni sui miei siti. E le ho piacevolmente trovate su Thematic, il tema framework per WordPress (anche nelle precedenti versioni).
E’ frequente dovere fare una piccola personalizzazione di una pagina. Vogliamo ad esempio che in home page ogni post abbia un bordo di separazione dal post successivo? Ma non vogliamo il bordo sulle pagine dei singoli post? Una riga di codice CSS, senza dovere mettere mano al template in PHP.
Anche grazie alle body class ho scritto un post su come sia possibile creare un tema per WordPress senza dovere toccare una riga di codice PHP.
Io utilizzo quasi sempre sandbox che fa larghissimo uso di post_class e sono d’accordo con te al 100%, molto utili ma occhio a non esagerare (sandbox di default applica almeno una decina di classi ogni volta che la funzione viene richiamata, per dire)
piccolo trick che sto testando or ora: abbinate a body_class l’uso di un compilatore CSS, come ad esempio DtCSS
i compilatori CSS servono per aggiungere alcuni trucchetti utili
in questo caso possiamo usare i selettori annidati e scrivere:
body.home{
a{ /* … */ }
#access{ /* … */ }
/* qui dentro, tutti gli stili dell’home page */
}