W artykule:
Czy chcesz dodać dziwne i równe klasy do postów w swoim szablonie WordPress? Dodanie nieparzystej i parzystej klasy pozwala na inny styl każdego postu. W tym artykule pokażemy, jak dodać nieparzystą / parzystą klasę do swojego postu w WordPress themes.
Po co dodawać nieparzyste / parzyste klasy do swoich postów w WordPress Themes?
Wiele motywów WordPress używa starej lub nawet klasy do komentarzy WordPress. Pomaga użytkownikom wizualizować, gdzie kończy się jeden komentarz, a zaczyna następny.
Podobnie możesz użyć tej techniki do swoich postó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 strony głównej czasopism lub serwisów informacyjnych.
Powiedziawszy to, zobaczmy, jak dodać dziwną i równą klasę do swoich postów w motywie WordPress.
Dodawanie nieparzystej / parzystej klasy do postów w motywie WordPress
WordPress generuje domyślne klasy CSS i dodaje je do różnych elementów w Twojej witrynie w locie. Te klasy CSS pomagają programistom wtyczek i motywów dodawać własne style dla różnych elementów.
WordPress jest również wyposażony w funkcję o nazwie post_class, który jest używany przez twórców motywów do dodawania klas do elementu post. Zobacz nasz przewodnik, jak stylować każdy post WordPress inaczej.
Na post_class jest również filtrem, co oznacza, że można do niego podłączyć własne funkcje. Właśnie to będziemy tutaj robić.
Po prostu dodaj ten kod do funkcji motywu.plik php lub wtyczka specyficzna dla witryny.
function oddeven_post_class ($classes ) {
global $current_class;
$classes [] = $current_class;
$current_class = ($current_class == 'nieparzyste') ? "even": "nieparzyste";
return $ classes;
}
add_filter ('post_class', 'oddeven_post_class');
global $current_class;
$current_class = 'nieparzyste';
Ta funkcja po prostu dodaje nieparzyste do pierwszego postu, potem parzyste i tak dalej.
Możesz znaleźć Nieparzyste i Parzyste klasy w kodzie źródłowym witryny. Po prostu przenieś mysz do tytułu postu, a następnie kliknij prawym przyciskiem myszy, aby wybrać Inspect lub Inspect Element.
Teraz, gdy dodałeś parzyste i nieparzyste klasy do swoich postów. Następnym krokiem jest stylowanie ich za pomocą CSS. Możesz dodać niestandardowy CSS do arkusza stylów motywu podrzędnego lub za pomocą prostej niestandardowej wtyczki CSS.
Oto przykładowy CSS, którego możesz użyć jako punktu wyjścia:
.even {
background: # f0f8ff;
}
.odd {
background:#f4f4fb;
}
Tak to wyglądało na naszej stronie testowej:
Jeśli nie wiesz, jak używać CSS, możesz sprawdzić CSS Hero. Pozwala dodać CSS do dowolnej części witryny WordPress bez pisania kodu.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać dziwną / parzystą klasę do swoich postów w WordPress themes. Możesz również zobaczyć nasz przewodnik, jak stylizować układ komentarzy WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
