Skip to content

Kaikki WordPressistä, web-kehityksestä — ja paljon muuta

📋 WordPressin oletus-CSS-luokat: täydellinen 2026 lunttilappu
WordPress-teematWordPress
6 min1,269 sanaa

📋 WordPressin oletus-CSS-luokat: täydellinen 2026 lunttilappu

Avaat sivustosi koodintarkastimen ja näet kymmeniä luokkia <body>-elementissä: .home .logged-in .single-postid-432. Et kirjoittanut niitä itse, eivätkä ne ole peräisin lisäosista. Mistä ne tulevat?

WordPress lisäsi ne itse. CMS liittää automaattisesti luokkia <body>-elementtiin, käärii artikkelit post_class()-funktioon, merkitsee valikot, vimpaimet ja kommentit, kaikki suoraan laatikosta, ilman yhtäkään riviä omaa koodiasi. Ongelma on, että aloittelijat eivät joko tiedä näistä luokista tai eivät ymmärrä, miten niitä käytetään. Lopputulos: kilometreittäin ylimääräistä CSS:ää, kun yksi vakio-valitsin riittäisi.

Tämä lunttilappu on täydellinen lista CSS-luokista, joita WordPress tuottaa oletuksena. Opit kohdistamaan tietyt sivut body-luokkien avulla, tyylittämään artikkelit formaatin mukaan ja suunnittelemaan valikot ja vimpaimet muokkaamatta HTML:ää. Vain se, mistä on oikeasti hyötyä teemaa rakentaessa tai olemassa olevaa muokatessa.

HTML- ja CSS-koodia näyttöruudulla

💡 Pikaopas:

  • Avaa koodintarkistin miltä tahansa sivustosi sivulta, etsi luokat .home .single .logged-in <body>-elementistä ja totea, että ne ovat jo valmiina merkinnöissä ilman omaa panostasi.
  • Lisää sääntö .search-results .sidebar { display: none; } tiedostoon style.css: sivupalkki katoaa vain hakusivulta, muut sivut säilyvät ennallaan.
  • Tulosta post_class() artikkelisilmukassa ja tyylitä .format-video leveäksi kortiksi, kun taas .format-image saa neliömäisen asettelun: yksi funktio, eri formaatit, eri ulkoasut.
  • Ryhmittele vimpainvalitsimet pilkuilla: .widget_categories ul, .widget_archive ul, .widget_pages ul { list-style: none; }, ja neljä vimpainta saavat saman tyylin yhdellä rivillä.

Miten WordPress tuottaa CSS-luokat: body_class() ja post_class()

WordPress lisää luokkia kahden keskeisen funktion kautta: body_class() ja post_class(). Ne on rakennettu ytimeen, ja teema kutsuu niitä sivua renderöidessään. Sinun ei tarvitse sisällyttää mitään: jos teema noudattaa WordPressin standardeja, nämä funktiot ovat jo toiminnassa.

body_class() tulostaa listan luokkia <body>-tagin class-attribuuttiin. Luokkien joukko riippuu siitä, millä sivulla kävijä on: etusivu, kategoria, haku, yksittäinen artikkeli, arkisto. Näiden luokkien avulla voit valikoivasti muuttaa taustaa, fonttia tai piilottaa lohkoja tietyillä sivuilla luomatta erillisiä sivupohjia.

post_class() tekee saman jokaiselle artikkelille silmukassa. Se palauttaa luokkia kuten .format-image tai .sticky, jotka auttavat erottamaan nostetun artikkelin galleriasta ja muuttamaan asettelua sen mukaisesti.

Molemmat funktiot hyväksyvät mukautetun parametrin: voit lisätä oman luokkasi. Esimerkiksi:

1<body <?php body_class( 'my-custom-class' ); ?>>

Tämä lisää .my-custom-class-luokan kaikille sivuille. Hyödyllistä, kun sisällytät jaetun CSS-tiedoston ja haluat yksilöllisen koukun omalle tyylittelyllesi.

Body-tagin luokat: täydellinen lista

Tämä on WordPressin rikkain luokkajoukko. Kulissien takana body_class() analysoi nykyisen URL-osoitteen, sivutyypin ja käyttäjän tilan ja tulostaa sitten kymmeniä valitsimia. Alla on täydellinen lista siitä, mitä saatat kohdata merkinnöissä.

1.rtl {}
2.home {}
3.blog {}
4.archive {}
5.date {}
6.search {}
7.paged {}
8.attachment {}
9.error404 {}
10.single postid-(id) {}
11.attachmentid-(id) {}
12.attachment-(mime-type) {}
13.author {}
14.author-(user_nicename) {}
15.category {}
16.category-(slug) {}
17.tag {}
18.tag-(slug) {}
19.page-parent {}
20.page-child parent-pageid-(id) {}
21.page-template page-template-(template file name) {}
22.search-results {}
23.search-no-results {}
24.logged-in {}
25.paged-(page number) {}
26.single-paged-(page number) {}
27.page-paged-(page number) {}
28.category-paged-(page number) {}
29.tag-paged-(page number) {}
30.date-paged-(page number) {}
31.author-paged-(page number) {}
32.search-paged-(page number) {}

Käytännössä yleisin skenaario on hakusivun tyylittely. Oletetaan, että haluat piilottaa sivupalkin hakutuloksissa. Sen sijaan, että muokkaisit search.php-tiedostoa, lisää tämä style.css-tiedostoon:

1.search-results .sidebar { display: none; }

.search-results-luokka on <body>-elementissä vain, kun hakusivu on aktiivinen. Muilla sivuilla sivupalkki pysyy paikallaan. Sama periaate toimii luokille .error404 .archive .logged-in ja mille tahansa muulle taulukon luokalle.

Kiinnitä huomiota dynaamisiin luokkiin, joissa on päätteitä: .category-(slug) .tag-(slug) .author-(user_nicename). Niiden avulla voit tyylittää tietyn kategoriasivun tai kirjoittajasivun. Esimerkiksi .category-news .entry-title { color: red; } värittää otsikot vain "Uutiset"-kategoriassa.

Artikkeliluokat: post_class() ja sisältöformaatit

post_class()-funktio lisää luokkia <article>-elementtiin (tai mihin tahansa tagiin, jolla teemasi käärii artikkelit). Luokat tulostetaan class-attribuuttiin ja ne riippuvat sisältötyypistä.

1.post-id {}
2.post {}
3.page {}
4.attachment {}
5.sticky {}
6.hentry {}
7.category-misc {}
8.category-example {}
9.tag-news {}
10.tag-wordpress {}
11.tag-markup {}

Erillisen ryhmän muodostavat artikkeli-formaattiluokat. WordPress tukee formaatteja suoraan laatikosta: image, gallery, chat, link, quote, status, video. post_class() lisää automaattisesti .format-{type}-luokan jokaiseen artikkeliin.

1.format-image {}
2.format-gallery {}
3.format-chat {}
4.format-link {}
5.format-quote {}
6.format-status {}
7.format-video {}

Käytännössä tämä näyttää seuraavalta: näytät kolmen sarakkeen ruudukon etusivulla, mutta haluat yhden leveän sarakkeen videoformaatille. Ratkaisu on yksi rivi CSS:ää:

1.format-video { grid-column: span 3; }

.sticky-luokka merkitsee nostetut artikkelit, ja .hentry toimii mikroformaattimerkkinä (hakukoneiden ja jäsentimien käytössä). Pääpointti: älä poista post_class()-funktiota sivupohjasta. Ilman sitä teema menettää yhteensopivuuden lisäosien kanssa, jotka nojaavat vakio-artikkelimerkintöihin.

Kun luot valikon WordPressin hallintapaneelissa, se kääritään säiliöön, jolla on valikkoa rekisteröidessäsi määrittelemäsi luokka. Alla olevassa esimerkissä tämä on main-menu. Sisällä on standardi sisäkkäisyys <ul> → <li> → <a>, ja jokainen taso saa omat luokkansa.

1#header .main-menu {}               /* menu container */
2#header .main-menu ul {}            /* first-level list */
3#header .main-menu ul ul {}         /* nested list (dropdown menu) */
4#header .main-menu li {}            /* menu item */
5#header .main-menu li a {}          /* item link */
6#header .main-menu li ul {}         /* dropdown items list */
7#header .main-menu li li {}         /* dropdown item */
8#header .main-menu li li a {}       /* dropdown item link */
9 
10.current_page_item {}               /* current page */
11.current-cat {}                     /* current category */
12.current-menu-item {}               /* any current item */
13.menu-item-type-taxonomy {}         /* type: category */
14.menu-item-type-post_type {}        /* type: page */
15.menu-item-type-custom {}           /* type: custom link */
16.menu-item-home {}                  /* link to home */

Luokat .current_page_item, .current-cat ja .current-menu-item ovat hyödyllisimmät. Ne korostavat aktiivisen valikkokohdan automaattisesti. Sinun ei tarvitse kirjoittaa PHP-ehtolauseita: määrität vain tyylin .current-menu-item a -valitsimelle, ja aktiivinen linkki korostuu värillä tai alleviivauksella millä tahansa sivuston sivulla.

Editoriluokat: kuvat, galleriat ja kuvatekstit

WordPressin editori (sekä klassinen TinyMCE että lohkopohjainen Gutenberg) lisää vakioluokkia <img>-elementteihin, gallerioihin ja kuvateksteihin, kun mediatiedostoja lisätään. Kun tunnet nämä luokat, voit hallita kuvien tasausta ja gallerian tyylitystä teemasi CSS:n kautta.

1.entry-content img {}
2.alignleft, img.alignleft {}
3.alignright, img.alignright {}
4.aligncenter, img.aligncenter {}
5.alignnone, img.alignnone {}
6 
7.wp-caption {}
8.wp-caption img {}
9.wp-caption p.wp-caption-text {}
10 
11.wp-smiley {}
12 
13blockquote.left {}
14blockquote.right {}
15 
16.gallery dl {}
17.gallery dt {}
18.gallery dd {}
19.gallery dl a {}
20.gallery dl img {}
21.gallery-caption {}
22 
23.size-full {}
24.size-large {}
25.size-medium {}
26.size-thumbnail {}

Luokat .alignleft, .alignright ja .aligncenter hallitsevat tekstin rivitystä. WordPress liittää ne <img>-elementtiin automaattisesti, kun käyttäjä valitsee tasauksen editorissa. Luokat .size-full, .size-large, .size-medium ja .size-thumbnail vastaavat teemaan rekisteröityjä pienoiskuvakokoja, ja voit käyttää niitä asettaaksesi max-width-arvon tai reunuksen pyöristyksen tietyn kokoisille kuville.

.wp-caption ja .wp-caption-text ovat kuvan säiliö ja kuvateksti. Useimmissa teemoissa kuvateksti on tyylitelty minimaalisesti: harmaata kursivoitua tekstiä kuvan alla. Kun tunnet luokan, voit muuttaa sen siistiksi päällekkäismerkinnäksi valokuvan päälle yhdellä CSS-muokkauksella ilman lisäosia.

Vimpainluokat: haku, kategoriat, kalenteri, avainsanapilvi

WordPress sisältää joukon vakiovimpaimia: Haku, Kategoriat, Uusimmat artikkelit, Avainsanapilvi, Kalenteri, Meta, Arkistot, Sivut, Teksti. Jokaisella on oma CSS-säiliönsä, jolla on ennustettavat luokat. Jos et ole poistanut vakiovimpaimia unregister_widget()-funktiolla, ne ovat sivupalkissa.

1.widget {}
2 
3.widget_search {}
4#searchform {}
5.screen-reader-text {}
6 
7.widget_meta {}
8.widget_meta ul {}
9.widget_meta ul li {}
10.widget_meta ul li a {}
11 
12.widget_links {}
13.widget_links ul {}
14.widget_links ul li {}
15.widget_links ul li a {}
16 
17.widget_archive {}
18.widget_archive ul {}
19.widget_archive ul li {}
20.widget_archive ul li a {}
21.widget_archive select {}
22.widget_archive option {}
23 
24.widget_pages {}
25.widget_pages ul {}
26.widget_pages ul li {}
27.widget_pages ul li a {}
28 
29.widget_tag_cloud {}
30.widget_tag_cloud a {}
31.widget_tag_cloud a:after {}
32.widget_tag_cloud a:before {}
33 
34.widget_calendar {}
35#calendar_wrap {}
36#calendar_wrap th {}
37#calendar_wrap td {}
38#wp-calendar tr td {}
39#wp-calendar caption {}
40#wp-calendar a {}
41#wp-calendar #today {}
42#wp-calendar #prev {}
43#wp-calendar #next {}
44#wp-calendar #next a {}
45#wp-calendar #prev a {}
46 
47.widget_categories {}
48.widget_categories ul {}
49.widget_categories ul li {}
50.widget_categories ul ul.children {}
51.widget_categories a {}
52.widget_categories select {}
53.widget_categories select#cat {}
54.widget_categories select.postform {}
55.widget_categories option {}
56.widget_categories .level-0 {}
57.widget_categories .level-1 {}
58.widget_categories .level-2 {}
59.widget_categories .level-3 {}
60 
61.widget_recent_comments {}
62#recentcomments {}
63#recentcomments li {}
64#recentcomments li a {}
65 
66.widget_recent_entries {}
67.widget_recent_entries ul {}
68.widget_recent_entries ul li {}
69.widget_recent_entries ul li a {}
70 
71.widget_text {}
72.textwidget {}
73.textwidget p {}

Monilla luokilla on sama rakenne: Kategoriat-, Arkistot-, Sivut- ja Uusimmat artikkelit -vimpaimissa on kaikissa identtinen ul → li → a-sisäkkäisyys. Käytännössä tämän ansiosta voit ryhmitellä valitsimet pilkuilla ja lyhentää tyylitiedostoasi:

1.widget_categories ul,
2.widget_archive ul,
3.widget_pages ul,
4.widget_recent_entries ul {
5    list-style: none;
6    padding-left: 0;
7}

Neljä vimpainta, yksi rivi CSS:ää. Tuntematta vakioluokkia kirjoittaisit erilliset säännöt jokaiselle vimpaimelle käsin.

Kommenttiluokat: lista ja lomake

WordPressin kommenteissa on kaikkein yksityiskohtaisin luokkajärjestelmä, varsinkin jos teema tukee ketjutettuja keskusteluja. Tasainen lista vaatii vain kolme tai neljä valitsinta, mutta koko sarja kattaa sisäkkäisyyden, parittomuuden/parillisuuden, kirjoittajuuden ja syvyyden.

1/* Comment list */
2.commentlist {}
3.commentlist li {}
4.commentlist li p {}
5.commentlist li ul {}
6.commentlist .reply {}
7.commentlist .reply a {}
8 
9.commentlist .alt {}
10.commentlist .odd {}
11.commentlist .even {}
12.commentlist .thread-alt {}
13.commentlist .thread-odd {}
14.commentlist .thread-even {}
15 
16.commentlist .vcard {}
17.commentlist .vcard cite.fn {}
18.commentlist .vcard span.says {}
19.commentlist .vcard img.photo {}
20.commentlist .vcard img.avatar {}
21.commentlist .vcard cite.fn a.url {}
22 
23.commentlist .comment-meta {}
24.commentlist .comment-meta a {}
25.commentlist .commentmetadata {}
26.commentlist .commentmetadata a {}
27 
28.commentlist .parent {}
29.commentlist .comment {}
30.commentlist .children {}
31.commentlist .pingback {}
32.commentlist .bypostauthor {}
33.commentlist .comment-author {}
34.commentlist .comment-author-admin {}
35 
36.commentlist li ul.children li {}
37.commentlist li ul.children li.alt {}
38.commentlist li ul.children li.byuser {}
39.commentlist li ul.children li.comment {}
40.commentlist li ul.children li.depth-{id} {}
41.commentlist li ul.children li.bypostauthor {}
42.commentlist li ul.children li.comment-author-admin {}
43 
44#cancel-comment-reply {}
45#cancel-comment-reply a {}
46 
47/* Comment form */
48#respond {}
49#reply-title {}
50#cancel-comment-reply-link {}
51#commentform {}
52#author {}
53#email {}
54#url {}
55#comment
56#submit
57.comment-notes {}
58.required {}
59.comment-form-author {}
60.comment-form-email {}
61.comment-form-url {}
62.comment-form-comment {}
63.form-allowed-tags {}
64.form-submit

Käytännössä hyödyllisimmät ovat .bypostauthor (korostaa artikkelin kirjoittajan kommentit värillisellä merkillä) ja .depth-{id} (tyylittely sisäkkäisyystason mukaan). Luokat .odd ja .even mahdollistavat kommenttien raidoittamisen paremman luettavuuden saavuttamiseksi pitkissä keskusteluissa.

Video: miten WordPressin vakioluokkia käytetään teemaa rakennettaessa

Käytännön läpikäynti on aina selkeämpi kuin kuiva lunttilappu. Tämä video näyttää, miten WordPressin vakioluokat löydetään ja miten niitä sovelletaan olemassa olevaa teemaa muokattaessa: koodintarkastajasta muokkauksiin style.css-tiedostossa.

⁉️🤔 Usein kysytyt kysymykset

Onko body_class() ja post_class() pakollisia teemassani?

Kyllä, jos kehität teemaa julkiseen jakeluun. Tämä on WordPressin teematarkastuksen standardien vaatimus: ilman body_class()- ja post_class()-funktioita teema ei läpäise tarkastusta WordPress.org-hakemistossa. Itselle rakennetussa räätälöidyssä teemassa se ei ole pakollista, mutta nämä funktiot säästävät tuntien työn, kun muotoilet yksittäisiä sivuja ja artikkelityyppejä.

Voinko lisätä oman luokan body- tai post-elementtiin?

Kyllä. Välitä merkkijono, jossa on luokka, funktiokutsulle: body_class('my-theme-body') lisää .my-theme-body-luokan <body>-tagiin. Vastaavasti post_class('featured') toimii samalla tavalla, ja .featured-luokka ilmestyy valituille artikkeleille. Useita luokkia välitetään taulukkona: post_class( array( 'featured', 'no-sidebar' ) ).

Ovatko tämän muistilistan luokat edelleen voimassa Gutenbergissa?

Kyllä. Vaikka Gutenberg muutti editoria, WordPressin front-end-merkintäkieli on pysynyt samana. body_class() ja post_class() toimivat editorista riippumatta, ja Gutenberg käyttää myös .align*-, .wp-caption- ja gallerialuokkia. Vimpainluokat ovat voimassa perinteisille vimpaimille; sivupalkin lohkoissa rakenne poikkeaa, mutta perus .widget-luokka säilyy.

Mihin minun pitäisi lisätä CSS:ni: teeman style.css-tiedostoon vai muokkaimen asetuksiin?

Muokkauksille, jotka käyttävät WordPressin vakioluokkia, turvallisin paikka on lapsiteeman style.css. Lisä-CSS muokkaimessa (Ulkoasu → Mukauta → Lisä-CSS) toimii myös, mutta se on sidottu aktiiviseen teemaan ja tallennettu tietokantaan: kun vaihdat teemaa, tyylit katoavat. Jos muokkaat jonkun toisen teemaa, luo lapsiteema ja tee muutokset sinne.

Mitä teen, jos teema ei tulosta vakioluokkia?

Tarkista header.php-tiedostosta, löytyykö body_class() <body>-tagin sisältä. Jos kutsu puuttuu, lisää se. Vastaavasti silmukkapohjissa: post_class()-funktion tulisi olla artikkeleita ympäröivän elementin class-attribuutissa. Tätä tapahtuu harvoin kaupallisissa teemoissa, mutta se on yleistä vanhemmissa tai itse rakennetuissa teemoissa.

Mitä tästä muistilistasta kannattaa ottaa talteen ensin

Jos olet rakentanut yhden tai kaksi teemaa etkä halua opetella ulkoa kaikkia luokkia, muista kolme pääasiaa.

Ensinnäkin. body_class() on päätyökalusi tiettyjen sivujen muotoiluun. .home, .single, .category-slug ja .logged-in kattavat useimmat räätälöintitehtävät ilman, että joudut muokkaamaan pohjia.

Toiseksi. post_class() ja artikkeliformaatit (.format-video, .format-gallery) mahdollistavat artikkeliruudukon rakentamisen, jossa jokainen formaatti näyttää erilaiselta ilman lisäosia tai ylimääräisiä ehtoja silmukassa.

Kolmanneksi. Vakioidut vimpainluokat (ul → li → a) ovat identtisiä kaikissa vimpaimissa. Ryhmittele valitsimet pilkuilla, niin style.css-tiedostosi on puolet lyhyempi.

Lisää tämä muistilista kirjanmerkkeihin. Kun seuraavan kerran avaat koodintarkastimen ja näet tuntemattoman luokan <body>-elementissä, tiedät, mistä se tuli ja miten sitä käytetään.

Toimitus
ToimitusToimitustiimi→ All publications

Ammattimainen kirjoittajien ja toimittajien tiimi, joka on erikoistunut laadukkaan sisällön luomiseen.