Oletusarvoinen WordPress-kalenteri, yksityiskohta, joka paljastaa puolivalmiin teeman kolmessa sekunnissa. Tiivis taulukko ilman välistyksiä, oletuksena harmaa tausta, ahtaat tekstit soluissa. Teeman kehittäjä käytti viikon fontteihin ja väreihin, mutta unohti #wp-calendar-tunnisteen.

Kaksikymmentä riviä CSS-koodia muuttaa kaiken. Alla on koodi, jonka voit kopioida mihin tahansa projektiin, sekä rivi riviltä -selitys, jotta et vain liitä sitä vaan ymmärrät, mitä kukin valitsin tekee.

💡 Nopea yleiskatsaus:

• Valmis CSS-koodi #wp-calendar-tunnisteelle, yksi lohko, kopioi se kokonaisuudessaan
• Mihin koodi lisätään: mukauttaja, koodinpätkäliitännäinen tai lapsiteema
• Mitä tehdä, jos CSS ei toimi: tarkkuus ja sen ohittaminen
• Miksi kuvakaappauksen varjo on vain artikkelia varten, se ei ole varsinaisessa koodissa

Miten kalenterivimpain toimii

Ennen koodin kopioimista tässä on nopea katsaus rakenteeseen. WordPress tuottaa tämän merkinnän vimpaimelle:

• .widget_calendar, vimpaimen säiliö sivupalkissa
• #wp-calendar, itse taulukko (jokaisella vimpaimella on oma id)
• #wp-calendar caption, kuukauden nimi (taulukon otsikko)
• #wp-calendar thead th, lyhennetyt viikonpäivien nimet
• #wp-calendar tbody td, päiväsolut; päivämääristä, joilla on artikkeleita, tulee linkkejä
• #wp-calendar tbody .pad, tyhjät solut ennen ensimmäistä ja viimeisen päivän jälkeen
• #wp-calendar tfoot #prev / #next, linkit edelliseen ja seuraavaan kuukauteen

Nämä luokat eivät ole muuttuneet vuosiin ja toimivat kaikissa WordPress-versioissa 5.0:sta uusimpiin julkaisuihin. Ei taikuutta, vain vakioytimen merkintä.

Lyhyt video kalenterivimpaimen lisäämisestä ja määrittämisestä hallintapaneelissa:

Valmis CSS-koodi: kopioi ja liitä

Lisää tämä koodi teemasi tyyleihin. Tuloksena on kevyt taulukko, jossa on harmaat solut, valkoinen hover-efekti ja poistettu tausta tyhjille päiville.

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
}

Erittely ryhmittäin:

Säiliö ja leveys. .widget_calendar {float: left;} estää float-törmäykset kapeissa sivupalkeissa. #wp-calendar {width: 100%;} pakottaa taulukon venymään vanhempansa koko leveyteen; ilman tätä kalenteri käyttäytyy kuin inline-elementti ja kutistuu sisällön leveyteen. Lisätietoa CSS:stä WordPressissä.

Kuukauden otsikko. caption on oikealle tasattu, tummanharmaa väri, jossa on ylä- ja alamarginaalit. Kuukausi näyttää taulukon otsikolta, ei irralliselta tekstiltä.

Ylätunniste ja viikonpäivien nimet. thead ja th, pieni 10px fontti ja alapadding. Lyhennetyt viikonpäivien nimet (ma, ti, ke) eivät kiinnitä huomiota itseensä.

Päiväsolut. Päätekstin väri #aaa, hillitty harmaa. Jokainen solu saa #f5f5f5-taustan ja valkoisen reunuksen, joka erottaa päivät visuaalisesti. padding: 8px antaa hengitystilaa numeroiden ympärille. Hover-tilassa solu muuttuu valkoiseksi, yksinkertainen ja selkeä hover ilman animaatioita.

Tyhjät solut. .pad poistaa taustavärin, jotta kuukauden alun ja lopun "reiät" eivät näytä aktiivisilta päiviltä.

Kuukausinavigaatio. tfoot #prev ja #next, linkit viereisiin kuukausiin. Molemmat pienellä versaalifontilla; #prev vasemmalla, #next oikealla.

Huomautus: kalenterin ympärillä oleva varjo alla olevassa kuvakaappauksessa on vain artikkelin kuvitusta varten. Se ei ole varsinaisessa koodissa.

Kolme tapaa lisätä CSS sivustollesi

Yksinkertaisimmasta asianmukaisimpaan.

Tapa 1: Mukauttaja. Siirry kohtaan Ulkoasu → Mukauta → Lisä-CSS ja liitä koodi. Hyödyt: välitön esikatselu, ei tarvetta koskea tiedostoihin. Haitat: tyylit ovat sidottuja teemaan ja katoavat, kun vaihdat teemaa.

Tapa 2: Koodinpätkäliitännäinen. Asenna ilmainen Code Snippets tai WPCode ja lisää koodi CSS-koodinpätkänä, joka on aktivoitu koko sivustolle. Hyödyt: tyylit elävät teemasta riippumatta. Haitat: yksi liitännäinen lisää hallintapaneelissa.

Tapa 3: Lapsiteema. Luo style.css lapsiteemaan ja liitä koodi sinne. Tämä on oikea polku tuotantoprojekteille: tyylit säilyvät pääteeman päivityksissä ja elävät versionhallinnassa. Jos sinulla ei vielä ole lapsiteemaa, WordPress.org-opas opastaa sinut läpi kymmenessä minuutissa.

Lopputulos

CSS:n lisäämisen jälkeen vimpain näyttää tältä:

Päivät ovat keskitettyjä, solut on erotettu valkoisilla reunuksilla, hover muuttaa taustan valkoiseksi. Tyhjät solut eivät häiritse, niissä ei ole harmaata taustaa. Kuukauden nimi näyttää siistiltä otsikolta.

Mitä tehdä, jos CSS ei toimi

Jos vimpain ei ole muuttunut koodin liittämisen jälkeen, teemasi sisältää jo tyylejä #wp-calendar-tunnisteelle korkeammalla prioriteetilla. Avaa selaimen tarkastaja (F12), etsi #wp-calendar tbody td -elementti ja tarkista, mitkä säännöt ohittavat background- ja padding-määritykset.

Ohittaaksesi teeman sisäänrakennetut tyylit lisää sivupalkin ID valitsimiin tai kääri koodi tarkempaan kontekstiin, esimerkiksi #sidebar .widget_calendar #wp-calendar tbody td. Tämä nostaa tarkkuutta ilman !important-määritystä.

Vimpain vai lohko: kumpaa käyttää

Gutenbergin julkaisun myötä ydin toi "Kalenteri"-lohkon, modernin korvaajan perinteiselle vimpaimelle. Se tuottaa saman #wp-calendar-taulukon ja muotoillaan samalla CSS:llä. Ero on sijoittelussa:

• Perinteinen vimpain, kohdan Ulkoasu → Vimpaimet kautta, toimii vain sivupalkeissa ja teeman vimpainalueilla.
• "Kalenteri"-lohko, lisätään mille tahansa sivulle tai artikkeliin lohkoeditorin kautta, sekä vimpainalueille kohdan Ulkoasu → Vimpaimet kautta (WordPress 5.8:sta lähtien lohkot ovat saatavilla sielläkin).

Tämän artikkelin CSS toimii molempien vaihtoehtojen kanssa ilman muutoksia. Valitse lohko, jos tarvitset kalenterin sivun runkoon; perinteinen vimpain, jos se on vain sivupalkissa etkä halua muuttaa tuttua työnkulkuasi.

⁉️🤔 Usein kysytyt kysymykset

Miksi kalenterini ei reagoi artikkelin CSS:ään?

Todennäköisesti teemasi sisältää jo tyylejä #wp-calendar-tunnisteelle korkeammalla prioriteetilla. Avaa tarkastaja (F12 selaimessa), napsauta kalenterin solua ja katso, mikä sääntö ohittaa background-määrityksesi. Ratkaisu: lisää sivupalkin säiliön ID ennen valitsinta, esimerkiksi #secondary .widget_calendar #wp-calendar tbody td. Tämä nostaa tarkkuutta ilman !important-määritystä.

Onko tarpeen luoda lapsiteema 20 riviä CSS:ää varten?

Yhdelle vimpaimelle ei. Aloita Lisä-CSS:stä mukauttajassa (Ulkoasu → Mukauta). Kun keräät tarpeeksi mukautettuja sääntöjä täyttä räätälöintiä varten, luo sitten lapsiteema. "On aika" -kynnys on karkeasti 50 riviä CSS:ää tai ensimmäinen functions.php-muutos.

Toimiiko tämä CSS "Kalenteri"-lohkon kanssa Gutenbergissa?

Kyllä, täysin. "Kalenteri"-lohko tuottaa saman #wp-calendar-taulukon samoilla luokilla. Koodi toimii ilman muutoksia.

Voinko muuttaa värimaailmaa?

Helposti. Korvaa #f5f5f5 (solun tausta) ja #fff (hover ja reunus) teemasi väreillä. Tummaa teemaa varten kokeile background: #2c2c2c; color: #ccc; tbody td-elementille ja background: #1a1a1a; hoverille. Pääasia on säilyttää kontrasti solun taustan ja tekstin välillä.

Onko kalenterivimpainta edes tarvittu vuonna 2026?

Uutissivustoille ja aktiivisille blogeille kyllä. Kalenteri tarjoaa lukijoille navigoinnin vanhoihin materiaaleihin ilman kategorioiden mukaan etsimistä. Käyntikorteille ja laskeutumissivuille se on hyödytön. Mutta jos teemaasi myydään markkinapaikalla, tyylitelty vimpain on pakollinen: ostajan ei pitäisi nähdä paljasta taulukkoa, vaikka hän ei käyttäisikään itse kalenteria.

WordPress-kalenteri: korjaa viidessä minuutissa tai unohda

Kalenteri on pieni asia, joka paljastaa täysin keskeneräisen teeman. Korjataan kopioimalla ja liittämällä kaksikymmentä riviä CSS:ää.

• Jos teet teemaa itsellesi, kopioi koodi mukauttajan Lisä-CSS:ään ja unohda se.
• Jos kirjoitat teemaa myyntiin, sisällytä tyylit lapsiteeman style.css-tiedostoon, se on perushygieniaa.
• Jos et tarvitse kalenteria lainkaan, tyylittele se silti. Teeman ostaja saattaa ottaa vimpaimen käyttöön, eikä sen pitäisi näyttää rikkinäiseltä.

Tarkista, miltä kalenterisi näyttää juuri nyt: lisää vimpain sivupalkkiin kohdan Ulkoasu → Vimpaimet kautta ja avaa sivusto. Paljas taulukko? Koodi on yllä, nappaa se ja korjaa viidessä minuutissa.