Стандартный календарь WordPress, та деталь, которая выдаёт тему-полуфабрикат за первые три секунды. Плотная таблица без отступов, серый фон по умолчанию, слипшийся текст в ячейках. Разработчик темы потратил неделю на шрифты и цвета, а про #wp-calendar забыл.

Двадцать строк CSS меняют всё. Ниже, код, который можно скопировать в любой проект, и построчный разбор: чтобы вы не просто вставили, а понимали, что делает каждый селектор.

💡 Быстрый обзор:

• Готовый CSS для #wp-calendar, один блок, копируется целиком
• Куда вставить код: Customizer, плагин для сниппетов или дочерняя тема
• Что делать, если CSS не сработал, специфичность и как её «перебить»
• Почему тень на скриншоте, только для статьи, в реальном коде её нет

Как устроен виджет календаря

Прежде чем копировать код, коротко о структуре. WordPress генерирует для виджета такую разметку:

• .widget_calendar, контейнер виджета в сайдбаре
• #wp-calendar, сама таблица (у каждого виджета свой id)
• #wp-calendar caption, название месяца (заголовок таблицы)
• #wp-calendar thead th, сокращённые названия дней недели
• #wp-calendar tbody td, ячейки дней; даты с постами становятся ссылками
• #wp-calendar tbody .pad, пустые ячейки до первого и после последнего дня
• #wp-calendar tfoot #prev / #next, ссылки на предыдущий и следующий месяц

Эти классы не менялись годами и работают во всех версиях WordPress от 5.0 до последних релизов. Никакой магии, только стандартная разметка ядра.

Короткое видео по теме, как добавить и настроить виджет календаря в админке:

Готовый CSS: копируем и вставляем

Добавьте этот код в стили темы. Результат, светлая таблица с серыми ячейками, белым hover-эффектом и отключённым фоном у пустых дней.

1
/* calendar widget — минималистичная стилизация */
2
.widget_calendar {float: left;}
3
#wp-calendar {width: 100%;}
4
#wp-calendar caption {
5
    text-align: right;
6
    color: #333;
7
    font-size: 12px;
8
    margin-top: 10px;
9
    margin-bottom: 15px;
10
}
11
#wp-calendar thead {font-size: 10px;}
12
#wp-calendar thead th {padding-bottom: 10px;}
13
#wp-calendar tbody {color: #aaa;}
14
#wp-calendar tbody td {
15
    background: #f5f5f5;
16
    border: 1px solid #fff;
17
    text-align: center;
18
    padding: 8px;
19
}
20
#wp-calendar tbody td:hover {background: #fff;}
21
#wp-calendar tbody .pad {background: none;}
22
#wp-calendar tfoot #next {
23
    font-size: 10px;
24
    text-transform: uppercase;
25
    text-align: right;
26
}
27
#wp-calendar tfoot #prev {
28
    font-size: 10px;
29
    text-transform: uppercase;
30
    padding-top: 10px;
31
}

Разбор по группам:

Контейнер и ширина. .widget_calendar {float: left;} предотвращает коллизии обтекания в узких сайдбарах. #wp-calendar {width: 100%;} заставляет таблицу растянуться на всю ширину родителя, без этого календарь ведёт себя как inline-элемент и сжимается до ширины содержимого. Подробнее о CSS в WordPress.

Заголовок месяца. caption выровнен вправо, тёмно-серый цвет и отступы сверху-снизу. Месяц читается как подпись к таблице, а не как бесхозный текст.

Шапка с днями недели. thead и th, мелкий шрифт 10px и отступ снизу. Сокращённые названия дней (Пн, Вт, Ср) не перетягивают внимание на себя.

Ячейки дней. Основной цвет текста #aaa, приглушённый серый. Каждая ячейка получает подложку #f5f5f5 и белую рамку, которая визуально разделяет дни. padding: 8px даёт воздух вокруг чисел. При наведении ячейка становится белой, простой и понятный hover без анимаций.

Пустые ячейки. .pad убирает фоновую подложку, чтобы «дырки» в начале и конце месяца не выглядели как активные дни.

Навигация по месяцам. tfoot #prev и #next, ссылки на соседние месяцы. Обе мелким шрифтом в uppercase; #prev слева, #next справа.

Обратите внимание: тень вокруг календаря на скриншоте ниже, только для оформления картинки в статье. В реальном коде её нет.

Три способа добавить CSS на сайт

От самого простого до правильного.

Способ 1: Customizer. Перейдите в Внешний вид → Настроить → Дополнительные CSS и вставьте код. Плюс: мгновенный предпросмотр, файлы трогать не нужно. Минус: стили привязаны к теме, при смене темы теряются.

Способ 2: Плагин для сниппетов. Установите бесплатный Code Snippets или WPCode и добавьте код как CSS-сниппет с активацией на всём сайте. Плюс: стили живут независимо от темы. Минус: ещё один плагин в админке.

Способ 3: Дочерняя тема. Создайте style.css в дочерней теме и вставьте код туда. Это правильный путь для рабочих проектов: стили переживают обновление родительской темы и лежат в системе контроля версий. Если дочерней темы ещё нет, инструкция на WordPress.org проведёт за десять минут.

Результат

После добавления CSS виджет выглядит так:

Дни выровнены по центру, ячейки отделены белой рамкой, при наведении фон становится белым. Пустые ячейки не отвлекают, серой подложки у них нет. Название месяца читается как аккуратная подпись.

Что делать, если CSS не сработал

Если после вставки кода виджет не изменился, ваша тема уже содержит стили для #wp-calendar с более высоким приоритетом. Откройте инспектор браузера (F12), найдите элемент #wp-calendar tbody td и проверьте, какие правила переопределяют background и padding.

Чтобы «перебить» встроенные стили темы, добавьте к селекторам ID сайдбара или оберните код в более специфичный контекст, например, #sidebar .widget_calendar #wp-calendar tbody td. Это поднимет специфичность без !important.

Виджет или блок: что использовать

С выходом Gutenberg в ядре появился блок «Календарь», современная замена классическому виджету. Он выводит ту же таблицу #wp-calendar и стилизуется тем же CSS. Разница в способе размещения:

• Классический виджет, через Внешний вид → Виджеты, работает только в сайдбарах и виджет-зонах темы.
• Блок «Календарь», вставляется в любую страницу или запись через редактор блоков, плюс в виджет-зоны через Внешний вид → Виджеты (с WordPress 5.8 блоки доступны и там).

CSS из статьи работает с обоими вариантами без изменений. Выбирайте блок, если календарь нужен в теле страницы; классический виджет, если только в сайдбаре и привычный workflow менять не хочется.

⁉️🤔 Частые вопросы

Почему мой календарь не реагирует на CSS из статьи?

Скорее всего, тема уже содержит стили для #wp-calendar с более высоким приоритетом. Откройте инспектор (F12 в браузере), кликните на ячейку календаря и посмотрите, какое правило переопределяет ваш background. Решение: добавьте перед селектором ID контейнера сайдбара, например, #secondary .widget_calendar #wp-calendar tbody td. Это поднимет специфичность без !important.

Обязательно создавать дочернюю тему ради 20 строк CSS?

Для одного виджета, нет. Начните с Дополнительных CSS в Customizer (Внешний вид → Настроить). Когда кастомных правил накопится на полноценную кастомизацию, тогда и создавайте дочернюю тему. Порог «пора», примерно 50 строк CSS или первое изменение functions.php.

Работает ли этот CSS с блоком «Календарь» в Gutenberg?

Да, полностью. Блок «Календарь» рендерит ту же таблицу #wp-calendar с теми же классами. Код работает без изменений.

Можно ли поменять цветовую схему?

Легко. Замените #f5f5f5 (фон ячеек) и #fff (hover и рамка) на цвета вашей темы. Для тёмной схемы попробуйте background: #2c2c2c; color: #ccc; у tbody td и background: #1a1a1a; у hover. Главное, сохранить контраст между фоном ячейки и текстом.

Виджет календаря вообще нужен в 2026?

Для новостных сайтов и активных блогов, да. Календарь даёт читателю навигацию по старым материалам без поиска по рубрикам. Для визиток и лендингов он бесполезен. Но если ваша тема продаётся на маркетплейсе, стилизованный виджет обязателен: покупатель не должен видеть голую таблицу, даже если сам календарь не использует.

Календарь WordPress: исправить за пять минут или забыть

Календарь, мелочь, которая с головой выдаёт недоделанную тему. Исправляется копипастой двадцати строк CSS.

• Делаете тему для себя, скопируйте код в Дополнительные CSS Customizer и забудьте.
• Пишете тему на продажу, включите стили в style.css дочерней темы, это базовая гигиена.
• Календарь не нужен вообще, всё равно оформите его. Покупатель темы может включить виджет, и он не должен выглядеть поломанным.

Проверьте, как выглядит ваш календарь прямо сейчас: добавьте виджет в сайдбар через Внешний вид → Виджеты и откройте сайт. Голая таблица? Код выше, берите и исправляйте за пять минут.