Standardny kalendarz WordPress i szczegół, który zdradza niedokończony motyw w ciągu pierwszych trzech sekund. Zbita tabela bez marginesów, domyślnie szare tło, zlepiony tekst w komórkach. Twórca motywu poświęcił tydzień na czcionki i kolory, a zapomniał o #wp-calendar.

Dwadzieścia linii CSS zmienia wszystko. Poniżej znajduje się kod, który można skopiować do dowolnego projektu, wraz z analizą krok po kroku: żeby nie tylko go Państwo wkleili, ale też rozumieli, co robi każdy selektor.

💡 Szybki przegląd:

• Gotowy CSS dla #wp-calendar, jeden blok, kopiowany w całości
• Gdzie wstawić kod: Customizer, wtyczka do snippetów lub motyw potomny
• Co zrobić, jeśli CSS nie zadziałał: specyficzność i jak ją „przebić"
• Dlaczego na zrzucie ekranu jest cień: tylko na potrzeby artykułu, w rzeczywistym kodzie go nie ma

Jak zbudowany jest widżet kalendarza

Zanim skopiują Państwo kod, krótko o strukturze. WordPress generuje dla widżetu następujący znacznik:

• .widget_calendar, kontener widżetu na pasku bocznym
• #wp-calendar, sama tabela (każdy widżet ma własne id)
• #wp-calendar caption, nazwa miesiąca (tytuł tabeli)
• #wp-calendar thead th, skrócone nazwy dni tygodnia
• #wp-calendar tbody td, komórki dni; daty z postami stają się linkami
• #wp-calendar tbody .pad, puste komórki przed pierwszym i po ostatnim dniu
• #wp-calendar tfoot #prev / #next, linki do poprzedniego i następnego miesiąca

Te klasy nie zmieniały się od lat i działają we wszystkich wersjach WordPress od 5.0 do najnowszych wydań. Żadnej magii, tylko standardowy znacznik rdzenia.

Krótkie wideo na temat dodawania i konfigurowania widżetu kalendarza w panelu administracyjnym:

Gotowy CSS: kopiujemy i wklejamy

Proszę dodać ten kod do stylów motywu. Rezultat: jasna tabela z szarymi komórkami, białym efektem hover i wyłączonym tłem w pustych dniach.

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
}

Analiza według grup:

Kontener i szerokość. .widget_calendar {float: left;} zapobiega kolizjom opływania w wąskich paskach bocznych. #wp-calendar {width: 100%;} zmusza tabelę do rozciągnięcia się na całą szerokość elementu nadrzędnego; bez tego kalendarz zachowuje się jak element inline i zwęża się do szerokości zawartości. Więcej o CSS w WordPress.

Tytuł miesiąca. caption jest wyrównany do prawej, ciemnoszary kolor i marginesy górny oraz dolny. Miesiąc czyta się jak podpis pod tabelą, a nie jak osierocony tekst.

Nagłówek z dniami tygodnia. thead i th, drobna czcionka 10px i margines dolny. Skrócone nazwy dni (Pn, Wt, Śr) nie przyciągają nadmiernie uwagi.

Komórki dni. Główny kolor tekstu #aaa, stonowany szary. Każda komórka otrzymuje wypełnienie #f5f5f5 i białą ramkę, która wizualnie oddziela dni. padding: 8px daje przestrzeń wokół liczb. Po najechaniu komórka staje się biała: prosty i czytelny hover bez animacji.

Puste komórki. .pad usuwa wypełnienie tła, aby „dziury" na początku i na końcu miesiąca nie wyglądały jak aktywne dni.

Nawigacja po miesiącach. tfoot #prev i #next, linki do sąsiednich miesięcy. Oba drobną czcionką, kapitalikami; #prev po lewej, #next po prawej.

Proszę zwrócić uwagę: cień wokół kalendarza na zrzucie ekranu poniżej służy wyłącznie do dekoracji obrazka w artykule. W rzeczywistym kodzie go nie ma.

Trzy sposoby dodania CSS do witryny

Od najprostszego do prawidłowego.

Sposób 1: Customizer. Proszę przejść do Wygląd → Dostosuj → Dodatkowy CSS i wkleić kod. Plus: natychmiastowy podgląd, nie trzeba dotykać plików. Minus: style są powiązane z motywem, przy zmianie motywu są tracone.

Sposób 2: Wtyczka do snippetów. Proszę zainstalować darmową wtyczkę Code Snippets lub WPCode i dodać kod jako snippet CSS z aktywacją na całej witrynie. Plus: style istnieją niezależnie od motywu. Minus: kolejna wtyczka w panelu administracyjnym.

Sposób 3: Motyw potomny. Proszę utworzyć style.css w motywie potomnym i wkleić tam kod. To właściwa ścieżka dla projektów produkcyjnych: style przetrwają aktualizacje motywu nadrzędnego i znajdują się w systemie kontroli wersji. Jeśli motyw potomny jeszcze nie istnieje, instrukcja na WordPress.org przeprowadzi Państwa przez ten proces w dziesięć minut.

Rezultat

Po dodaniu CSS widżet wygląda tak:

Dni są wyśrodkowane, komórki oddzielone białą ramką, po najechaniu tło staje się białe. Puste komórki nie rozpraszają, nie mają szarego wypełnienia. Nazwa miesiąca czyta się jak schludny podpis.

Co zrobić, jeśli CSS nie zadziałał

Jeśli po wklejeniu kodu widżet się nie zmienił, Państwa motyw zawiera już style dla #wp-calendar z wyższym priorytetem. Proszę otworzyć inspektor przeglądarki (F12), znaleźć element #wp-calendar tbody td i sprawdzić, które reguły nadpisują background i padding.

Aby „przebić" wbudowane style motywu, proszę dodać do selektorów ID paska bocznego lub opakować kod w bardziej specyficzny kontekst, na przykład #sidebar .widget_calendar #wp-calendar tbody td. To podniesie specyficzność bez !important.

Widżet czy blok: czego używać

Wraz z wprowadzeniem Gutenberga w rdzeniu pojawił się blok „Kalendarz", nowoczesny zamiennik klasycznego widżetu. Wyświetla on tę samą tabelę #wp-calendar i jest stylizowany tym samym CSS. Różnica polega na sposobie umieszczania:

• Klasyczny widżet, poprzez Wygląd → Widżety, działa tylko na paskach bocznych i w obszarach widżetów motywu.
• Blok „Kalendarz" jest wstawiany na dowolną stronę lub do wpisu za pomocą edytora bloków, a także w obszary widżetów poprzez Wygląd → Widżety (od WordPress 5.8 bloki są tam również dostępne).

CSS z artykułu działa z obiema opcjami bez zmian. Proszę wybrać blok, jeśli kalendarz jest potrzebny w treści strony; klasyczny widżet, jeśli tylko na pasku bocznym i nie chcą Państwo zmieniać dotychczasowego przepływu pracy.

⁉️🤔 Często zadawane pytania

Dlaczego mój kalendarz nie reaguje na CSS z artykułu?

Najprawdopodobniej motyw zawiera już style dla #wp-calendar z wyższym priorytetem. Proszę otworzyć inspektor (F12 w przeglądarce), kliknąć komórkę kalendarza i sprawdzić, która reguła nadpisuje Państwa background. Rozwiązanie: proszę dodać przed selektorem ID kontenera paska bocznego, na przykład #secondary .widget_calendar #wp-calendar tbody td. To podniesie specyficzność bez !important.

Czy konieczne jest tworzenie motywu potomnego dla 20 linii CSS?

Dla jednego widżetu: nie. Proszę zacząć od Dodatkowego CSS w Customizerze (Wygląd → Dostosuj). Gdy reguł niestandardowych zbierze się na pełnoprawną customizację, wtedy proszę utworzyć motyw potomny. Próg „już czas" to około 50 linii CSS lub pierwsza zmiana w functions.php.

Czy ten CSS działa z blokiem „Kalendarz" w Gutenbergu?

Tak, w pełni. Blok „Kalendarz" renderuje tę samą tabelę #wp-calendar z tymi samymi klasami. Kod działa bez zmian.

Czy można zmienić schemat kolorów?

Z łatwością. Proszę zastąpić #f5f5f5 (tło komórek) i #fff (hover i ramka) kolorami swojego motywu. Dla ciemnego schematu proszę spróbować background: #2c2c2c; color: #ccc; w tbody td i background: #1a1a1a; w hover. Najważniejsze to zachować kontrast między tłem komórki a tekstem.

Czy widżet kalendarza jest w ogóle potrzebny w 2026 roku?

Dla witryn informacyjnych i aktywnych blogów: tak. Kalendarz daje czytelnikowi nawigację po starszych materiałach bez przeszukiwania kategorii. Dla wizytówek i stron docelowych jest zbędny. Jeśli jednak Państwa motyw jest sprzedawany na marketplace, stylizowany widżet jest obowiązkowy: kupujący nie powinien widzieć gołej tabeli, nawet jeśli sam z kalendarza nie korzysta.

Kalendarz WordPress: naprawić w pięć minut albo zapomnieć

Kalendarz to drobiazg, który jednoznacznie zdradza niedopracowany motyw. Naprawia się go przez wklejenie dwudziestu linii CSS.

• Tworzą Państwo motyw dla siebie: proszę skopiować kod do Dodatkowego CSS w Customizerze i zapomnieć.
• Piszą Państwo motyw na sprzedaż: proszę włączyć style do style.css motywu potomnego, to podstawowa higiena.
• Kalendarz nie jest w ogóle potrzebny: i tak proszę go ostylować. Kupujący motyw może włączyć widżet, a nie powinien on wyglądać na uszkodzony.

Proszę sprawdzić, jak wygląda Państwa kalendarz teraz: proszę dodać widżet na pasku bocznym poprzez Wygląd → Widżety i otworzyć witrynę. Goła tabela? Kod powyżej: proszę go wziąć i poprawić w pięć minut.