Standard WordPress-kalenderen, detaljen som avslører et halvferdig tema i løpet av de første tre sekundene. En kompakt tabell uten luft, grå bakgrunn som standard, innestengt tekst i cellene. Temautvikleren brukte en uke på fonter og farger, men glemte #wp-calendar.

Tjue linjer med CSS forandrer alt. Nedenfor finner du kode du kan kopiere inn i ethvert prosjekt, sammen med en linje-for-linje-gjennomgang så du ikke bare limer den inn, men forstår hva hver selektor gjør.

💡 Rask oversikt:

• Ferdig CSS for #wp-calendar, én blokk, kopier den i sin helhet
• Hvor du setter inn koden: Tilpasser, snippet-plugin eller child theme
• Hva du gjør hvis CSS-en ikke virker, spesifisitet og hvordan du overstyrer den
• Hvorfor skyggen i skjermbildet kun er for artikkelen, den er ikke i selve koden

Slik fungerer kalender-widgeten

Før du kopierer koden, her er en rask titt på strukturen. WordPress genererer denne markupen for widgeten:

• .widget_calendar, widget-beholder i sidefeltet
• #wp-calendar, selve tabellen (hver widget har sin egen id)
• #wp-calendar caption, månedsnavn (tabelloverskrift)
• #wp-calendar thead th, forkortede dagnavn
• #wp-calendar tbody td, dagceller; datoer med innlegg blir til lenker
• #wp-calendar tbody .pad, tomme celler før første og etter siste dag
• #wp-calendar tfoot #prev / #next, lenker til forrige og neste måned

Disse klassene har ikke endret seg på årevis og fungerer i alle WordPress-versjoner fra 5.0 til de nyeste utgivelsene. Ingen magi, bare standard kjernemarkup.

En kort video om hvordan du legger til og konfigurerer kalender-widgeten i admin:

Ferdig CSS: kopier og lim inn

Legg til denne koden i temastilene dine. Resultatet er en lett tabell med grå celler, hvit hover-effekt og deaktivert bakgrunn for tomme dager.

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
}

Gjennomgang etter grupper:

Beholder og bredde. .widget_calendar {float: left;} forhindrer flyt-kollisjoner i smale sidefelt. #wp-calendar {width: 100%;} tvinger tabellen til å strekke seg til full bredde av foreldreelementet; uten dette oppfører kalenderen seg som et inline-element og krymper til innholdsbredden. Mer om CSS i WordPress.

Månedsoverskrift. caption er høyrejustert, mørk grå farge med topp- og bunnmarger. Måneden leses som en bildetekst for tabellen, ikke som foreldreløs tekst.

Topptekst med dagnavn. thead og th, liten 10px font og bunnpolstring. Forkortede dagnavn (man, tir, ons) trekker ikke oppmerksomhet til seg selv.

Dagceller. Hovedtekstfarge #aaa, dempet grå. Hver celle får en #f5f5f5 bakgrunn og hvit kantlinje som visuelt skiller dagene. padding: 8px gir pusterom rundt tallene. Ved hover blir cellen hvit, enkel og tydelig hover uten animasjoner.

Tomme celler. .pad fjerner bakgrunnsfyllen slik at «hull» i begynnelsen og slutten av måneden ikke ser ut som aktive dager.

Månedsnavigasjon. tfoot #prev og #next, lenker til tilstøtende måneder. Begge i liten uppercase-font; #prev til venstre, #next til høyre.

Merk: skyggen rundt kalenderen i skjermbildet nedenfor er kun for artikkelillustrasjon. Den er ikke i selve koden.

Tre måter å legge til CSS på nettstedet ditt

Fra enkleste til mest korrekte.

Metode 1: Tilpasser. Gå til Utseende → Tilpass → Ekstra CSS og lim inn koden. Fordeler: umiddelbar forhåndsvisning, ingen grunn til å røre filer. Ulemper: stiler er knyttet til temaet, går tapt når du bytter tema.

Metode 2: Snippet-plugin. Installer gratis Code Snippets eller WPCode og legg til koden som en CSS-snippet aktivert for hele nettstedet. Fordeler: stiler lever uavhengig av temaet. Ulemper: én plugin til i admin.

Metode 3: Child theme. Opprett style.css i et child theme og lim inn koden der. Dette er riktig vei for produksjonsprosjekter: stiler overlever oppdateringer av foreldretemaet og lever i versjonskontroll. Hvis du ikke har et child theme ennå, vil WordPress.org-guiden lede deg gjennom det på ti minutter.

Resultat

Etter at du har lagt til CSS-en, ser widgeten slik ut:

Dager er sentrert, celler er adskilt av hvite kantlinjer, hover gjør bakgrunnen hvit. Tomme celler distraherer ikke, de har ingen grå bakgrunn. Månedsnavnet leses som en ryddig bildetekst.

Hva du gjør hvis CSS-en ikke virker

Hvis widgeten ikke har endret seg etter at du limte inn koden, inneholder temaet ditt allerede stiler for #wp-calendar med høyere prioritet. Åpne nettleserinspektøren (F12), finn #wp-calendar tbody td-elementet og sjekk hvilke regler som overstyrer background og padding.

For å overstyre innebygde temastiler, legg til sidefelt-ID-en i selektorene eller pakk koden inn i en mer spesifikk kontekst, for eksempel #sidebar .widget_calendar #wp-calendar tbody td. Dette øker spesifisiteten uten !important.

Widget eller blokk: hva du skal bruke

Med lanseringen av Gutenberg introduserte kjernen en «Kalender»-blokk, en moderne erstatning for den klassiske widgeten. Den produserer den samme #wp-calendar-tabellen og styles med den samme CSS-en. Forskjellen ligger i plassering:

• Klassisk widget, via Utseende → Widgeter, fungerer bare i sidefelt og temawidget-områder.
• «Kalender»-blokk, satt inn på en hvilken som helst side eller innlegg via blokkredigereren, pluss i widget-områder via Utseende → Widgeter (fra WordPress 5.8 er blokker tilgjengelige der også).

CSS-en fra denne artikkelen fungerer med begge alternativene uten endringer. Velg blokken hvis du trenger kalenderen i sidekroppen; den klassiske widgeten hvis den bare er i sidefeltet og du ikke vil endre din vante arbeidsflyt.

⁉️🤔 Ofte stilte spørsmål

Hvorfor reagerer ikke kalenderen min på CSS-en fra artikkelen?

Mest sannsynlig inneholder temaet ditt allerede stiler for #wp-calendar med høyere prioritet. Åpne inspektøren (F12 i nettleseren), klikk på en kalendercelle og se hvilken regel som overstyrer background din. Løsning: legg til sidefeltbeholder-ID-en foran selektoren, for eksempel #secondary .widget_calendar #wp-calendar tbody td. Dette øker spesifisiteten uten !important.

Er det nødvendig å opprette et child theme for 20 linjer med CSS?

For én widget, nei. Start med Ekstra CSS i Tilpasser (Utseende → Tilpass). Når du har samlet nok egendefinerte regler til en full tilpasning, da oppretter du et child theme. Terskelen for «det er på tide» er omtrent 50 linjer med CSS eller den første endringen i functions.php.

Fungerer denne CSS-en med «Kalender»-blokken i Gutenberg?

Ja, fullstendig. «Kalender»-blokken rendrer den samme #wp-calendar-tabellen med de samme klassene. Koden fungerer uten endringer.

Kan jeg endre fargeskjemaet?

Enkelt. Bytt ut #f5f5f5 (cellebakgrunn) og #fff (hover og kantlinje) med dine temafarger. For et mørkt skjema, prøv background: #2c2c2c; color: #ccc; for tbody td og background: #1a1a1a; for hover. Hovedsaken er å opprettholde kontrast mellom cellebakgrunn og tekst.

Er kalender-widgeten i det hele tatt nødvendig i 2026?

For nyhetssider og aktive blogger, ja. Kalenderen gir leserne navigering gjennom gammelt materiale uten å søke etter kategorier. For visittkort og landingssider er den ubrukelig. Men hvis temaet ditt selges på en markedsplass, er en stylet widget obligatorisk: kjøperen skal ikke se en naken tabell, selv om de ikke bruker selve kalenderen.

WordPress-kalender: fiks på fem minutter eller glem det

Kalenderen er en liten ting som fullstendig avslører et uferdig tema. Fikset ved å kopiere og lime inn tjue linjer med CSS.

• Lager du et tema til deg selv, kopier koden inn i Ekstra CSS i Tilpasser og glem den.
• Skriver du et tema for salg, inkluder stilene i child themeets style.css, det er grunnleggende hygiene.
• Trenger du ikke kalenderen i det hele tatt, style den likevel. En temakjøper kan aktivere widgeten, og den skal ikke se ødelagt ut.

Sjekk hvordan kalenderen din ser ut akkurat nå: legg til widgeten i sidefeltet via Utseende → Widgeter og åpne nettstedet. Naken tabell? Koden er ovenfor, ta den og fiks den på fem minutter.