Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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.

Adding Odd/Even class to your posts in WordPress themes

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.

WPCode

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)”.

Add a new custom code snippet in WPCode

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.

Paste code snippet into WPCode plugin

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

Activate and save your custom code 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.

Odd and Even classes in source code

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:

Posts using alternate background colors with even/odd css classes in WordPress

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

17 kommentarerLämna ett svar

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Sarmad Gardezi

    I want to use it with CPT then how i can use it ?

    • WPBeginner Support

      It should automatically affect custom post types :)

      Administratör

  3. Vera

    Hello,
    I was trying to make this work on my test site, where I work with Elementor and Astra. For some reason, once I add the code – everything colors with the ”odd” color, and I don’t understand why.
    Can you help me sort it out, please?
    Vera

    • WPBeginner Support

      For that question, you would want to check with Elementor to ensure their page builder is not overriding the function and they should be able to assist :)

      Administratör

  4. Oliur

    My Blog Name WayTrick. It a Blogger Blog. Now I want to my blog Tansfer to wordpress. How do it?

  5. kaluan

    This seems not working in Genesis framework? Any additional code needed to add?

  6. onkar

    how to add odd even class in posts for particular page

  7. Bucur

    Ok good function, but css style?

    . post {
    / / Rest of the css
    }

    .odd { } ???

  8. Simon

    Thanks for this. Just what I needed.

  9. Samuel

    How could I take this a step further and target a specific post category?

    I have a custom post type – testimonial, and I only want odd/even styling in that section.

    Thanks!

  10. Eric

    This is by far the easiest method of creating odd and even posts for wordpress!! Thanks so much for sharing!

  11. Christine

    As, sadly, css3 selectors are not well supported by all browsers…

    I just tried your code for a new twenty eleven child theme i’m customizing, it works so fine,

    Thanks a Lot for sharing this ! !

    • wpbeginner

       @Daniele Zamboni These are CSS classes that you can add for styling purposes.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.