Czy chcesz dodać nieparzyste i parzyste zajęcia do artykułów na temat Twojego blog WordPress ? Dodanie klasy pozwoli wyświetlić określony styl dla każdego artykułu.
W tym samouczku pokażemy, jak wyświetlać parzyste lub nieparzyste klasy w WordPress.
Po co dodawać zajęcia? paires "Lub" nieparzysty » na temat Twojego blog WordPress ?
Wiele Motywy WordPress użyj starej lub tej samej klasy do komentarzy WordPress. Pozwala użytkownikom zobaczyć, gdzie kończy się jeden komentarz, a zaczyna drugi.
Podobnie możesz użyć tej techniki w swoich artykułach. Wygląda estetycznie, umożliwiając użytkownikom szybkie skanowanie dużych stron. Jest to szczególnie przydatne na stronach głównych gazet lub czasopism.
To powiedziawszy, zobaczymy, jak dodać klasę do artykułów twojego blog WordPress.
Jak dodać klasę parzystą / nieparzystą na WordPress
WordPress generuje domyślne klasy CSS i dodaje je do różnych artykułów na Twojej stronie w locie. Te klasy CSS pomagają twórcom wtyczek i motywów dodawać własne style do każdego innego artykułu.
WordPress oferuje również funkcję o nazwie „ post_class Który jest używany przez twórców motywów do dodawania klas do artykułów.
Funkcja post_class Jest także filtrem, co oznacza, że możesz nim manipulować. Właśnie to tutaj zrobimy.
Po prostu dodaj ten kod do pliku functions.php. WordPress.
function oddeven_post_class ($ classes) {global $ current_class; $ classes [] = $ current_class; $ current_class = ($ current_class == 'odd')? "even": "nieparzysty"; return $ classes; } add_filter ('post_class', "oddeven_post_class '); global $ current_class; $ current_class = 'odd';
Ta funkcja po prostu dodaje klasę do nieparzystych i równych elementów.
W kodzie źródłowym swojej witryny znajdziesz nieparzyste i parzyste klasy. Po prostu najedź myszą na tytuł artykułu, a następnie kliknij prawym przyciskiem myszy, aby sprawdzić element.
Teraz, gdy dodałeś do artykułów klasy nieparzyste i parzyste. Następnym krokiem jest nadanie im unikalnego stylu za pomocą CSS. Możesz dodać własny kod CSS do motywu potomnego lub za pomocą prostej wtyczki CSS.
Oto przykład kodu CSS, którego można użyć jako punktu wyjścia:
.even {background: #f0f8ff; } .odd {background: #f4f4fb; }
Oto jak wynik może być:
Będziesz potrzebował trochę praktyki, aby uzyskać dobre wyniki, ale do tego będziesz musiał opanować CSS lub po prostu użyć narzędzia takiego jak CSS Hero.
To takie proste. Mam nadzieję, że ten poradnik będzie ci bardzo pomocny. Zachęcamy do zadawania nam pytań lub udostępniania tego samouczka znajomym w ulubionych sieciach społecznościowych.
