La versione 2.8 di WordPress ha introdotto un utile strumento per personalizzare i temi attraverso i CSS: la funzione body_class() che consente di applicare classi differenti al tag body, a seconda del template visualizzato. La nuova funzione è bene introdotto su TomStardust nell’articolo “La funzione body_class() di WordPress 2.8”
Chi utilizza Thematic come tema di base per il proprio blog disponeva gia delle body class dinamiche. Thematic usa infatti la funzione dynamic contextual class svilupata da Scott Wallick e Andy Skelton per The Sandbox: a ogni tag body vengono applicate dinamicamente una serie piuttosto ampia di classi che “descrivono” sia il contenuto della pagina che le specificità del lettore.
Un esempio spiega meglio. Se ispeziono il codice della home page del mio blog e cerco il tag body:
<body class="wordpress y2009 m07 d08 h10 home blog loggedin windows firefox ff3">
come vedete sono state applicate diverse classi. Se voi ispezionate il codice adesso, leggendo questo articolo, trovere altre classi: alcune identiche, altre differenti.
Le classi y2009 m07 d08 sono classi che definiscono il momento temporale di visualizzazione della pagina. Domani le classi saranno y2009, m07, d09. Le classi windows, firefox, ff3 invece dipendono dal mio sistema operativo e dal browser impiegato per la visualizzazione della pagina. La classe loggedin infine è applicata perchè ho effettuato il login sull’amministrazione del blog.
Così se semplicemente apro la stessa pagina, in questo momento, con IE 8 senza avere prima effettuato il login trovo:
<body class="wordpress y2009 m07 d08 h10 home blog windows msie ie8">
Come vedete non sono state applicate la classi loggedin, firefox, ff3. Al loro posto sono state aggiunte le classi msie e ie8.
La classe home invece la troverete sempre, se ispezionate il codice della home page. Ma non la troverete ispezionando il tag body della pagina di un post.
Tutto questo a cosa serve?
Attraverso le classi dinamiche possiamo personalizzare le singole pagine del nostro tema agendo esclusivamente sui fogli di stile CSS.
Come ho mostrato nel mio tutorial in inglese “How to create your own WordPress Theme in just 3 hours – part II” è possibile ad esempio applicare un bordo di divisione tra i post in home page e sugli elenchi di archivio (category.php, archive.php) e rimuoverla dai post singoli:
/* add a border to separate posts */
div.post{border-bottom:3px dashed #FFF;}
/* remove the border on sigle post pages */
body.single div.post{border-bottom:none;}Ma potremmo fare di più. Ad esempio applicare un colore differente ai titoli delle pagine degli articoli che presentano un determinato tag. Ispezionando il codice della pagina di un post che ho taggato “thematic” trovo la classe s-tag-thematic applicata dinamicamente a body.
body.s-tag-thematic h1.entry-title{ color:#CC0000;}Se applico questo codice le pagine di articoli che contengono il tag “thematic” presenteranno tutte un titolo di colore rosso.
Per inciso: Thematic applica la classe tag-thematic anche ai div dei vari post presenti in home e nelle pagine di archivio. Per cui sarebbe possibile estendere il colore legato al tag anche a queste pagine. Anche semplicemente intervenendo su div.tag-thematic
Oppure potrei applicare una testata differente a una categoria:
body.s-category-coding #header, body.category-coding #header {
background-image:url(images/header-coding.jpg);
}(Si noti che s-category-coding viene applicata sulle pagine dei singoli post mentre category-coding viene applicata alle pagine di archivio)
Le possibilità offerte sono davvero ampie. Un aspetto interessante è anche quello di potere correggere le limitazioni dei vecchi browser senza dovere ricorrere ad eccesivi hack CSS. Poichè tra le classi applicate è presente anche la descrizione del browser impiegato per la lettura della pagina sarà possibile applicare stili visualizzati solo da chi possiede browser recenti.
Vediamo come creare la nostra home page usando un layout a tre colonne fisse e tutte le altre pagine usandone uno a due colonne usando Thematic....