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 dotyczące stosowania tej techniki. Podczas gdy wiele motywów WordPress nie oferuje wbudowanej opcji dla nieparzystych i parzystych klas wpisów, jest to stosunkowo prosty proces, aby dodać je samodzielnie.

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

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.

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.

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 Fragmenty kodu ” + Dodaj fragment z kokpitu WordPress. Następnie kliknij przycisk „Use Snippet” pod opcją „Add Your Custom Code (New Snippet)”.

Następnie 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” i wybierz „Fragment kodu PHP” jako rodzaj kodu z rozwijanej listy po prawej stronie.

Następnie wystarczy przełączyć przełącznik z „Nieaktywny” na „Aktywny” i kliknąć przycisk „Zapisz fragment kodu”.

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.

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:

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

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

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.