Skip to content

Все для WordPress, веб-розробки — і не тільки

📋 CSS-класи WordPress за замовчуванням — повна шпаргалка 2026
Теми WordPressWordPress
7 хв1,373 слів

📋 CSS-класи WordPress за замовчуванням — повна шпаргалка 2026

Відкриваєте інспектор коду на своєму сайті й бачите десятки класів на <body>, .home .logged-in .single-postid-432. Ви їх не прописували, плагіни тут ні до чого. Звідки вони?

Їх додав сам WordPress. CMS автоматично вішає класи на <body>, обгортає записи в post_class(), розмічає меню, віджети й коментарі, все з коробки, без жодного рядка вашого коду. Проблема в тому, що новачки або не знають про ці класи, або не розуміють, як їх застосувати. Результат: кілометри зайвого CSS там, де вистачило б одного стандартного селектора.

Ця шпаргалка, повний список CSS-класів, які WordPress генерує за замовчуванням. Ви дізнаєтеся, як чіплятися до потрібних сторінок через body-класи, стилізувати записи за форматом, оформлювати меню та віджети без правок HTML. Лише те, що справді знадобиться під час верстання теми або доопрацювання готової.

HTML і CSS код на екрані монітора

💡 Швидкий огляд:

  • Відкрийте інспектор коду на будь-якій сторінці сайту, знайдіть на <body> класи .home .single .logged-in і переконайтеся: вони вже є в розмітці без вашої участі.
  • Додайте в style.css правило .search-results .sidebar { display: none; }, сайдбар зникне лише на сторінці пошуку, решта сторінок не зачеплені.
  • Виведіть post_class() у циклі записів і оформіть .format-video широкою карткою, а .format-image квадратною: одна функція, різні формати, різне верстання.
  • Згрупуйте селектори віджетів через кому: .widget_categories ul, .widget_archive ul, .widget_pages ul { list-style: none; }, чотири віджети отримають однакову стилізацію одним рядком.

Як WordPress генерує CSS-класи: body_class() і post_class()

WordPress додає класи через дві ключові функції: body_class() та post_class(). Вони вбудовані в ядро й викликаються темою в момент рендерингу сторінки. Вам не потрібно нічого підключати: якщо тема дотримується стандартів WordPress, ці функції вже працюють.

body_class() виводить список класів в атрибут class тега <body>. Набір класів залежить від того, яку сторінку переглядає відвідувач: головна, рубрика, пошук, запис, архів. Саме ці класи дають змогу точково змінювати фон, шрифт або приховувати блоки на конкретних сторінках без створення окремих шаблонів.

post_class() робить те саме для кожного запису в циклі. Вона повертає класи на кшталт .format-image або .sticky, за ними відрізняють приліплений запис від галереї та змінюють верстку.

Обидві функції приймають користувацький параметр: можна докинути свій клас. Наприклад:

1<body <?php body_class( 'my-custom-class' ); ?>>

Це додасть .my-custom-class до всіх сторінок. Корисно, коли підключаєте спільний CSS-файл і хочете мати унікальний хук для свого оформлення.

Класи тега body: повний список

Це найбагатший набір класів у WordPress. Під капотом body_class() аналізує поточну URL-адресу, тип сторінки, статус користувача й виводить десятки селекторів. Нижче, повний перелік того, що ви можете зустріти в розмітці.

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) {}

На практиці найчастіший сценарій, стилізація сторінки пошуку. Припустімо, ви хочете приховати сайдбар на видачі. Замість правок search.php додайте в style.css:

1.search-results .sidebar { display: none; }

Клас .search-results висить на <body> лише коли активна сторінка пошуку. На решті сторінок сайдбар залишиться на місці. Той самий принцип працює для .error404 .archive .logged-in і будь-якого іншого класу з таблиці.

Зверніть увагу на динамічні класи із суфіксами: .category-(slug) .tag-(slug) .author-(user_nicename). Вони дають змогу оформити сторінку конкретної рубрики або автора. Наприклад, .category-news .entry-title { color: red; } пофарбує заголовки лише в рубриці «News».

Класи записів: post_class() і формати контенту

Функція post_class() додає класи до елемента <article>, або того тега, який ваша тема використовує для обгортання запису. Класи виводяться в атрибут class і залежать від типу контенту.

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 {}

Окрема група, класи форматів записів. WordPress з коробки підтримує формати: image, gallery, chat, link, quote, status, video. post_class() автоматично додає .format-{тип} до кожного запису.

1.format-image {}
2.format-gallery {}
3.format-chat {}
4.format-link {}
5.format-quote {}
6.format-status {}
7.format-video {}

На практиці це виглядає так: виводите на головній сітку з трьох колонок, а для відеоформату хочете одну широку. Рішення, один рядок CSS:

1.format-video { grid-column: span 3; }

Клас .sticky позначає приліплені записи, а .hentry слугує мікроформатним маркером (використовується пошуковиками та парсерами). Головне: не видаляйте post_class() із шаблону. Без неї тема втрачає сумісність із плагінами, які покладаються на стандартну розмітку записів.

Класи меню навігації: від контейнера до випадних пунктів

Коли ви створюєте меню в адмінці WordPress, воно обгортається в контейнер із класом, який ви задали під час реєстрації меню. У прикладі нижче це main-menu. Всередині, стандартна вкладеність <ul> → <li> → <a>, і кожен рівень отримує свої класи.

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 {}                  /* ссылка на главную */

Класи .current_page_item .current-cat і .current-menu-item, найкорисніше. Вони автоматично підсвічують активний пункт меню. Вам не потрібно писати PHP-умови: достатньо задати стиль для .current-menu-item a, і активне посилання виділиться кольором або підкресленням на будь-якій сторінці сайту.

Класи редактора: зображення, галереї та підписи

Редактор WordPress, і класичний TinyMCE, і блочний Gutenberg, під час вставлення медіафайлів додає стандартні класи до <img>, галерей і підписів. Знаючи їх, ви керуєте вирівнюванням зображень та оформленням галерей через CSS теми.

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 
13blockquote.left {}
14blockquote.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 {}

Класи .alignleft .alignright .aligncenter керують обтіканням. WordPress вішає їх на <img> автоматично, коли користувач обирає вирівнювання в редакторі. Класи .size-full .size-large .size-medium .size-thumbnail відповідають зареєстрованим у темі розмірам мініатюр, за ними можна задати max-width або радіус заокруглення для зображень конкретного розміру.

.wp-caption і .wp-caption-text, контейнер і підпис до зображення. У більшості тем підпис оформлено бідно: сірий курсив під зображенням. Знаючи клас, ви перетворюєте його на акуратну плашку поверх фото однією правкою CSS, без плагінів.

Класи віджетів: пошук, рубрики, календар, хмара тегів

WordPress постачає набір стандартних віджетів: «Пошук», «Рубрики», «Свіжі записи», «Хмара міток», «Календар», «Мета», «Архіви», «Сторінки», «Текст». У кожного, своя CSS-обгортка з передбачуваними класами. Якщо ви не видаляли стандартні віджети через unregister_widget(), вони присутні в сайдбарі.

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 {}

Багато класів дублюються за структурою: у «Рубрик», «Архівів», «Сторінок» і «Свіжих записів» ідентична вкладеність ul → li → a. На практиці це дозволяє групувати селектори через кому та скорочувати таблицю стилів:

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}

Чотири віджети, один рядок CSS. Без знання стандартних класів ви писали б окремі правила для кожного віджета вручну.

Класи коментарів: список і форма

Коментарі у WordPress мають найрозлогішу систему класів, особливо якщо тема підтримує деревоподібні обговорення. Для плаского списку вистачить трьох-чотирьох селекторів, але повний набір покриває вкладеність, парність/непарність, авторство та глибину.

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

Найкорисніші на практиці, .bypostauthor (виділяє коментарі автора допису кольоровою плашкою) та .depth-{id} (стилізація за рівнем вкладеності). Класи .odd/.even дозволяють розфарбувати коментарі зеброю для кращої читабельності довгих обговорень.

Відео: як використовувати стандартні класи WordPress під час верстання

Розбір теми на практиці завжди зрозуміліший за суху шпаргалку. У цьому відео показано, як знаходити та застосовувати стандартні класи WordPress під час доопрацювання готової теми: від інспектора коду до правок у style.css.

⁉️🤔 Часті запитання

Чи обов’язково використовувати body_class() і post_class() у своїй темі?

Так, якщо ви розробляєте тему для публічного розповсюдження. Це вимога стандартів WordPress Theme Review: без body_class() і post_class() тема не пройде перевірку в директорії WordPress.org. Для кастомної теми під себе не обов’язково, але ці функції заощаджують години роботи під час стилізації окремих сторінок і типів записів.

Чи можна додати свій клас до body або запису?

Можна. Передайте рядок із класом у виклик функції: body_class('my-theme-body') додасть .my-theme-body до тегу <body>. Аналогічно працює post_class('featured'), клас .featured з’явиться у вибраних записів. Кілька класів передаються масивом: post_class( array( 'featured', 'no-sidebar' ) ).

Класи зі шпаргалки актуальні для Gutenberg?

Так. Хоча Gutenberg змінив редактор, фронтенд-розмітка WordPress залишилася такою самою. body_class() і post_class() працюють незалежно від редактора, а класи .align* .wp-caption і галерей Gutenberg також використовує. Класи віджетів актуальні для класичних віджетів; для блоків у сайдбарі структура відрізняється, але базовий .widget зберігається.

Де додавати свій CSS: у style.css теми чи в налаштуваннях кастомайзера?

Для правок, які використовують стандартні класи WordPress, найбезпечніше style.css дочірньої теми. Додатковий CSS у кастомайзері (Appearance → Customize → Additional CSS) теж працює, але він прив’язаний до активної теми та зберігається в базі даних, і зі зміною теми стилі втрачаються. Якщо допрацьовуєте чужу тему, створіть дочірню та правте там.

Що робити, якщо тема не виводить стандартні класи?

Перевірте header.php на наявність body_class() усередині тегу <body>. Якщо виклик відсутній, додайте. Аналогічно в шаблонах циклу: post_class() має бути в атрибуті class обгорткового елемента запису. У комерційних темах таке трапляється рідко, але в старих або самописних темах зустрічається регулярно.

Що взяти з цієї шпаргалки насамперед

Якщо ви зверстали одну-дві теми й не хочете запам’ятовувати всі класи, запам’ятайте три головні речі.

Перше. body_class(), ваш головний інструмент для стилізації конкретних сторінок. .home .single .category-slug .logged-in покривають більшість задач з кастомізації без правлення шаблонів.

Друге. post_class() із форматами (.format-video .format-gallery) дає змогу зробити сітку записів, де кожен формат виглядає по-своєму, без плагінів і зайвих умов у циклі.

Третє. Стандартні класи віджетів (ul → li → a) в усіх віджетів однакові. Групуйте селектори через кому, і ваш style.css буде вдвічі коротшим.

Збережіть цю шпаргалку в закладки. Коли наступного разу відкриєте інспектор коду й побачите незнайомий клас на <body>, ви знатимете, звідки він узявся і як його використовувати.

Редакція
РедакціяРедакційна команда→ Усі публікації

Професійна команда авторів та редакторів, що спеціалізуються на створенні якісного контенту.