Come aggiungere classi dispari/pari ai tuoi post nei temi WordPress

Vuoi aggiungere un tocco di interesse visivo ai tuoi post del blog WordPress? L'aggiunta di classi dispari e pari può rendere il tuo layout più accattivante, spezzando lunghe liste di post con sottili modifiche di design che attirano l'attenzione.

Riceviamo frequentemente domande dai nostri lettori su come applicare questa tecnica. Sebbene molti temi WordPress non offrano un'opzione integrata per le classi di post dispari e pari, abbiamo trovato un modo rapido e semplice per aggiungerle da soli utilizzando il plugin gratuito WPCode.

In questo articolo, ti mostreremo come aggiungere la classe dispari/pari ai tuoi post nei temi WordPress.

Perché aggiungere classi dispari/pari ai tuoi post nei temi WordPress?

Molti temi WordPress utilizzano una classe dispari o pari per i commenti di WordPress. Aiuta gli utenti a visualizzare dove finisce un commento e inizia il successivo.

Allo stesso modo, puoi utilizzare questa tecnica per i tuoi post WordPress. Ha un aspetto esteticamente gradevole e aiuta gli utenti a scansionare rapidamente le pagine con molti contenuti. È particolarmente utile per la homepage di siti web di riviste o notizie.

Detto questo, vediamo come aggiungere una classe dispari e pari ai tuoi post nel tema WordPress.

Aggiungere classi dispari/pari ai post nel tema WordPress

WordPress genera classi CSS predefinite e le aggiunge dinamicamente a diversi elementi del tuo sito web. Queste classi CSS aiutano gli sviluppatori di plugin e temi ad aggiungere i propri stili per i diversi elementi.

WordPress include anche una funzione chiamata post_class, utilizzata dagli sviluppatori di temi per aggiungere classi all'elemento del post. Consulta la nostra guida su come stilizzare ogni post di WordPress in modo diverso.

La post_class è anche un filtro, il che significa che puoi agganciare le tue funzioni ad essa. Questo è esattamente ciò che faremo qui.

Aggiungi semplicemente questo codice al file functions.php del tuo tema, in un plugin specifico per il sito, o in un plugin di snippet di codice come WPCode.

function oddeven_post_class ( $classes ) {
   global $current_class;
   $classes[] = $current_class;
   $current_class = ($current_class == 'odd') ? 'even' : 'odd';
   return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class = 'odd';

Ti consigliamo di utilizzare il plugin WPCode per aggiungere questo codice. È il modo più sicuro e semplice per gestire il codice personalizzato sul tuo sito senza dover modificare direttamente il file functions.php del tuo tema.

Utilizziamo WPCode per gestire tutti gli snippet personalizzati in tutto il nostro portafoglio di siti web. Mantiene tutto organizzato e impedisce che il codice venga cancellato durante gli aggiornamenti del tema.

Per saperne di più su questo plugin per snippet di codice, consulta la nostra recensione completa di WPCode.

Per iniziare, devi installare e attivare il plugin gratuito WPCode. Per le istruzioni, consulta questa guida su come installare un plugin WordPress.

Dopo l'attivazione, vai alla pagina Snippet di codice » + Aggiungi snippet dal pannello di controllo di WordPress.

Quindi, fai clic sul pulsante ‘+ Aggiungi snippet personalizzato’ sotto l'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’.

Successivamente, devi selezionare un tipo di codice dall'elenco delle opzioni che appaiono sullo schermo.

Per questo tutorial, scegli 'PHP Snippet' come tipo di codice.

Verrai ora indirizzato alla pagina Crea snippet personalizzato.

Da qui, aggiungi un titolo per il tuo snippet di codice, che può essere qualsiasi cosa per aiutarti a ricordare a cosa serve il codice.

Dopo di che, incolla il codice da sopra nella casella 'Anteprima codice'.

Una volta fatto, semplicemente sposta l'interruttore da 'Inattivo' ad 'Attivo' e fai clic sul pulsante 'Salva snippet'.

Questa funzione aggiunge semplicemente dispari al primo post, poi pari, e così via.

Puoi trovare le classi dispari e pari nel codice sorgente del tuo sito. Basta spostare il mouse su un titolo di post, quindi fare clic con il pulsante destro del mouse per selezionare Ispeziona o Ispeziona elemento.

Ora che hai aggiunto le classi pari e dispari ai tuoi post. Il passo successivo è stilizzarli usando CSS. Puoi aggiungere il tuo CSS personalizzato al foglio di stile del tuo child theme, al personalizzatore del tema, o utilizzando il plugin WPCode.

Ecco un esempio di CSS che puoi usare come punto di partenza:

.even {
background:#f0f8ff;  
} 
.odd {
 background:#f4f4fb;
}

Ecco come appariva sul nostro sito di prova:

Se non sai come usare il CSS, potresti voler consultare la nostra guida su come aggiungere facilmente CSS personalizzato al tuo sito WordPress.

Risorse aggiuntive per la personalizzazione di pagine e post di WordPress

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere la classe dispari/pari ai tuoi post nei temi di WordPress. Potresti anche voler consultare questi altri articoli per personalizzare ulteriormente il design del tuo sito:

• Come aggiungere stati di post personalizzati per i post del blog in WordPress
• Come modificare il numero di post visualizzati nella pagina del tuo blog WordPress
• Come mostrare o nascondere i widget su pagine WordPress specifiche
• Confronto tra i 15 migliori page builder WordPress drag & drop
• Come aggiungere estratti alle tue pagine in WordPress (passo dopo passo)

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.