Vaikimisi WordPressi kalender, detail, mis reedab pooliku teema esimese kolme sekundiga. Tihe tabel ilma vahedeta, hall taust vaikimisi, kokkusurutud tekst lahtrites. Teemaarendaja veetis nädala fontide ja värvide kallal, kuid unustas #wp-calendari.

Kakskümmend rida CSS-i muudab kõike. Allpool on kood, mille saad igasse projekti kopeerida, koos rea-realt selgitusega, nii et sa mitte ainult ei kleebi seda, vaid mõistad, mida iga selektor teeb.

💡 Kiirülevaade:

• Kasutusvalmis CSS #wp-calendari jaoks, üks plokk, kopeeri tervikuna
• Kuhu kood sisestada: kohandaja, lõiguplugin või alamteema
• Mida teha, kui CSS ei tööta: spetsiifilisus ja kuidas see üle kirjutada
• Miks ekraanipildil olev vari on ainult artikli jaoks, seda ei ole tegelikus koodis

Kuidas kalendrividin töötab

Enne koodi kopeerimist kiire pilk struktuurile. WordPress genereerib vidina jaoks sellise märgendi:

• .widget_calendar, vidina konteiner küljeribal
• #wp-calendar, tabel ise (igal vidinal on oma id)
• #wp-calendar caption, kuu nimi (tabeli pealkiri)
• #wp-calendar thead th, lühendatud päevanimed
• #wp-calendar tbody td, päevalahtrid; postitustega kuupäevad muutuvad linkideks
• #wp-calendar tbody .pad, tühjad lahtrid enne esimest ja pärast viimast päeva
• #wp-calendar tfoot #prev / #next, lingid eelmisele ja järgmisele kuule

Need klassid ei ole aastaid muutunud ja töötavad kõigis WordPressi versioonides alates 5.0 kuni viimaste väljalaseteni. Ei mingit maagiat, lihtsalt standardne tuumiku märgend.

Lühike video, kuidas kalendrividinat administraatoris lisada ja seadistada:

Kasutusvalmis CSS: kopeeri ja kleebi

Lisa see kood oma teema stiilidesse. Tulemuseks on hele tabel hallide lahtritega, valge hõljumisefektiga ja tühjade päevade jaoks keelatud taustaga.

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
}

Jaotus gruppide kaupa:

Konteiner ja laius. .widget_calendar {float: left;} hoiab ära ujukite kokkupõrked kitsastel küljeribadel. #wp-calendar {width: 100%;} sunnib tabeli venima oma vanema täislaiusele; ilma selleta käitub kalender nagu reasisene element ja tõmbub kokku sisu laiusele. Rohkem teavet CSS-i kohta WordPressis.

Kuu pealkiri. caption on paremale joondatud, tumehall värv üla- ja alaveeristega. Kuu loeb end tabeli pealkirjana, mitte orvuks jäänud tekstina.

Päis koos päevanimedega. thead ja th, väike 10px font ja alumine polsterdus. Lühendatud päevanimed (E, T, K) ei tõmba endale tähelepanu.

Päevalahtrid. Peamine teksti värv #aaa, summutatud hall. Iga lahter saab #f5f5f5 tausta ja valge äärise, mis päevad visuaalselt eraldab. padding: 8px annab numbrite ümber hingamisruumi. Hõljumisel muutub lahter valgeks, lihtne ja selge hõljumine ilma animatsioonideta.

Tühjad lahtrid. .pad eemaldab taustatäite, nii et "augud" kuu alguses ja lõpus ei näeks välja nagu aktiivsed päevad.

Kuu navigatsioon. tfoot #prev ja #next, lingid külgnevatele kuudele. Mõlemad väikese suurtähefondiga; #prev vasakul, #next paremal.

Märkus: vari kalendri ümber alloleval ekraanipildil on ainult artikli illustreerimiseks. Seda ei ole tegelikus koodis.

Kolm viisi CSS-i oma saidile lisamiseks

Lihtsamast korrektsemani.

Meetod 1: Kohandaja. Mine Välimus → Kohanda → Lisatud CSS ja kleebi kood. Plussid: kohene eelvaade, pole vaja faile puutuda. Miinused: stiilid on teemaga seotud, kaovad teemat vahetades.

Meetod 2: Lõiguplugin. Paigalda tasuta Code Snippets või WPCode ja lisa kood CSS-i lõiguna, mis on aktiveeritud kogu saidil. Plussid: stiilid elavad teemast sõltumatult. Miinused: üks plugin veel administraatoris.

Meetod 3: Alamteema. Loo alamteemas style.css ja kleebi kood sinna. See on õige tee tootmisprojektide jaoks: stiilid jäävad ellu peateema uuendustel ja elavad versioonihalduses. Kui sul veel alamteemat pole, juhendab WordPress.org-i juhend sind kümne minutiga läbi.

Tulemus

Pärast CSS-i lisamist näeb vidin välja selline:

Päevad on keskele joondatud, lahtrid on eraldatud valgete ääristega, hõljumine muudab tausta valgeks. Tühjad lahtrid ei sega, neil pole halli tausta. Kuu nimi loeb end korraliku pealkirjana.

Mida teha, kui CSS ei tööta

Kui vidin pole pärast koodi kleepimist muutunud, sisaldab sinu teema juba kõrgema prioriteediga #wp-calendari stiile. Ava brauseri inspektor (F12), leia #wp-calendar tbody td element ja kontrolli, millised reeglid kirjutavad üle background ja padding omadused.

Sisseehitatud teemastiilide ülekirjutamiseks lisa selektoritele küljeriba ID või mähi kood spetsiifilisemasse konteksti, näiteks #sidebar .widget_calendar #wp-calendar tbody td. See tõstab spetsiifilisust ilma !importantita.

Vidin või plokk: mida kasutada

Gutenbergi väljalaskmisega tõi tuumik sisse "Kalendri" ploki, klassikalise vidina kaasaegse asenduse. See väljastab sama #wp-calendari tabeli ja on stiliseeritav sama CSS-iga. Erinevus on paigutuses:

• Klassikaline vidin, läbi Välimus → Vidinad, töötab ainult küljeribadel ja teema vidinaaladel.
• "Kalendri" plokk, sisestatakse ükskõik millisele lehele või postitusse läbi plokiredaktori, lisaks vidinaaladele läbi Välimus → Vidinad (alates WordPress 5.8 on plokid ka seal saadaval).

Selle artikli CSS töötab mõlema variandiga muudatusteta. Vali plokk, kui vajad kalendrit lehe sisus; klassikaline vidin, kui see on ainult küljeribal ja sa ei soovi oma harjumuspärast töövoogu muuta.

⁉️🤔 Korduma kippuvad küsimused

Miks mu kalender ei reageeri artikli CSS-ile?

Tõenäoliselt sisaldab sinu teema juba kõrgema prioriteediga #wp-calendari stiile. Ava inspektor (F12 brauseris), klõpsa kalendrilahtril ja vaata, milline reegel kirjutab üle sinu backgroundi. Lahendus: lisa küljeriba konteineri ID selektori ette, näiteks #secondary .widget_calendar #wp-calendar tbody td. See tõstab spetsiifilisust ilma !importantita.

Kas 20 rea CSS-i jaoks on vaja luua alamteema?

Ühe vidina jaoks ei ole. Alusta Lisatud CSS-iga kohandajas (Välimus → Kohanda). Kui oled kogunud piisavalt kohandatud reegleid täielikuks kohandamiseks, siis loo alamteema. "On aeg" lävi on umbes 50 rida CSS-i või esimene functions.php muudatus.

Kas see CSS töötab Gutenbergi "Kalendri" plokiga?

Jah, täielikult. "Kalendri" plokk renderdab sama #wp-calendari tabeli samade klassidega. Kood töötab muudatusteta.

Kas ma saan värviskeemi muuta?

Lihtsalt. Asenda #f5f5f5 (lahtri taust) ja #fff (hõljumine ja ääris) oma teema värvidega. Tumeda skeemi jaoks proovi background: #2c2c2c; color: #ccc; tbody td jaoks ja background: #1a1a1a; hõljumise jaoks. Peamine on säilitada kontrast lahtri tausta ja teksti vahel.

Kas kalendrividin on 2026. aastal üldse vajalik?

Uudistesaitide ja aktiivsete blogide jaoks jah. Kalender annab lugejatele navigatsiooni vanade materjalide seas ilma kategooriate järgi otsimata. Visiitkaartide ja maandumislehtede jaoks on see kasutu. Aga kui sinu teemat müüakse turuplatsil, on stiliseeritud vidin kohustuslik: ostja ei tohiks näha paljast tabelit, isegi kui ta kalendrit ise ei kasuta.

WordPressi kalender: paranda viie minutiga või unusta

Kalender on väike asi, mis reedab täielikult lõpetamata teema. Parandatav kahekümne CSS-i rea kopeerimise ja kleepimisega.

• Endale teemat tehes kopeeri kood kohandaja Lisatud CSS-i ja unusta see.
• Müügiks teemat kirjutades lisa stiilid alamteema style.css-i, see on elementaarne hügieen.
• Kui kalendrit üldse vaja pole, stiliseeri see ikkagi. Teema ostja võib vidina lubada ja see ei tohiks katkine välja näha.

Kontrolli, kuidas sinu kalender praegu välja näeb: lisa vidin küljeribale läbi Välimus → Vidinad ja ava sait. Paljas tabel? Kood on ülal, haara see ja paranda viie minutiga.