📋 Domyślne klasy CSS WordPress — pełna ściąga 2026
Otwierają Państwo inspektor kodu na swojej stronie i widzą dziesiątki klas na <body>, .home .logged-in .single-postid-432. Nie dodawali ich Państwo ręcznie, wtyczki nie mają z tym nic wspólnego. Skąd się wzięły?
Dodał je sam WordPress. CMS automatycznie przypisuje klasy do <body>, opakowuje wpisy w post_class(), formatuje menu, widgety i komentarze, wszystko od razu po instalacji, bez ani jednej linii Państwa kodu. Problem w tym, że początkujący albo nie wiedzą o tych klasach, albo nie rozumieją, jak je wykorzystać. Efekt: kilometry zbędnego CSS tam, gdzie wystarczyłby jeden standardowy selektor.
To jest ściągawka, pełna lista klas CSS, które WordPress generuje domyślnie. Dowiedzą się Państwo, jak zaczepić się o odpowiednie strony przez klasy body, stylizować wpisy według formatu, formatować menu i widgety bez edycji HTML. Tylko to, co naprawdę przyda się podczas kodowania motywu lub dostosowywania gotowego.
💡 Szybki przegląd:
- Otwórzcie inspektor kodu na dowolnej stronie serwisu, znajdźcie na
<body>klasy.home.single.logged-ini przekonajcie się: są już w znacznikach bez Państwa udziału. - Dodajcie w
style.cssregułę.search-results .sidebar { display: none; }, sidebar zniknie tylko na stronie wyników wyszukiwania, pozostałe strony pozostaną nienaruszone. - Wywołajcie
post_class()w pętli wpisów i ostylizujcie.format-videojako szeroką kartę, a.format-imagejako kwadratową: jedna funkcja, różne formaty, różny układ. - Pogrupujcie selektory widgetów przez przecinek:
.widget_categories ul, .widget_archive ul, .widget_pages ul { list-style: none; }, cztery widgety otrzymają identyczną stylizację w jednej linii.
Jak WordPress generuje klasy CSS: body_class() i post_class()
WordPress dodaje klasy za pomocą dwóch kluczowych funkcji: body_class() oraz post_class(). Są one wbudowane w rdzeń i wywoływane przez motyw w momencie renderowania strony. Nie muszą Państwo niczego podłączać: jeśli motyw przestrzega standardów WordPressa, te funkcje już działają.
body_class() wypisuje listę klas w atrybucie class znacznika <body>. Zestaw klas zależy od tego, jaką stronę przegląda odwiedzający: główną, kategorię, wyniki wyszukiwania, wpis, archiwum. To właśnie te klasy pozwalają punktowo zmieniać tło, czcionkę lub ukrywać bloki na konkretnych stronach bez tworzenia osobnych szablonów.
post_class() robi to samo dla każdego wpisu w pętli. Zwraca klasy takie jak .format-image czy .sticky, po których odróżnia się wpis przyklejony od galerii i zmienia układ.
Obie funkcje przyjmują parametr niestandardowy: można dorzucić własną klasę. Na przykład:
1 <body <?php body_class( 'my-custom-class' ); ?>>
To doda .my-custom-class do wszystkich stron. Przydatne, gdy podłączają Państwo wspólny plik CSS i chcą mieć unikalny zaczep dla swojego stylowania.
Klasy znacznika body: pełna lista
To najbogatszy zestaw klas w WordPressie. Pod maską body_class() analizuje bieżący adres URL, typ strony, status użytkownika i wypisuje dziesiątki selektorów. Poniżej pełna lista tego, co mogą Państwo spotkać w znacznikach.
1 .rtl {} 2 .home {} 3 .blog {} 4 .archive {} 5 .date {} 6 .search {} 7 .paged {} 8 .attachment {} 9 .error404 {} 10 .single postid-(id) {} 11 .attachmentid-(id) {} 12 .attachment-(mime-type) {} 13 .author {} 14 .author-(user_nicename) {} 15 .category {} 16 .category-(slug) {} 17 .tag {} 18 .tag-(slug) {} 19 .page-parent {} 20 .page-child parent-pageid-(id) {} 21 .page-template page-template-(template file name) {} 22 .search-results {} 23 .search-no-results {} 24 .logged-in {} 25 .paged-(page number) {} 26 .single-paged-(page number) {} 27 .page-paged-(page number) {} 28 .category-paged-(page number) {} 29 .tag-paged-(page number) {} 30 .date-paged-(page number) {} 31 .author-paged-(page number) {} 32 .search-paged-(page number) {}
W praktyce najczęstszy scenariusz to stylizacja strony wyników wyszukiwania. Załóżmy, że chcą Państwo ukryć sidebar na stronie wyników. Zamiast edytować search.php, proszę dodać w style.css:
1 .search-results .sidebar { display: none; }
Klasa .search-results znajduje się na <body> tylko wtedy, gdy aktywna jest strona wyszukiwania. Na pozostałych stronach sidebar pozostanie na swoim miejscu. Ta sama zasada działa dla .error404 .archive .logged-in i każdej innej klasy z tabeli.
Proszę zwrócić uwagę na klasy dynamiczne z sufiksami: .category-(slug) .tag-(slug) .author-(user_nicename). Pozwalają one ostylizować stronę konkretnej kategorii lub autora. Na przykład .category-news .entry-title { color: red; } pokoloruje tytuły tylko w kategorii „News".
Klasy wpisów: post_class() i formaty treści
Funkcja post_class() dodaje klasy do elementu <article> lub tego znacznika, którego Państwa motyw używa do opakowania wpisu. Klasy są wypisywane w atrybucie class i zależą od typu treści.
1 .post-id {} 2 .post {} 3 .page {} 4 .attachment {} 5 .sticky {} 6 .hentry {} 7 .category-misc {} 8 .category-example {} 9 .tag-news {} 10 .tag-wordpress {} 11 .tag-markup {}
Osobną grupę stanowią klasy formatów wpisów. WordPress od razu po instalacji obsługuje formaty: image, gallery, chat, link, quote, status, video. post_class() automatycznie dodaje .format-{тип} do każdego wpisu.
1 .format-image {} 2 .format-gallery {} 3 .format-chat {} 4 .format-link {} 5 .format-quote {} 6 .format-status {} 7 .format-video {}
W praktyce wygląda to tak: wyświetlają Państwo na stronie głównej siatkę z trzema kolumnami, a dla formatu wideo chcą Państwo jedną szeroką. Rozwiązanie, jedna linia CSS:
1 .format-video { grid-column: span 3; }
Klasa .sticky oznacza przyklejone wpisy, a .hentry służy jako znacznik mikroformatu (wykorzystywany przez wyszukiwarki i parsery). Najważniejsze: nie usuwaj Pan/Pani post_class() z szablonu. Bez niej motyw traci kompatybilność z wtyczkami, które polegają na standardowym znaczniku wpisów.
Klasy menu nawigacyjnego: od kontenera do rozwijanych elementów
Kiedy tworzy Pan/Pani menu w panelu administracyjnym WordPressa, jest ono opakowywane w kontener z klasą, którą zdefiniowano podczas rejestracji menu. W poniższym przykładzie jest to main-menu. Wewnątrz znajduje się standardowe zagnieżdżenie <ul> → <li> → <a>, a każdy poziom otrzymuje własne klasy.
1 #header .main-menu {} /* контейнер меню */ 2 #header .main-menu ul {} /* первый уровень списка */ 3 #header .main-menu ul ul {} /* вложенный список (выпадающее меню) */ 4 #header .main-menu li {} /* пункт меню */ 5 #header .main-menu li a {} /* ссылка пункта */ 6 #header .main-menu li ul {} /* список выпадающих пунктов */ 7 #header .main-menu li li {} /* выпадающий пункт */ 8 #header .main-menu li li a {} /* ссылка выпадающего пункта */ 9 10 .current_page_item {} /* текущая страница */ 11 .current-cat {} /* текущая рубрика */ 12 .current-menu-item {} /* любой текущий пункт */ 13 .menu-item-type-taxonomy {} /* тип: рубрика */ 14 .menu-item-type-post_type {} /* тип: страница */ 15 .menu-item-type-custom {} /* тип: произвольная ссылка */ 16 .menu-item-home {} /* ссылка на главную */
Klasy .current_page_item, .current-cat i .current-menu-item są najbardziej przydatne. Automatycznie podświetlają aktywny element menu. Nie musi Pan/Pani pisać warunków PHP: wystarczy zdefiniować styl dla .current-menu-item a, a aktywny link zostanie wyróżniony kolorem lub podkreśleniem na każdej stronie witryny.
Klasy edytora: obrazy, galerie i podpisy
Edytor WordPressa, zarówno klasyczny TinyMCE, jak i blokowy Gutenberg, podczas wstawiania plików multimedialnych dodaje standardowe klasy do <img>, galerii i podpisów. Znając je, kontroluje Pan/Pani wyrównanie obrazów i wygląd galerii za pomocą CSS motywu.
1 .entry-content img {} 2 .alignleft, img.alignleft {} 3 .alignright, img.alignright {} 4 .aligncenter, img.aligncenter {} 5 .alignnone, img.alignnone {} 6 7 .wp-caption {} 8 .wp-caption img {} 9 .wp-caption p.wp-caption-text {} 10 11 .wp-smiley {} 12 13 blockquote.left {} 14 blockquote.right {} 15 16 .gallery dl {} 17 .gallery dt {} 18 .gallery dd {} 19 .gallery dl a {} 20 .gallery dl img {} 21 .gallery-caption {} 22 23 .size-full {} 24 .size-large {} 25 .size-medium {} 26 .size-thumbnail {}
Klasy .alignleft, .alignright, .aligncenter kontrolują opływanie. WordPress przypisuje je do <img> automatycznie, gdy użytkownik wybiera wyrównanie w edytorze. Klasy .size-full, .size-large, .size-medium, .size-thumbnail odpowiadają zarejestrowanym w motywie rozmiarom miniaturek; można za ich pomocą ustawić max-width lub promień zaokrąglenia dla obrazów o konkretnym rozmiarze.
.wp-caption i .wp-caption-text to kontener i podpis pod obrazem. W większości motywów podpis jest zaprojektowany ubogo: szara kursywa pod zdjęciem. Znając klasę, przekształca go Pan/Pani w estetyczną belkę nałożoną na zdjęcie jedną poprawką w CSS, bez wtyczek.
Klasy widżetów: wyszukiwarka, kategorie, kalendarz, chmura tagów
WordPress dostarcza zestaw standardowych widżetów: „Wyszukiwarka", „Kategorie", „Ostatnie wpisy", „Chmura tagów", „Kalendarz", „Meta", „Archiwa", „Strony", „Tekst". Każdy z nich ma własną obudowę CSS z przewidywalnymi klasami. Jeśli nie usunął Pan/Pani standardowych widżetów za pomocą unregister_widget(), są one obecne na pasku bocznym.
1 .widget {} 2 3 .widget_search {} 4 #searchform {} 5 .screen-reader-text {} 6 7 .widget_meta {} 8 .widget_meta ul {} 9 .widget_meta ul li {} 10 .widget_meta ul li a {} 11 12 .widget_links {} 13 .widget_links ul {} 14 .widget_links ul li {} 15 .widget_links ul li a {} 16 17 .widget_archive {} 18 .widget_archive ul {} 19 .widget_archive ul li {} 20 .widget_archive ul li a {} 21 .widget_archive select {} 22 .widget_archive option {} 23 24 .widget_pages {} 25 .widget_pages ul {} 26 .widget_pages ul li {} 27 .widget_pages ul li a {} 28 29 .widget_tag_cloud {} 30 .widget_tag_cloud a {} 31 .widget_tag_cloud a:after {} 32 .widget_tag_cloud a:before {} 33 34 .widget_calendar {} 35 #calendar_wrap {} 36 #calendar_wrap th {} 37 #calendar_wrap td {} 38 #wp-calendar tr td {} 39 #wp-calendar caption {} 40 #wp-calendar a {} 41 #wp-calendar #today {} 42 #wp-calendar #prev {} 43 #wp-calendar #next {} 44 #wp-calendar #next a {} 45 #wp-calendar #prev a {} 46 47 .widget_categories {} 48 .widget_categories ul {} 49 .widget_categories ul li {} 50 .widget_categories ul ul.children {} 51 .widget_categories a {} 52 .widget_categories select {} 53 .widget_categories select#cat {} 54 .widget_categories select.postform {} 55 .widget_categories option {} 56 .widget_categories .level-0 {} 57 .widget_categories .level-1 {} 58 .widget_categories .level-2 {} 59 .widget_categories .level-3 {} 60 61 .widget_recent_comments {} 62 #recentcomments {} 63 #recentcomments li {} 64 #recentcomments li a {} 65 66 .widget_recent_entries {} 67 .widget_recent_entries ul {} 68 .widget_recent_entries ul li {} 69 .widget_recent_entries ul li a {} 70 71 .widget_text {} 72 .textwidget {} 73 .textwidget p {}
Wiele klas powiela się pod względem struktury: „Kategorie", „Archiwa", „Strony" i „Ostatnie wpisy" mają identyczne zagnieżdżenie ul → li → a. W praktyce pozwala to grupować selektory za pomocą przecinka i skracać arkusz stylów:
1 .widget_categories ul, 2 .widget_archive ul, 3 .widget_pages ul, 4 .widget_recent_entries ul { 5 list-style: none; 6 padding-left: 0; 7 }
Cztery widżety, jedna linijka CSS. Bez znajomości standardowych klas pisałby Pan/Pani osobne reguły dla każdego widżetu ręcznie.
Klasy komentarzy: lista i formularz
Komentarze w WordPressie mają najbardziej rozbudowany system klas, szczególnie jeśli motyw obsługuje dyskusje drzewiaste. Dla płaskiej listy wystarczą trzy-cztery selektory, ale pełny zestaw pokrywa zagnieżdżenie, parzystość/nieparzystość, autorstwo i głębokość.
1 /* Список комментариев */ 2 .commentlist {} 3 .commentlist li {} 4 .commentlist li p {} 5 .commentlist li ul {} 6 .commentlist .reply {} 7 .commentlist .reply a {} 8 9 .commentlist .alt {} 10 .commentlist .odd {} 11 .commentlist .even {} 12 .commentlist .thread-alt {} 13 .commentlist .thread-odd {} 14 .commentlist .thread-even {} 15 16 .commentlist .vcard {} 17 .commentlist .vcard cite.fn {} 18 .commentlist .vcard span.says {} 19 .commentlist .vcard img.photo {} 20 .commentlist .vcard img.avatar {} 21 .commentlist .vcard cite.fn a.url {} 22 23 .commentlist .comment-meta {} 24 .commentlist .comment-meta a {} 25 .commentlist .commentmetadata {} 26 .commentlist .commentmetadata a {} 27 28 .commentlist .parent {} 29 .commentlist .comment {} 30 .commentlist .children {} 31 .commentlist .pingback {} 32 .commentlist .bypostauthor {} 33 .commentlist .comment-author {} 34 .commentlist .comment-author-admin {} 35 36 .commentlist li ul.children li {} 37 .commentlist li ul.children li.alt {} 38 .commentlist li ul.children li.byuser {} 39 .commentlist li ul.children li.comment {} 40 .commentlist li ul.children li.depth-{id} {} 41 .commentlist li ul.children li.bypostauthor {} 42 .commentlist li ul.children li.comment-author-admin {} 43 44 #cancel-comment-reply {} 45 #cancel-comment-reply a {} 46 47 /* Форма комментария */ 48 #respond {} 49 #reply-title {} 50 #cancel-comment-reply-link {} 51 #commentform {} 52 #author {} 53 #email {} 54 #url {} 55 #comment 56 #submit 57 .comment-notes {} 58 .required {} 59 .comment-form-author {} 60 .comment-form-email {} 61 .comment-form-url {} 62 .comment-form-comment {} 63 .form-allowed-tags {} 64 .form-submit
Najbardziej przydatne w praktyce to .bypostauthor (wyróżnia komentarze autora wpisu kolorową belką) oraz .depth-{id} (stylizacja według poziomu zagnieżdżenia). Klasy .odd/.even pozwalają pokolorować komentarze na wzór zebry dla lepszej czytelności długich dyskusji.
Wideo: jak wykorzystać standardowe klasy WordPress podczas kodowania
Analiza motywu w praktyce jest zawsze bardziej zrozumiała niż sucha ściągawka. W tym wideo pokazano, jak znajdować i stosować standardowe klasy WordPress podczas dopracowywania gotowego motywu: od inspektora kodu po poprawki w style.css.
⁉️🤔 Często zadawane pytania
Czy używanie body_class() i post_class() w swoim motywie jest obowiązkowe?
Tak, jeśli tworzą Państwo motyw do publicznej dystrybucji. Jest to wymóg standardów WordPress Theme Review: bez
body_class()ipost_class()motyw nie przejdzie weryfikacji w katalogu WordPress.org. W przypadku niestandardowego motywu na własne potrzeby nie jest to obowiązkowe, ale te funkcje oszczędzają godziny pracy podczas stylizacji poszczególnych stron i typów wpisów.
Czy można dodać własną klasę do body lub wpisu?
Można. Proszę przekazać ciąg znaków z klasą w wywołaniu funkcji:
body_class('my-theme-body')doda.my-theme-bodydo znacznika<body>. Analogicznie działapost_class('featured'), klasa.featuredpojawi się w wybranych wpisach. Kilka klas przekazuje się jako tablicę:post_class( array( 'featured', 'no-sidebar' ) ).
Czy klasy ze ściągawki są aktualne dla Gutenberga?
Tak. Chociaż Gutenberg zmienił edytor, frontendowy znacznik WordPress pozostał taki sam.
body_class()ipost_class()działają niezależnie od edytora, a klasy.align*.wp-captioni galerii Gutenberg również używa. Klasy widżetów są aktualne dla klasycznych widżetów; w przypadku bloków w pasku bocznym struktura różni się, ale podstawowy.widgetzostaje zachowany.
Gdzie dodawać własny CSS: w style.css motywu czy w ustawieniach customizera?
W przypadku poprawek wykorzystujących standardowe klasy WordPress najbezpieczniej jest użyć
style.cssmotywu potomnego. Dodatkowy CSS w customizerze (Wygląd → Dostosuj → Dodatkowy CSS) również działa, ale jest powiązany z aktywnym motywem i zapisywany w bazie danych, a przy zmianie motywu style są tracone. Jeśli rozbudowują Państwo cudzy motyw, proszę utworzyć motyw potomny i tam wprowadzać poprawki.
Co zrobić, jeśli motyw nie wyświetla standardowych klas?
Proszę sprawdzić
header.phppod kątem obecnościbody_class()wewnątrz znacznika<body>. Jeśli wywołanie jest nieobecne, należy je dodać. Analogicznie w szablonach pętli:post_class()powinno znajdować się w atrybucieclasselementu opakowującego wpis. W komercyjnych motywach zdarza się to rzadko, ale w starych lub samodzielnie pisanych motywach występuje regularnie.
Co przede wszystkim wynieść z tej ściągawki
Jeśli stworzyli Państwo jeden lub dwa motywy i nie chcą zapamiętywać wszystkich klas, proszę zapamiętać trzy główne rzeczy.
Pierwsze. body_class(), to Pana/Pani główne narzędzie do stylizacji konkretnych stron. .home .single .category-slug .logged-in pokrywają większość zadań związanych z dostosowywaniem bez edycji szablonów.
Drugie. post_class() z formatami (.format-video .format-gallery) pozwala stworzyć siatkę wpisów, gdzie każdy format wygląda inaczej, bez wtyczek i zbędnych warunków w pętli.
Trzecie. Standardowe klasy widżetów (ul → li → a) są takie same we wszystkich widżetach. Proszę grupować selektory po przecinku, a Pana/Pani style.css będzie dwukrotnie krótszy.
Proszę zapisać tę ściągawkę w zakładkach. Gdy następnym razem otworzą Państwo inspektor kodu i zobaczą nieznaną klasę na <body>, będą Państwo wiedzieć, skąd się wzięła i jak jej używać.
Profesjonalny zespół autorów i redaktorów specjalizujących się w tworzeniu treści wysokiej jakości.