Standard WordPress-kalender, detaljen som avslöjar ett halvfärdigt tema på tre sekunder. En kompakt tabell utan luft, grå bakgrund som standard, trång text i cellerna. Temautvecklaren lade en vecka på typsnitt och färger men glömde #wp-calendar.

Tjugo rader CSS förändrar allt. Här är kod du kan kopiera in i vilket projekt som helst, tillsammans med en rad-för-rad-genomgång så att du inte bara klistrar in utan förstår vad varje selektor gör.

💡 Snabb översikt:

• Färdig CSS för #wp-calendar, ett block, kopiera allt
• Var du lägger in koden: Anpassa, snippet-plugin eller barntema
• Vad du gör om CSS inte fungerar, specificitet och hur du övertrumfar den
• Varför skuggan i skärmbilden bara är för artikelns skull, den finns inte i koden

Så fungerar kalenderwidgeten

Innan du kopierar koden, här är en snabb titt på strukturen. WordPress genererar den här märkningen för widgeten:

• .widget_calendar, widgetens behållare i sidofältet
• #wp-calendar, själva tabellen (varje widget har sitt eget id)
• #wp-calendar caption, månadens namn (tabellrubrik)
• #wp-calendar thead th, förkortade dagnamn
• #wp-calendar tbody td, dagceller; datum med inlägg blir länkar
• #wp-calendar tbody .pad, tomma celler före första och efter sista dagen
• #wp-calendar tfoot #prev / #next, länkar till föregående och nästa månad

Dessa klasser har inte ändrats på flera år och fungerar i alla WordPress-versioner från 5.0 till de senaste utgåvorna. Ingen magi, bara standardmärkning från kärnan.

En kort video om hur du lägger till och konfigurerar kalenderwidgeten i admin:

Färdig CSS: kopiera och klistra in

Lägg till den här koden i ditt temas stilmall. Resultatet är en ljus tabell med grå celler, vit hover-effekt och inaktiverad bakgrund för tomma dagar.

1
/* calendar widget — minimalistic styling */
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
}

Genomgång i grupper:

Behållare och bredd. .widget_calendar {float: left;} förhindrar float-kollisioner i smala sidofält. #wp-calendar {width: 100%;} tvingar tabellen att sträcka ut till förälderns fulla bredd; utan detta beter sig kalendern som ett inline-element och krymper till innehållets bredd. Mer om CSS i WordPress.

Månadsrubrik. caption är högerställd, mörkgrå färg med marginal upptill och nedtill. Månaden läses som en rubrik för tabellen, inte som lösryckt text.

Huvud med dagnamn. thead och th, liten 10px text och padding i botten. Förkortade dagnamn (mån, tis, ons) drar inte uppmärksamhet till sig.

Dagceller. Huvudsaklig textfärg #aaa, dämpad grå. Varje cell får en #f5f5f5 bakgrund och vit kantlinje som visuellt separerar dagarna. padding: 8px ger andrum runt siffrorna. Vid hover blir cellen vit, enkel och tydlig hover utan animationer.

Tomma celler. .pad tar bort bakgrundsfyllningen så att "hål" i början och slutet av månaden inte ser ut som aktiva dagar.

Månadsnavigering. tfoot #prev och #next, länkar till intilliggande månader. Båda i liten versal text; #prev till vänster, #next till höger.

Obs: skuggan runt kalendern i skärmbilden nedan är bara för artikelillustration. Den finns inte i den faktiska koden.

Tre sätt att lägga till CSS på din sajt

Från enklast till mest korrekt.

Metod 1: Anpassa. Gå till Utseende → Anpassa → Extra CSS och klistra in koden. Fördelar: direkt förhandsvisning, inget behov av att röra filer. Nackdelar: stilarna är knutna till temat, försvinner när du byter tema.

Metod 2: Snippet-plugin. Installera gratis Code Snippets eller WPCode och lägg till koden som en CSS-snippet aktiverad för hela sajten. Fördelar: stilarna lever oberoende av temat. Nackdelar: ytterligare ett plugin i admin.

Metod 3: Barntema. Skapa style.css i ett barntema och klistra in koden där. Detta är rätt väg för produktionsprojekt: stilar överlever uppdateringar av föräldratemat och lever i versionshantering. Om du inte har ett barntema än, guidar WordPress.org-guiden dig igenom på tio minuter.

Resultat

Efter att du lagt till CSS ser widgeten ut så här:

Dagar är centrerade, celler separeras av vita kantlinjer, hover gör bakgrunden vit. Tomma celler distraherar inte, de har ingen grå bakgrund. Månadsnamnet läses som en prydlig rubrik.

Vad du gör om CSS inte fungerar

Om widgeten inte har ändrats efter att du klistrat in koden, har ditt tema redan stilar för #wp-calendar med högre prioritet. Öppna webbläsarens inspector (F12), hitta elementet #wp-calendar tbody td och kontrollera vilka regler som övertrumfar background och padding.

För att övertrumfa temats inbyggda stilar, lägg till sidofältets ID i selektorerna eller slå in koden i en mer specifik kontext, till exempel #sidebar .widget_calendar #wp-calendar tbody td. Detta höjer specificiteten utan !important.

Widget eller block: vad du ska använda

I och med lanseringen av Gutenberg introducerade kärnan ett "Kalender"-block, en modern ersättning för den klassiska widgeten. Det matar ut samma #wp-calendar-tabell och stylas med samma CSS. Skillnaden ligger i placering:

• Klassisk widget, via Utseende → Widgetar, fungerar bara i sidofält och temats widget-ytor.
• "Kalender"-blocket, infogas på vilken sida eller inlägg som helst via blockredigeraren, plus i widget-ytor via Utseende → Widgetar (från WordPress 5.8 finns block där också).

CSS från denna artikel fungerar med båda alternativen utan ändringar. Välj blocket om du behöver kalendern i sidans brödtext; den klassiska widgeten om den bara ska vara i sidofältet och du inte vill ändra ditt invanda arbetsflöde.

⁉️🤔 Vanliga frågor

Varför reagerar inte min kalender på CSS från artikeln?

Troligtvis innehåller ditt tema redan stilar för #wp-calendar med högre prioritet. Öppna inspector (F12 i webbläsaren), klicka på en kalendercell och se vilken regel som övertrumfar din background. Lösning: lägg till sidofältets behållar-ID före selektorn, till exempel #secondary .widget_calendar #wp-calendar tbody td. Detta höjer specificiteten utan !important.

Är det nödvändigt att skapa ett barntema för 20 rader CSS?

För en widget, nej. Börja med Extra CSS i Anpassa (Utseende → Anpassa). När du har samlat på dig tillräckligt med anpassade regler för en fullständig anpassning, skapa då ett barntema. Tröskeln för "det är dags" ligger på ungefär 50 rader CSS eller den första ändringen i functions.php.

Fungerar denna CSS med "Kalender"-blocket i Gutenberg?

Ja, fullständigt. "Kalender"-blocket renderar samma #wp-calendar-tabell med samma klasser. Koden fungerar utan ändringar.

Kan jag ändra färgschemat?

Enkelt. Byt ut #f5f5f5 (cellbakgrund) och #fff (hover och kantlinje) mot dina temafärger. För ett mörkt schema, prova background: #2c2c2c; color: #ccc; för tbody td och background: #1a1a1a; för hover. Huvudsaken är att bibehålla kontrast mellan cellbakgrund och text.

Behövs kalenderwidgeten ens 2026?

För nyhetssajter och aktiva bloggar, ja. Kalendern ger läsare navigering genom gamla material utan att söka via kategorier. För visitkort och landningssidor är den onödig. Men om ditt tema säljs på en marknadsplats är en stylad widget obligatorisk: köparen ska inte se en naken tabell, även om de inte använder själva kalendern.

WordPress-kalender: fixa på fem minuter eller glöm

Kalendern är en liten sak som helt avslöjar ett ofärdigt tema. Fixas genom att kopiera och klistra in tjugo rader CSS.

• Skapar du ett tema till dig själv, kopiera in koden i Extra CSS i Anpassa och glöm det.
• Skriver du ett tema för försäljning, inkludera stilarna i barntemats style.css, det är grundläggande hygien.
• Behöver du inte kalendern alls, styla den ändå. En temaköpare kan aktivera widgeten, och den ska inte se trasig ut.

Kolla hur din kalender ser ut just nu: lägg till widgeten i sidofältet via Utseende → Widgetar och öppna sajten. Naken tabell? Koden finns ovan, ta den och fixa det på fem minuter.