Стандартний календар 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 дочірньої теми — це базова гігієна.
• Календар не потрібен узагалі, однаково оформіть його. Покупець теми може ввімкнути віджет, і він не повинен виглядати поламаним.

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