📋 WordPressi vaikimisi CSS klassid: täielik 2026. aasta spikrileht
Avad saidi koodiinspektoris ja näed <body> elemendil kümneid klasse: .home .logged-in .single-postid-432. Sa ei kirjutanud neid, pistikprogrammid ei ole seotud. Kust need tulevad?
WordPress lisas need ise. CMS kinnitab automaatselt klasse <body> elemendile, mähib postitused funktsiooniga post_class(), märgendab menüüd, vidinad ja kommentaarid, kõik see toimib karbist välja, ilma ühegi sinu koodireata. Probleem on selles, et algajad kas ei tea neist klassidest või ei mõista, kuidas neid kasutada. Tulemus: kilomeetrite viisi üleliigset CSS-i, kuigi piisaks ühest standardsest selektorist.
See spikker on täielik nimekiri CSS-klassidest, mida WordPress vaikimisi genereerib. Sa õpid, kuidas sihtida body-klasside abil konkreetseid lehti, kujundada postitusi vormingu järgi ning kujundada menüüsid ja vidinaid ilma HTML-i muutmata. Ainult see, mis on tegelikult kasulik teema loomisel või olemasoleva kohandamisel.
💡 Kiire ülevaade:
- Ava koodiinspektor oma saidi mis tahes lehel, leia
<body>elemendilt klassid.home.single.logged-inja veendu, et need on juba märgendis ilma sinu sekkumiseta. - Lisa faili
style.cssreegel.search-results .sidebar { display: none; }: külgriba kaob ainult otsingulehel, jättes teised lehed puutumata. - Väljasta postituste tsüklis
post_class()ja kujunda.format-videolaia kaardina, samal ajal kui.format-imagesaab ruudukujulise paigutuse: üks funktsioon, erinevad vormingud, erinevad kujundused. - Rühmita vidina selektorid komadega:
.widget_categories ul, .widget_archive ul, .widget_pages ul { list-style: none; }ja neli vidinat saavad ühe reaga identse kujunduse.
Kuidas WordPress genereerib CSS-klasse: body_class() ja post_class()
WordPress lisab klasse kahe võtmefunktsiooni kaudu: body_class() ja post_class(). Need on tuuma sisse ehitatud ja teema kutsub neid lehe renderdamisel. Sa ei pea midagi kaasama: kui teema järgib WordPressi standardeid, siis need funktsioonid juba töötavad.
body_class() väljastab klasside loendi <body> sildi class atribuuti. Klasside komplekt sõltub sellest, millist lehte külastaja vaatab: avaleht, kategooria, otsing, üksikpostitus, arhiiv. Need klassid võimaldavad sul valikuliselt muuta tausta, fonti või peita plokke konkreetsetel lehtedel ilma eraldi malle loomata.
post_class() teeb sama iga postituse kohta tsüklis. See tagastab klassid nagu .format-image või .sticky, mis aitavad eristada kleepuvat postitust galeriist ja muuta paigutust vastavalt.
Mõlemad funktsioonid aktsepteerivad kohandatud parameetrit: saad lisada oma klassi. Näiteks:
1 <body <?php body_class( 'my-custom-class' ); ?>>
See lisab .my-custom-class kõigile lehtedele. Kasulik, kui kaasad jagatud CSS-faili ja soovid oma kujunduse jaoks unikaalset konksu.
Body-sildi klassid: täielik nimekiri
See on WordPressi kõige rikkalikum klasside komplekt. Kapoti all analüüsib body_class() praegust URL-i, lehe tüüpi ja kasutaja staatust ning väljastab seejärel kümneid selektoreid. Allpool on täielik nimekiri sellest, mida võid märgendis kohata.
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) {}
Praktikas on kõige tavalisem stsenaarium otsingulehe kujundamine. Oletame, et soovid otsingutulemustes külgriba peita. Selle asemel, et muuta faili search.php, lisa faili style.css:
1 .search-results .sidebar { display: none; }
Klass .search-results on <body> elemendil ainult siis, kui otsinguleht on aktiivne. Teistel lehtedel jääb külgriba oma kohale. Sama põhimõte töötab ka .error404 .archive .logged-in ja mis tahes muu tabelis oleva klassi puhul.
Pööra tähelepanu dünaamilistele klassidele koos sufiksiga: .category-(slug) .tag-(slug) .author-(user_nicename). Need võimaldavad kujundada konkreetset kategooria- või autorilehte. Näiteks .category-news .entry-title { color: red; } värvib pealkirju ainult kategoorias „Uudised".
Postituste klassid: post_class() ja sisuvormingud
Funktsioon post_class() lisab klasse <article> elemendile (või mis tahes sildile, mida sinu teema postituste mähkimiseks kasutab). Klassid väljastatakse class atribuuti ja sõltuvad sisu tüübist.
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 {}
Omaette rühma moodustavad postituse vormingu klassid. WordPress toetab karbist välja vorminguid: pilt, galerii, vestlus, link, tsitaat, staatus, video. post_class() lisab automaatselt igale postitusele .format-{type}.
1 .format-image {} 2 .format-gallery {} 3 .format-chat {} 4 .format-link {} 5 .format-quote {} 6 .format-status {} 7 .format-video {}
Praktikas näeb see välja järgmine: kuvad avalehel kolmeveerulist ruudustikku, kuid soovid video vormingu jaoks ühte laia veergu. Lahendus on üks rida CSS-i:
1 .format-video { grid-column: span 3; }
Klass .sticky tähistab kleepuvaid postitusi ja .hentry toimib mikroformaadi markerina (kasutavad otsingumootorid ja parserid). Peamine mõte: ära eemalda post_class() mallist. Ilma selleta kaotab teema ühilduvuse pistikprogrammidega, mis tuginevad standardsele postituste märgendusele.
Navigatsioonimenüü klassid: konteinerist rippmenüü elementideni
Kui lood WordPressi administraatoris menüü, mähitakse see konteinerisse klassiga, mille määrasid menüü registreerimisel. Allolevas näites on selleks main-menu. Sees on standardne pesitsus <ul> → <li> → <a> ja iga tase saab oma klassid.
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 */
Klassid .current_page_item, .current-cat ja .current-menu-item on kõige kasulikumad. Need tõstavad aktiivse menüüelemendi automaatselt esile. Sa ei pea kirjutama PHP tingimuslauseid: lihtsalt määra stiil .current-menu-item a jaoks ning aktiivne link tõstetakse esile värvi või allajoonimisega saidi igal lehel.
Redaktori klassid: pildid, galeriid ja allkirjad
WordPressi redaktor (nii klassikaline TinyMCE kui ka plokipõhine Gutenberg) lisab meediumifailide sisestamisel standardsed klassid elementidele <img>, galeriidele ja allkirjadele. Neid klasse tundes saad oma teema CSS-i kaudu juhtida piltide joondust ja galerii stiili.
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 13 blockquote.left {} 14 blockquote.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 {}
Klassid .alignleft, .alignright, .aligncenter juhivad teksti mähkimist. WordPress lisab need <img> elemendile automaatselt, kui kasutaja valib redaktoris joonduse. Klassid .size-full, .size-large, .size-medium, .size-thumbnail vastavad teemas registreeritud pisipildi suurustele ning saad neid kasutada, et määrata kindla suurusega piltidele max-width või border-radius.
.wp-caption ja .wp-caption-text on pildi konteiner ja allkiri. Enamikus teemades on allkirja stiil minimaalne: hall kaldkiri pildi all. Klassi tundes saad selle ühe CSS-i muudatusega muuta kenaks ülekattega märgiks foto peal, ilma pluginaid kasutamata.
Vidinaklassid: otsing, kategooriad, kalender, märksõnapilv
WordPressiga tuleb kaasa standardsete vidinate komplekt: Otsing, Kategooriad, Viimased postitused, Märksõnapilv, Kalender, Metaandmed, Arhiivid, Lehed, Tekst. Igal neist on oma CSS-ümbris etteaimatavate klassidega. Kui sa ei ole standardseid vidinaid unregister_widget() kaudu eemaldanud, on need külgribal olemas.
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 {}
Paljud klassid jagavad sama struktuuri: Kategooriad, Arhiivid, Lehed ja Viimased postitused on kõik identse pesastusega ul → li → a. Praktikas võimaldab see sul selektoreid komadega grupeerida ja oma stiililehte lühendada:
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 }
Neli vidinat, üks rida CSS-i. Standardseid klasse teadmata kirjutaksid sa igale vidinale käsitsi eraldi reeglid.
Kommentaaride klassid: loend ja vorm
WordPressi kommentaaridel on kõige keerukam klasside süsteem, eriti kui teema toetab lõimitud arutelusid. Lame loend nõuab vaid kolme või nelja selektorit, kuid täiskomplekt hõlmab pesastust, paaris/paaritu jaotust, autorlust ja sügavust.
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
Praktikas on kõige kasulikumad .bypostauthor (tõstab postituse autori kommentaarid esile värvilise märgiga) ja .depth-{id} (stiilimine pesastustaseme järgi). Klassid .odd/.even võimaldavad pikkades aruteludes parema loetavuse huvides kommentaare triibutada.
Video: kuidas kasutada standardseid WordPressi klasse teema loomisel
Praktiline läbikäik on alati selgem kui kuiv spikker. See video näitab, kuidas leida ja rakendada standardseid WordPressi klasse olemasoleva teema kohandamisel: alates koodiinspektorist kuni muudatusteni failis style.css.
⁉️🤔 Korduma kippuvad küsimused
Kas body_class() ja post_class() kasutamine minu teemas on kohustuslik?
Jah, kui arendate teemat avalikuks levitamiseks. See on WordPressi teema ülevaatuse standardite nõue: ilma
body_class()japost_class()-ita ei läbi teema WordPress.org kataloogis ülevaatust. Enda jaoks ehitatud kohandatud teema puhul pole see kohustuslik, kuid need funktsioonid säästavad tunde tööd üksikute lehtede ja postitüüpide kujundamisel.
Kas ma saan lisada oma klassi body elemendile või postitusele?
Jah. Edastage funktsiooni väljakutsele string koos klassiga:
body_class('my-theme-body')lisab.my-theme-body<body>sildile. Samamoodi töötabpost_class('featured')ja.featuredklass ilmub valitud postitustel. Mitu klassi edastatakse massiivina:post_class( array( 'featured', 'no-sidebar' ) ).
Kas selle spikrilehe klassid kehtivad endiselt Gutenbergi puhul?
Jah. Kuigi Gutenberg muutis redaktorit, jääb WordPressi esikülje märgend samaks.
body_class()japost_class()töötavad sõltumata redaktorist ning Gutenberg kasutab samuti.align*,.wp-captionja galerii klasse. Vidinaklassid kehtivad klassikaliste vidinate puhul; külgriba plokkide puhul on struktuur erinev, kuid baasklass.widgetsäilib.
Kuhu peaksin oma CSS-i lisama: teema style.css faili või kohandaja seadetesse?
Redigeerimiste puhul, mis kasutavad standardseid WordPressi klasse, on kõige turvalisem koht alamteema
style.css. Täiendav CSS kohandajas (Välimus → Kohanda → Täiendav CSS) töötab samuti, kuid see on seotud aktiivse teemaga ja salvestatakse andmebaasi: kui teemat vahetate, lähevad stiilid kaotsi. Kui kohandate kellegi teise teemat, looge alamteema ja tehke muudatused seal.
Mida teha, kui teema ei väljasta standardseid klasse?
Kontrollige
header.phpfailisbody_class()olemasolu<body>sildi sees. Kui väljakutse puudub, lisage see. Sarnaselt tsükli mallides:post_class()peaks olema postitusi ümbritseva elemendiclassatribuudis. Kommertsteemade puhul juhtub seda harva, kuid vanemate või ise ehitatud teemade puhul on see tavaline.
Mida sellelt spikrilehelt esimesena kaasa võtta
Kui olete ehitanud ühe või kaks teemat ega soovi kõiki klasse pähe õppida, pidage meeles kolme peamist asja.
Esiteks. body_class() on teie peamine tööriist konkreetsete lehtede kujundamiseks. .home, .single, .category-slug, .logged-in katavad enamiku kohandamisülesandeid ilma malle redigeerimata.
Teiseks. post_class() koos vormingutega (.format-video, .format-gallery) võimaldab ehitada postituste ruudustiku, kus iga vorming näeb välja erinev, ilma pluginateta või lisatingimusteta tsüklis.
Kolmandaks. Standardsed vidinaklassid (ul → li → a) on kõigi vidinate lõikes identsed. Rühmitage selektorid komadega ja teie style.css on poole lühem.
Lisage see spikrileht järjehoidjatesse. Järgmine kord, kui avate koodiinspektori ja näete <body> elemendil võõrast klassi, teate, kust see tuli ja kuidas seda kasutada.
Professionaalne kirjanike ja toimetajate meeskond, kes on spetsialiseerunud kvaliteetse sisu loomisele.