Så här addar du udda/jämn klass till din post i WordPress Themes

Vill du lägga till en touch av visuellt intresse till dina WordPress-blogginlägg? Genom att lägga till udda och jämna klasser kan du skapa en unik och engagerande design genom att utforma vartannat inlägg på ett annorlunda sätt.

Vi får ofta frågor från våra läsare om hur man tillämpar denna teknik. Även om många WordPress-teman inte erbjuder ett inbyggt alternativ för udda och jämna inläggsklasser, är det en relativt enkel process att lägga till dem själv.

I den här artikeln visar vi dig hur du lägger till udda/jämn klass i ditt inlägg i WordPress-teman.

Varför Add Odd/Even Class till dina publicerade posts i WordPress Themes?

Många WordPress teman använder en udda eller jämn klass för WordPress comments. Det hjälper användare att visualisera var en comment slutar och nästa börjar.

På samma sätt kan du använda den här tekniken för dina WordPress posts. Det ser estetiskt tilltalande ut och hjälper användare att snabbt skanna sidor med mycket content. Den är viss användbar på homepage för magasin eller news websites.

Med detta sagt, låt oss se hur man addar en udda och jämn klass till dina posts i WordPress theme.

Lägga till udda/jämn klass till posts i WordPress Theme

WordPress genererar standard CSS-klasser och adderar dem till olika objekt på din website i farten. Dessa CSS-klasser hjälper utvecklare av plugins och teman att lägga till sina egna stilar för olika objekt.

WordPress levereras också med en funktion som anropas post_class, som används av utvecklare av teman för att add to klasser till objektet post. Se vår guide om hur du utformar varje post i WordPress på olika sätt.

Post_class är också ett filter, vilket innebär att du kan åtgärds-hooka dina egna funktioner till det. Det är precis vad vi kommer att göra här.

Lägg bara till den här koden i functions.php-filen i your theme, i ett site-specifikt plugin eller i ett code snippets plugin.

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';

Vi rekommenderar att du lägger till den här koden med hjälp av WPCode plugin. Det är det bästa code snippets plugin som gör det säkert och enkelt att add to custom code i WordPress.

För att börja måste du installera och aktivera det gratis WPCode plugin. För instruktioner, se den här guiden om hur du installerar ett plugin för WordPress.

Efter aktivering, gå till Code Snippets ” + Add Snippet page från WordPress dashboard. Klicka sedan på knappen ”Use Snippet” under alternativet ”Add Your Custom Code (New Snippet)”.

From there, add a title for your code snippet, which can be anything to help you remember what the code is for.

Därefter klistrar du in koden ovan i boxen ”Code Preview” och väljer ”PHP Snippet” som code type från dropdown-listan till höger.

Efter det är det bara att toggla från ”Activate” till ”Inaktiverad” och clicka på knappen ”Save Snippet”.

Denna funktion adderar helt enkelt udda till den första posten, sedan jämnt och så vidare.

Du kan hitta de udda och jämna klasserna i källkoden på din webbplats. Ta bara musen till en post rubrik och högerklicka sedan för att välja Inspektera eller Inspektera element.

Nu när du har add to even och odd klasser till dina posts. Nästa steg är att styla dem med hjälp av CSS. Du kan lägga till din anpassade CSS i ditt barntemas stylesheet, i temats customizer eller genom att använda pluginet WPCode.

Här är ett exempel på CSS som du kan använda som utgångspunkt:

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

Så här såg det ut på vår test site:

Om du inte vet hur man använder CSS, kanske du vill kontrollera vår guide om hur man enkelt lägger till custom CSS på din WordPress site.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du addar udda/jämn klass till dina posts i WordPress teman. You may also want to see our guide on how to style your WordPress comments layout and our expert picks of the best WordPress page builders.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.