Oneven / even klasse toevoegen aan uw bericht in WordPress-thema's

Wilt u oneven en even klassen toevoegen aan berichten in uw WordPress-thema? Door een oneven en even klasse toe te voegen, kun je elke andere post anders inrichten. In dit artikel laten we je zien hoe je oneven / even class aan je bericht toevoegt in WordPress-thema's.

Waarom Odd / Even Class toevoegen aan uw berichten in WordPress-thema's?

Veel WordPress-thema's gebruiken een oude of zelfs een klasse voor WordPress-opmerkingen. Het helpt gebruikers te visualiseren waar een opmerking eindigt en de volgende begint.

Op dezelfde manier kunt u deze techniek gebruiken voor uw WordPress-berichten. Het ziet er esthetisch aantrekkelijk uit en helpt gebruikers om snel pagina's met veel inhoud te scannen. Het is met name handig voor de startpagina van tijdschrift- of nieuwswebsites.

Dat gezegd hebbende, laten we zien hoe je een oneven en even klasse toevoegt aan je berichten in WordPress-thema.

Oneven / even klasse toevoegen aan berichten in WordPress Theme

WordPress genereert standaard CSS-klassen en voegt ze on the fly aan verschillende items op uw website toe. Deze CSS-klassen helpen plug-ins en themaontwikkelaars om hun eigen stijlen voor verschillende items toe te voegen.

WordPress wordt ook geleverd met een functie genaamd post_class, die wordt gebruikt door themaontwikkelaars om klassen toe te voegen aan het berichtitem. Raadpleeg onze handleiding over hoe je elk WordPress-bericht anders indicht.

De post_class is ook een filter, wat betekent dat u uw eigen functies eraan kunt koppelen. Dit is precies wat we hier gaan doen.

Voeg deze code toe aan het functions.php-bestand van uw thema of een sitespecifieke plug-in.

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

Deze functie voegt gewoon vreemd toe aan het eerste bericht, dan even, enzovoort.

Je kunt de oneven en even klassen vinden in de broncode van je site. Neem de muis naar een berichttitel en klik met de rechtermuisknop om Inspect or Inspect Element te selecteren.

Nu je even en oneven klassen hebt toegevoegd aan je berichten. De volgende stap is om ze te stylen met behulp van CSS. U kunt uw aangepaste CSS toevoegen aan de stylesheet van uw kindthema of door Simple Custom CSS-plug-ins te gebruiken.

Hier is een voorbeeld-CSS die u als beginpunt kunt gebruiken:

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

Zo zag het er uit op onze testsite:

Als je niet weet hoe je CSS moet gebruiken, wil je misschien CSS Hero eens proberen. Hiermee kunt u CSS toevoegen aan elk deel van uw WordPress-site zonder een code te schrijven.

We hopen dat dit artikel je heeft geholpen om oneven / even les toe te voegen aan je berichten in WordPress-thema's. U kunt ook onze gids raadplegen over het indelen van uw WordPress commentaarlay-out.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.