La funzione body_class() di WordPress 2.8

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.

Guida all’utilizzo di ID e classi nel codice HTML

Consigli utili per ottimizzare il codice HTML, mantenendo separato il contenuto dalla presentazione.

Nello sviluppo di un sito spesso ci si preoccupa degli aspetti più complessi per poi dimenticare i dettagli elementari. All’interno del codice HTML hanno una notevole importanza ID e classi, ma capita di utilizzare questi attributi senza attenzione, in maniera spesso controproducente.

In ogni progetto è fondamentale considerare almeno due aspetti riguardanti il codice delle pagine:

  1. le possibilità di sviluppo future
  2. la leggibilità

Per ottenere i migliori risultati e soprattutto consentire a chiunque di comprendere il codice HTML, è sufficiente ricordarsi alcuni punti ben illustrati sul blog di Jens Meiert che ho voluto approfondire.

1. Ridurre al minimo ID e classi

Finchè è possibile, evitate di appesantire il codice HTML e sfruttate i selettori discendenti dei CSS. Sono uno strumento potente, e potrete così limitare gli ID ai contenitori principali (ad esempio #container, #header, #nav…). Potrebbe sembrare un dettaglio di poco conto, ma con la pratica vi accorgerete che questa non è un’indicazione assurda, anzi.

Ovviamente su elementi che hanno bisogno di personalizzazioni su misura (ad esempio un’icona associata) è indispensabile l’uso di classi ad hoc, ma questo modo di pensare sarà molto utile anche in futuro con i selettori dei CSS3. Sarete già pronti ad utilizzarli senza dover cambiare le vostre abitudini di lavoro.

2. Utilizzare nomi relativi alla funzione dell’elemento

Uno degli errori più comuni è usare per ID e classi un nome relativo all’aspetto dell’elemento e non alla sua funzione. Un esempio potrebbe essere .red_text invece di .alert. Commettendo questo errore resterete vincolati, ed in futuro non potrete cambiare la visualizzazione di quel particolare elemento senza modificare anche il nome dell’attributo. Avere una classe .red_text che fa riferimento ad un elemento di colore diverso dal rosso sarebbe assurdo!

A questo proposito non ci sono degli standard (anche se non sarebbe male averli), ma è buona pratica usare nomi come #menu o #nav per la navigazione, #content per il corpo centrale del sito, #header e #footer per testata e piede. Osservando i layout dei web designer più famosi potete farvi un’idea di quali siano le convenzioni più diffuse.

3. Sintetizzare in maniera comprensibile

Per velocizzare il lavoro ed evitare di avere fogli di stile esageratamente lunghi è sempre meglio cercare di usare nomi brevi per ID e classi. Questo però non deve andare a scapito della comprensibilità: #nav è sicuramente meglio di #navigation, ma usare .wdg al posto di .widget sarebbe esagerato.

Quelli mostrati sono dettagli elementari: proprio per questo andrebbero sempre tenuti presenti. Non pensate che siano aspetti poco importanti, la realizzazione di un buon sito inizia proprio dal codice scritto. A questo proposito, quali sono le vostre convenzioni per l’uso di ID e classi? Lasciate un commento per discuterne insieme.