Come aggiungere la classe pari / dispari al tuo post nei temi di WordPress

Vuoi aggiungere le classi Odd e Even ai post nel tuo tema WordPress? Aggiungere una classe pari e dispari ti consente di applicare uno stile diverso a ogni altro post. In questo articolo, ti mostreremo come aggiungere una classe pari / dispari al tuo post in temi WordPress.

Perché aggiungere la classe dispari / pari ai tuoi messaggi in temi WordPress?

Molti temi WordPress usano una vecchia o una classe per i commenti di WordPress. Aiuta gli utenti a visualizzare dove finisce un commento e inizia quello successivo.

Allo stesso modo, puoi usare questa tecnica per i tuoi post su WordPress. Appare 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 pari e dispari ai tuoi post in tema WordPress.

Aggiunta di classi pari / dispari ai messaggi in tema WordPress

WordPress genera classi CSS predefinite e le aggiunge a diversi elementi sul tuo sito web al volo. Queste classi CSS aiutano i plugin e gli sviluppatori di temi aggiungono i propri stili per oggetti diversi.

WordPress ha anche una funzione chiamata post_class, che viene utilizzato dagli sviluppatori di temi per aggiungere classi all'elemento post. Consulta la nostra guida su come personalizzare ogni post di WordPress in modo diverso.

Il post_class è anche un filtro, il che significa che puoi agganciare le tue funzioni ad esso. Questo è esattamente quello che faremo qui.

Basta aggiungere questo codice al file functions.php del tuo tema o a un plug-in specifico del sito.

 function oddeven_post_class ($ classes) global $ current_class; $ classes [] = $ current_class; $ current_class = ($ current_class == 'odd')? 'pari dispari'; restituire $ classi;  add_filter ('post_class', 'oddeven_post_class'); global $ current_class; $ current_class = 'dispari'; 

Questa funzione aggiunge semplicemente dispari al primo post, quindi anche, e così via.

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

Ora che hai aggiunto classi pari e dispari ai tuoi post. Il prossimo passo è di modellarli usando i CSS. Puoi aggiungere il tuo CSS personalizzato al foglio di stile del tema secondario o utilizzando il semplice plugin CSS personalizzato.

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

 .anche background: # f0f8ff;  .odd background: # f4f4fb;  

Ecco come è apparso sul nostro sito di test:

Se non sai come usare i CSS, allora potresti voler dare un'occhiata a CSS Hero. Ti permette di aggiungere CSS a qualsiasi parte del tuo sito WordPress senza scrivere alcun codice.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere classi pari / dispari ai tuoi post in temi WordPress. Potresti anche voler vedere la nostra guida su come modellare il layout dei commenti di WordPress.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.