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

Jak dodać klasę nieparzystą/parzystą do twojego wpisu w motywie WordPress?

Chcesz dodać odrobinę wizualnego zainteresowania do twoich wpisów na blogu WordPress? Dodawanie nieparzystych i parzystych klas może pomóc w uzyskaniu unikatowego i wciągającego projektu poprzez stylizowanie każdego wpisu w inny sposób.

Często otrzymujemy pytania od naszych czytelników o to, jak zastosować tę technikę. Podczas gdy wiele motywów WordPress nie oferuje wbudowanej opcji dla nieparzystych i parzystych klas wpisów, ich samodzielne dodanie jest stosunkowo prostym procesem.

W tym artykule pokażemy, jak dodać nieparzystą/nieparzystą klasę do twojego wpisu w motywie WordPress.

Adding Odd/Even class to your posts in WordPress themes

Dlaczego warto dodać klasę nieparzystą/parzystą do twoich wpisów w motywie WordPress?

Wiele motywów WordPress używa nieparzystej lub parzystej klasy dla komentarzy WordPress. Pomaga to użytkownikom wizualizować, gdzie kończy się jeden komentarz, a zaczyna następny.

Podobnie, możesz użyć tej techniki dla twoich wpisów WordPress. Wygląda estetycznie i pomaga użytkownikom szybko skanować strony z dużą ilością treści. Jest to szczególnie pomocne w przypadku stron głównych witryn internetowych z czasopismami lub wiadomościami.

Powiedziawszy to, zobaczmy, jak dodać nieparzystą i parzystą klasę do twoich wpisów w motywie WordPress.

Dodawanie klas nieparzystych/parzystych do wpisów w motywie WordPressa

WordPress generuje domyślne klasy CSS i dodaje je do różnych elementów na twojej witrynie internetowej w locie. Te klasy CSS pomagają twórcom wtyczek i motywów dodawać własne style dla różnych elementów.

WordPress posiada również funkcję o nazwie post_class, która jest używana przez twórców motywów do dodawania klas do wpisów. Zobacz nasz przewodnik na temat tego, jak nadać inny styl każdemu wpisowi WordPress.

Post_class jest również filtrem, co oznacza, że możesz podpiąć do niego twoje własne funkcje. Dokładnie to będziemy tutaj robić.

Wystarczy dodać ten kod do pliku functions. php twojego motywu, we wtyczce specyficznej dla witryny lub we wtyczce fragmentów kodu.

1
2
3
4
5
6
7
8
9
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';

Zalecamy dodanie tego kodu za pomocą wtyczki WPCode. Jest to najlepsza wtyczka do fragmentów kodu, która umożliwia bezpieczne i łatwe dodawanie własnego kodu w WordPress.

WPCode

Aby rozpocząć, należy zainstalować i włączyć darmową wtyczkę WPCode. Instrukcje można znaleźć w tym przewodniku na temat instalacji wtyczki WordPress.

Po włączaniu, przejdź do strony Code Snippets ” + Add Snippet z kokpitu WordPress.

Następnie kliknij przycisk „+ Add Custom Snippet” pod opcją „Add Your Custom Code (New Snippet)”.

Adding Custom Code in WPCode

Następnie należy wybrać rodzaj kodu z listy opcji, która pojawi się na ekranie.

W tym poradniku jako rodzaj kodu wybierz „Fragment kodu PHP”.

Select PHP Snippet as the code type

Zostaniesz przekierowany na stronę Create Custom Snippet.

W tym miejscu dodaj tytuł dla twojego fragmentu kodu, który może być dowolny, aby pomóc ci zapamiętać, do czego służy kod.

Następnie wklej powyższy kod w polu „Podgląd kodu”.

Paste the code to add odd/even class to your posts

Gdy to zrobisz, po prostu przełącz przełącznik z „Nieaktywny” na „Aktywny” i kliknij przycisk „Zapisz fragment kodu”.

Activate and save your custom code snippet

Ta funkcja po prostu dodaje nieparzyste do pierwszego wpisu, potem parzyste itd.

Klasy nieparzyste i parzyste można znaleźć w kodzie źródłowym twojej witryny. Wystarczy najechać myszką na tytuł wpisu, a następnie kliknąć prawym przyciskiem myszy i wybrać opcję Inspect lub Inspect Element.

Odd and Even classes in source code

Teraz, gdy dodałeś już parzyste i nieparzyste klasy do twoich wpisów. Następnym krokiem jest nadanie im stylu za pomocą CSS. Możesz dodać własny CSS do arkusza stylów motywu potomnego, konfiguratora motywu lub za pomocą wtyczki WPCode.

Oto przykładowy CSS, który można wykorzystać jako punkt wyjścia:

1
2
3
4
5
6
.even {
background:#f0f8ff
}
.odd {
 background:#f4f4fb;
}

Tak to wyglądało na naszej witrynie testowej:

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

Jeśli nie wiesz, jak korzystać z CSS, możesz zapoznać się z naszym przewodnikiem na temat tego, jak łatwo dodać własny CSS do twojej witryny WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać klasę nieparzystą/nieparzystą do twoich wpisów w motywach WordPress. Warto również zapoznać się z naszym przewodnikiem na temat tego, jak stylizować twój układ komentarzy w WordPressie oraz z naszym wyborem najlepszych kreatorów stron WordPress.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial 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.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

16 komentarzyLeave a Reply

  1. Sarmad Gardezi

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

    • WPBeginner Support

      It should automatically affect custom post types :)

      Admin

  2. 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 :)

      Admin

  3. Oliur

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

  4. kaluan

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

  5. onkar

    how to add odd even class in posts for particular page

  6. Bucur

    Ok good function, but css style?

    . post {
    / / Rest of the css
    }

    .odd { } ???

  7. Simon

    Thanks for this. Just what I needed.

  8. 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!

  9. Eric

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

  10. 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.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.