Cum să adăugați clasa impară/pară la postarea dvs. în temele WordPress

Doriți să adăugați o notă de interes vizual postărilor de pe blogul dvs. WordPress? Adăugarea claselor impare și pare poate face ca aspectul dvs. să fie mai captivant, spărgând listele lungi de postări cu modificări subtile de design care atrag atenția.

Primim frecvent întrebări de la cititorii noștri despre cum să aplicăm această tehnică. Deși multe teme WordPress nu oferă o opțiune încorporată pentru clasele de postări impare și pare, am găsit o modalitate rapidă și ușoară de a le adăuga singuri folosind pluginul gratuit WPCode.

În acest articol, vă vom arăta cum să adăugați clasa impară/pară la postarea dvs. în temele WordPress.

De ce să adăugați clasa impară/pară la postările dvs. în temele WordPress?

Multe teme WordPress folosesc o clasă impară sau pară pentru comentariile WordPress. Ajută utilizatorii să vizualizeze unde se termină un comentariu și unde începe următorul.

Similar, puteți folosi această tehnică pentru postările dvs. WordPress. Arată plăcut estetic și ajută utilizatorii să scaneze rapid paginile cu mult conținut. Este deosebit de util pentru pagina principală a site-urilor de tip revistă sau știri.

Acestea fiind spuse, să vedem cum să adăugăm o clasă impară și pară postărilor dvs. în tema WordPress.

Adăugarea clasei impare/pare la postări în tema WordPress

WordPress generează clase CSS implicite și le adaugă la diferite elemente de pe site-ul dvs. pe parcurs. Aceste clase CSS ajută dezvoltatorii de pluginuri și teme să adauge propriile stiluri pentru diferite elemente.

WordPress vine, de asemenea, cu o funcție numită post_class, care este utilizată de dezvoltatorii de teme pentru a adăuga clase la elementul postării. Consultați ghidul nostru despre cum să stilizezi fiecare postare WordPress diferit.

post_class este, de asemenea, un filtru, ceea ce înseamnă că puteți conecta propriile funcții la acesta. Acesta este exact ceea ce vom face aici.

Pur și simplu adăugați acest cod în fișierul functions.php al temei dvs., într-un plugin specific site-ului, sau într-un plugin de fragmente de cod precum 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';

Recomandăm utilizarea pluginului WPCode pentru a adăuga acest cod. Este cea mai sigură și mai ușoară modalitate de a gestiona codul personalizat pe site-ul dvs. fără a edita direct fișierul functions.php al temei.

Folosim WPCode pentru a gestiona toate fragmentele personalizate pe portofoliul nostru de site-uri web. Păstrează totul organizat și previne ștergerea codului în timpul actualizărilor de temă.

Pentru a afla mai multe despre acest plugin pentru fragmente de cod, consultați recenzia noastră completă WPCode.

Pentru a începe, trebuie să instalați și să activați pluginul gratuit WPCode. Pentru instrucțiuni, consultați acest ghid despre cum să instalați un plugin WordPress.

După activare, accesați pagina Code Snippets » + Add Snippet din tabloul de bord WordPress.

Apoi, faceți clic pe butonul „+ Adăugați un fragment personalizat” sub opțiunea „Adăugați codul dvs. personalizat (Fragment nou)”.

În continuare, trebuie să selectați un tip de cod din lista de opțiuni care apar pe ecran.

Pentru acest tutorial, alegeți „Fragment PHP” ca tip de cod.

Vei fi acum direcționat către pagina Creare Fragment Personalizat.

De aici, adăugați un titlu pentru fragmentul dvs. de cod, care poate fi orice pentru a vă ajuta să vă amintiți la ce servește codul.

După aceea, lipiți codul de mai sus în caseta „Previzualizare cod”.

Odată ce acest lucru este făcut, pur și simplu comutați comutatorul de la „Inactiv” la „Activ” și faceți clic pe butonul „Salvare fragment”.

Această funcție adaugă pur și simplu impare la prima postare, apoi pare, și așa mai departe.

Puteți găsi clasele par și impar în codul sursă al site-ului dvs. Pur și simplu mutați mouse-ul pe un titlu de postare și apoi faceți clic dreapta pentru a selecta Inspect sau Inspect Element.

Acum că ați adăugat clasele par și impar postărilor dvs. Următorul pas este să le stilizați folosind CSS. Puteți adăuga CSS-ul personalizat în fișierul stylesheet al temei copil, în personalizatorul de teme sau folosind pluginul WPCode.

Iată un exemplu de CSS pe care îl puteți folosi ca punct de plecare:

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

Așa arăta pe site-ul nostru de test:

Dacă nu știți cum să folosiți CSS, atunci poate doriți să consultați ghidul nostru despre cum să adăugați cu ușurință CSS personalizat pe site-ul dvs. WordPress.

Resurse suplimentare pentru personalizarea paginilor și postărilor WordPress

Sperăm că acest articol v-a ajutat să învățați cum să adăugați clasa impară/pară la postările dvs. în temele WordPress. De asemenea, ați putea dori să consultați aceste alte articole pentru a personaliza în continuare designul site-ului dvs.:

• Cum să adăugați stări personalizate pentru postări pe blog în WordPress
• Cum să schimbați numărul de articole afișate pe pagina blogului dvs. WordPress
• Cum să afișezi sau să ascunzi widget-uri pe pagini specifice WordPress
• 15 cele mai bune constructori de pagini WordPress drag & drop comparați
• Cum să adăugați fragmente la paginile dvs. în WordPress (pas cu pas)

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.