📋 Standard WordPress CSS-klasser: et komplett 2026-jukselaken
Du åpner kodeinspektøren på nettstedet ditt og ser dusinvis av klasser på <body>: .home .logged-in .single-postid-432. Du skrev dem ikke, og ingen utvidelser er involvert. Hvor kommer de fra?
WordPress la dem til selv. CMS-et fester automatisk klasser til <body>, pakker innlegg i post_class(), markerer menyer, widgeter og kommentarer, alt rett ut av boksen, uten en eneste linje med din egen kode. Problemet er at nybegynnere enten ikke kjenner til disse klassene eller ikke forstår hvordan de skal brukes. Resultatet: milevis med ekstra CSS der én enkelt standardvelger ville vært nok.
Dette juksearket er en komplett liste over CSS-klasser som WordPress genererer som standard. Du lærer hvordan du målretter spesifikke sider via body-klasser, styler innlegg etter format og designer menyer og widgeter uten å redigere HTML. Bare det som faktisk er nyttig når du bygger et tema eller tilpasser et eksisterende.
💡 Rask oversikt:
- Åpne kodeinspektøren på en hvilken som helst side på nettstedet ditt, finn klassene
.home.single.logged-inpå<body>, og bekreft at de allerede ligger i markeringen uten din medvirkning. - Legg til regelen
.search-results .sidebar { display: none; }istyle.css: sidepanelet forsvinner bare på søkesiden, mens andre sider forblir urørt. - Skriv ut
post_class()i innleggsløkken og styl.format-videosom et bredt kort mens.format-imagefår et kvadratisk oppsett: én funksjon, ulike formater, ulike design. - Grupper widget-velgere med komma:
.widget_categories ul, .widget_archive ul, .widget_pages ul { list-style: none; }, så får fire widgeter identisk styling på én linje.
Hvordan WordPress genererer CSS-klasser: body_class() og post_class()
WordPress legger til klasser via to nøkkelfunksjoner: body_class() og post_class(). De er innebygd i kjernen og kalles av temaet når siden rendres. Du trenger ikke inkludere noe: hvis temaet følger WordPress-standardene, fungerer disse funksjonene allerede.
body_class() skriver ut en liste med klasser i class-attributtet til <body>-taggen. Hvilke klasser som blir med, avhenger av hvilken side den besøkende ser på: hjemmeside, kategori, søk, enkeltinnlegg, arkiv. Disse klassene lar deg selektivt endre bakgrunn, skrift eller skjule blokker på bestemte sider uten å lage egne maler.
post_class() gjør det samme for hvert innlegg i løkken. Den returnerer klasser som .format-image eller .sticky, som hjelper deg med å skille et sticky-innlegg fra et galleri og endre oppsettet deretter.
Begge funksjonene tar en egendefinert parameter: du kan legge til din egen klasse. For eksempel:
1 <body <?php body_class( 'my-custom-class' ); ?>>
Dette legger til .my-custom-class på alle sider. Nyttig når du inkluderer en delt CSS-fil og ønsker en unik krok for din styling.
Body-tag-klasser: komplett liste
Dette er det rikeste settet med klasser i WordPress. Under panseret analyserer body_class() gjeldende URL, sidetype og brukerstatus, og skriver deretter ut dusinvis av velgere. Nedenfor er den komplette listen over hva du kan støte på i markeringen.
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) {}
I praksis er det vanligste scenarioet å style søkesiden. Anta at du vil skjule sidepanelet på søkeresultater. I stedet for å redigere search.php, legg til dette i style.css:
1 .search-results .sidebar { display: none; }
Klassen .search-results er bare til stede på <body> når søkesiden er aktiv. På andre sider forblir sidepanelet på plass. Det samme prinsippet gjelder for .error404 .archive .logged-in og enhver annen klasse fra tabellen.
Vær oppmerksom på dynamiske klasser med suffikser: .category-(slug) .tag-(slug) .author-(user_nicename). De lar deg style en spesifikk kategoriside eller forfatterside. For eksempel vil .category-news .entry-title { color: red; } fargelegge overskrifter bare i kategorien «Nyheter».
Innleggsklasser: post_class() og innholdsformater
Funksjonen post_class() legger til klasser på <article>-elementet (eller hvilken tag temaet ditt bruker for å pakke inn innlegg). Klassene skrives ut i class-attributtet og avhenger av innholdstypen.
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 {}
En egen gruppe består av innleggsformatklasser. WordPress støtter formater rett ut av boksen: bilde, galleri, chat, lenke, sitat, status, video. post_class() legger automatisk til .format-{type} på hvert innlegg.
1 .format-image {} 2 .format-gallery {} 3 .format-chat {} 4 .format-link {} 5 .format-quote {} 6 .format-status {} 7 .format-video {}
I praksis ser dette slik ut: du viser et rutenett med tre kolonner på hjemmesiden, men ønsker én enkelt bred kolonne for videoformat. Løsningen er én linje med CSS:
1 .format-video { grid-column: span 3; }
Klassen .sticky markerer sticky-innlegg, og .hentry fungerer som en mikroformatmarkør (brukes av søkemotorer og parsere). Hovedpoenget: ikke fjern post_class() fra malen. Uten den mister temaet kompatibilitet med utvidelser som er avhengige av standard innleggsmarkering.
Navigasjonsmenyklasser: fra container til nedtrekksmenyelementer
Når du oppretter en meny i WordPress-administrasjonen, pakkes den inn i en container med en klasse du spesifiserte da du registrerte menyen. I eksempelet nedenfor er dette main-menu. Inni ligger en standard nesting av <ul> → <li> → <a>, og hvert nivå får sine egne klasser.
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 */
Klassene .current_page_item .current-cat og .current-menu-item er de mest nyttige. De uthever det aktive menypunktet automatisk. Du trenger ikke å skrive PHP-betingelser: bare sett en stil for .current-menu-item a, så vil den aktive lenken bli uthevet med farge eller understreking på alle sider på nettstedet.
Redigeringsklasser: bilder, gallerier og bildetekster
WordPress-redigeringsverktøyet (både klassisk TinyMCE og det blokkbaserte Gutenberg) legger til standardklasser på <img>, gallerier og bildetekster når du setter inn mediefiler. Når du kjenner disse klassene, kan du styre bildejustering og galleristil gjennom temaets CSS.
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 {}
Klassene .alignleft .alignright .aligncenter styrer tekstflyt. WordPress fester dem til <img> automatisk når brukeren velger justering i redigeringsverktøyet. Klassene .size-full .size-large .size-medium .size-thumbnail tilsvarer miniatyrstørrelsene som er registrert i temaet, og du kan bruke dem til å sette max-width eller border-radius for bilder av en bestemt størrelse.
.wp-caption og .wp-caption-text er beholderen og bildeteksten for et bilde. I de fleste temaer styles bildeteksten minimalt: grå, kursiv tekst under bildet. Når du kjenner klassen, kan du gjøre den om til et stilig overleggsmerke oppå bildet med én enkelt CSS-endring, uten behov for plugins.
Widget-klasser: søk, kategorier, kalender, stikkordsky
WordPress leveres med et sett standardwidgeter: Søk, Kategorier, Siste innlegg, Stikkordsky, Kalender, Meta, Arkiv, Sider, Tekst. Hver har sin egen CSS-innpakning med forutsigbare klasser. Hvis du ikke har fjernet standardwidgetene via unregister_widget(), er de til stede i sidefeltet.
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 {}
Mange klasser deler samme struktur: Kategorier, Arkiv, Sider og Siste innlegg har alle identisk nesting av ul → li → a. I praksis lar dette deg gruppere selektorer med komma og forkorte stilarket ditt:
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 }
Fire widgeter, én linje med CSS. Uten kjennskap til standardklassene ville du ha skrevet separate regler for hver widget manuelt.
Kommentarklasser: liste og skjema
Kommentarer i WordPress har det mest forseggjorte klassesystemet, spesielt hvis temaet støtter trådede diskusjoner. En flat liste krever bare tre eller fire selektorer, men det fullstendige settet dekker nesting, oddetall/partall, forfatterskap og dybde.
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
De mest nyttige i praksis er .bypostauthor (uthever kommentarer fra innleggsforfatteren med et farget merke) og .depth-{id} (styling etter nesting-nivå). Klassene .odd/.even lar deg stripe kommentarer for bedre lesbarhet i lange diskusjoner.
Video: hvordan bruke standard WordPress-klasser når du bygger et tema
En praktisk gjennomgang er alltid tydeligere enn et tørt jukseark. Denne videoen viser hvordan du finner og bruker standard WordPress-klasser når du tilpasser et eksisterende tema: fra kodeinspektøren til endringer i style.css.
⁉️🤔 Ofte stilte spørsmål
Er det obligatorisk å bruke body_class() og post_class() i temaet mitt?
Ja, hvis du utvikler et tema for offentlig distribusjon. Dette er et krav i retningslinjene for WordPress-temagjennomgang: uten
body_class()ogpost_class()vil ikke temaet bestå gjennomgangen i WordPress.org-katalogen. For et egendefinert tema du bygger til deg selv er det ikke obligatorisk, men disse funksjonene sparer deg for timevis med arbeid når du skal style enkeltsider og innholdstyper.
Kan jeg legge til min egen klasse på body eller et innlegg?
Ja. Send en streng med klassen til funksjonskallet:
body_class('my-theme-body')vil legge til.my-theme-bodypå<body>-taggen. På samme måte fungererpost_class('featured'), og klassen.featuredvil vises på utvalgte innlegg. Flere klasser sendes som en matrise:post_class( array( 'featured', 'no-sidebar' ) ).
Er klassene i denne jukseoversikten fortsatt gyldige for Gutenberg?
Ja. Selv om Gutenberg endret redigeringsverktøyet, forblir front-end-markeringen i WordPress den samme.
body_class()ogpost_class()fungerer uavhengig av redigeringsverktøy, og Gutenberg bruker også klassene.align*.wp-captionog galleriklassene. Widget-klasser er gyldige for klassiske widgeter; for blokker i sidefeltet er strukturen annerledes, men basisklassen.widgeter beholdt.
Hvor bør jeg legge til CSS-en min: i temaets style.css eller i egendefinert CSS-innstillingene?
For redigeringer som bruker standard WordPress-klasser, er det tryggeste stedet
style.cssi et child theme. Ekstra CSS i egendefinert CSS (Utseende → Tilpass → Ekstra CSS) fungerer også, men den er knyttet til det aktive temaet og lagret i databasen: når du bytter tema, går stilene tapt. Hvis du tilpasser andres tema, opprett et child theme og gjør endringene der.
Hva bør jeg gjøre hvis temaet ikke sender ut standardklasser?
Sjekk
header.phpfor tilstedeværelsen avbody_class()inne i<body>-taggen. Hvis kallet mangler, legg det til. Tilsvarende i løkkemaler:post_class()bør være iclass-attributtet til innpakningselementet for innlegg. Dette skjer sjelden i kommersielle temaer, men er vanlig i eldre eller egenutviklede temaer.
Hva du bør ta med deg fra denne jukseoversikten først
Hvis du har bygget ett eller to temaer og ikke ønsker å huske alle klassene, husk tre hovedting.
For det første. body_class() er ditt viktigste verktøy for å style spesifikke sider. .home .single .category-slug .logged-in dekker de fleste tilpasningsoppgaver uten å redigere maler.
For det andre. post_class() med formater (.format-video .format-gallery) lar deg bygge et innleggsnett der hvert format ser forskjellig ut, uten utvidelser eller ekstra betingelser i løkken.
For det tredje. Standard widget-klasser (ul → li → a) er identiske på tvers av alle widgeter. Grupper selektorer med komma, så blir style.css-filen din halvparten så lang.
Bokmerk denne jukseoversikten. Neste gang du åpner kodeinspektøren og ser en ukjent klasse på <body>, vet du hvor den kom fra og hvordan du bruker den.
Et profesjonelt team av forfattere og redaktører som spesialiserer seg på å lage kvalitetsinnhold.