Personalizzare il primo post di WordPress

[tweet “Come diversificare esteticamente il primo post di #WordPress con un semplice #snippet”]

In alcuni casi può tornare utile, nella gestione di un blog, diversificare esteticamente il primo post.

Cambiare colori, allineamenti e caratteri, aggiungere bordi e tante altre operazioni che si possono fare facilmente, se si ha una classe CSS a cui fare riferimento.

Vediamo allora come inserire una classe CSS al primo post di un loop di WordPress.

Il codice che segue va inserito nel solito file delle funzioni del tema, il functions.php, meglio ancora se si utilizza un tema child.

add_filter( 'post_class', 'primo_post_classe_css' );
 
function primo_post_classe_css( $classes ) {
    global $wp_query;
    if ( 0 == $wp_query->current_post ) {
        $classes[] = 'primo-post';
    }
    return $classes;
}

A questo punto è possibile utilizzare la classe .primo-post nel proprio CSS personalizzato, ed apporre tutte le modifiche che si desiderano.

Considerazioni generali sull’uso di questo snippet:

1. lo snippet qui sopra è stato testato con WordPress 4.0, con il tema Twenty Fourteen ed altri temi.
2. con alcuni temi lo snippet è inutile, in quanto alcuni temi inseriscono, bontà loro, una classe CSS che distingue il primo post del loop.
3. in teoria ci sarebbe una soluzione alternativa, senza l’utilizzo di snippet, che chiama in causa pseudo classi che avevo già affrontato e abbandonato per problemi di compatibilità con qualche browser. Perciò ho pensato che l’uso di una classe CSS vera e propria fosse un sistema più affidabile.