Vuoi aggiungere classi pari e dispari ad articoli sull'argomento del tuo blog WordPress ? L'aggiunta di una classe ti consentirĂ di visualizzare uno stile particolare per ogni articolo.
In questo tutorial, ti mostreremo come visualizzare classi pari o dispari su WordPress.
Perché aggiungere lezioni? coppie "O" Dispari » sul tema del tuo blog WordPress ?
molti Temi WordPress usa una classe vecchia o uguale per i commenti di WordPress. Consente agli utenti di vedere dove finisce un commento e inizia un altro.
Allo stesso modo, puoi usare questa tecnica per i tuoi articoli. Sembra esteticamente gradevole per consentire agli utenti di scansionare rapidamente pagine ingombranti. CiĂ² è particolarmente utile per la home page di siti di giornali o riviste.
Detto questo vedremo come aggiungere una classe negli articoli del vostro blog WordPress.
Come aggiungere una classe pari / dispari su WordPress
WordPress genera classi CSS predefinite e le aggiunge a diversi articoli sul tuo sito Web al volo. Queste classi CSS aiutano gli sviluppatori di plugin e temi ad aggiungere i propri stili a ciascun articolo diverso.
WordPress offre anche una funzione chiamata " post_class Che viene utilizzato dagli sviluppatori di temi per aggiungere lezioni agli articoli.
La funzione post_class Ăˆ anche un filtro, il che significa che puoi manipolarlo con. Questo è esattamente quello che faremo qui.
Basta aggiungere questo codice al tuo file functions.php. tema WordPress.
Funzione oddeven_post_class ($ class) {$ current_class globale; $ Classi [] = $ current_class; Current_class $ = ($ current_class == 'strano')? 'Anche' 'strano'; return $ classi; } Add_filter ( 'post_class', 'oddeven_post_class'); $ Current_class globale; $ Current_class = 'strano';
Questa funzione aggiunge semplicemente una classe per uniformare e oggetti strani.
Troverai classi pari e dispari nel codice sorgente del tuo sito. Basta portare il mouse sul titolo di un articolo, quindi fare clic con il pulsante destro del mouse per ispezionare l'elemento.
Ora che hai aggiunto le classi pari e dispari ai tuoi articoli. Il prossimo passo è dare loro uno stile unico con i CSS. Puoi aggiungere il tuo codice CSS personalizzato sul tema figlio o utilizzando un semplice plug-in CSS.
Ecco un esempio di codice CSS che puoi utilizzare come punto di partenza:
.Anche {background: #f0f8ff; .odd} {background: #f4f4fb; }
Ecco come puĂ² essere il risultato:
Avrai bisogno di un po 'di pratica per ottenere buoni risultati, ma per questo dovrai padroneggiare i CSS o semplicemente usare uno strumento come CSS eroe.
Ăˆ così semplice. Spero che questo tutorial ti sia di grande aiuto. Sentiti libero di farci domande o condividere questo tutorial con i tuoi amici sui tuoi social network preferiti.
