📋 CSS-классы WordPress по умолчанию — полная шпаргалка 2026
Открываете инспектор кода на своём сайте и видите десятки классов на <body>, .home .logged-in .single-postid-432. Вы их не прописывали, плагины ни при чём. Откуда они?
Их добавил сам WordPress. CMS автоматически вешает классы на <body>, оборачивает записи в post_class(), размечает меню, виджеты и комментарии, всё из коробки, без единой строчки вашего кода. Проблема в том, что новички либо не знают об этих классах, либо не понимают, как их применить. Результат: километры лишнего CSS там, где хватило бы одного стандартного селектора.
Эта шпаргалка, полный список CSS-классов, которые WordPress генерирует по умолчанию. Вы узнаете, как цепляться к нужным страницам через body-классы, стилизовать записи по формату, оформлять меню и виджеты без правки HTML. Только то, что реально пригодится при вёрстке темы или доработке готовой.
💡 Быстрый обзор:
- Откройте инспектор кода на любой странице сайта, найдите на
<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 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 {}
Классы .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>, вы будете знать, откуда он взялся и как его использовать.
Профессиональная команда авторов и редакторов, специализирующихся на создании качественного контента.