📋 Standard CSS-klasser i WordPress: ett komplett 2026-fuskblad
Du öppnar kodinspektören på din sajt och ser dussintals klasser på <body>: .home .logged-in .single-postid-432. Du har inte skrivit dem, inga plugins är inblandade. Var kommer de ifrån?
WordPress har lagt till dem själv. CMS:et fäster automatiskt klasser på <body>, omsluter inlägg i post_class(), märker upp menyer, widgetar och kommentarer, allt direkt ur lådan, utan en enda rad kod från dig. Problemet är att nybörjare antingen inte känner till dessa klasser eller inte förstår hur man använder dem. Resultatet: milslång extra-CSS där en enda standardselektor hade räckt.
Den här lathunden är en komplett lista över CSS-klasser som WordPress genererar som standard. Du lär dig hur du träffar specifika sidor via body-klasser, stilsätter inlägg efter format och designar menyer och widgetar utan att redigera HTML. Bara sådant som faktiskt är användbart när du bygger ett tema eller anpassar ett befintligt.
💡 Snabb överblick:
- Öppna kodinspektören på valfri sida på din sajt, hitta klasserna
.home.single.logged-inpå<body>och bekräfta att de redan finns i märkspråket utan din inblandning. - Lägg till regeln
.search-results .sidebar { display: none; }istyle.css: sidofältet försvinner bara på söksidan, medan andra sidor lämnas orörda. - Skriv ut
post_class()i inläggsloopen och stilsätt.format-videosom ett brett kort medan.format-imagefår en kvadratisk layout: en funktion, olika format, olika designer. - Gruppera widgetselektorer med kommatecken:
.widget_categories ul, .widget_archive ul, .widget_pages ul { list-style: none; }, så får fyra widgetar identisk stilsättning på en rad.
Hur WordPress genererar CSS-klasser: body_class() och post_class()
WordPress lägger till klasser via två centrala funktioner: body_class() och post_class(). De är inbyggda i kärnan och anropas av temat när sidan renderas. Du behöver inte inkludera något: om temat följer WordPress standarder är dessa funktioner redan aktiva.
body_class() skriver ut en lista med klasser i class-attributet på <body>-taggen. Vilka klasser som ingår beror på vilken sida besökaren tittar på: startsida, kategori, sökning, enskilt inlägg, arkiv. Dessa klasser låter dig selektivt ändra bakgrund, typsnitt eller dölja block på specifika sidor utan att skapa separata mallar.
post_class() gör samma sak för varje inlägg i loopen. Den returnerar klasser som .format-image eller .sticky, vilket hjälper till att skilja ett fastnålat inlägg från ett galleri och ändra layouten därefter.
Båda funktionerna tar en anpassad parameter: du kan lägga till din egen klass. Till exempel:
1 <body <?php body_class( 'my-custom-class' ); ?>>
Detta lägger till .my-custom-class på alla sidor. Användbart när du inkluderar en delad CSS-fil och vill ha en unik krok för din stilsättning.
Body-taggens klasser: komplett lista
Detta är den mest omfattande uppsättningen klasser i WordPress. Under huven analyserar body_class() den aktuella webbadressen, sidtypen och användarstatusen och skriver sedan ut dussintals selektorer. Nedan är den kompletta listan över vad du kan stöta på i märkspråket.
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 praktiken är det vanligaste scenariot att stilsätta söksidan. Anta att du vill dölja sidofältet på sökresultatsidan. Istället för att redigera search.php, lägg till detta i style.css:
1 .search-results .sidebar { display: none; }
Klassen .search-results finns bara på <body> när söksidan är aktiv. På andra sidor ligger sidofältet kvar. Samma princip fungerar för .error404 .archive .logged-in och alla andra klasser från tabellen.
Var uppmärksam på dynamiska klasser med suffix: .category-(slug) .tag-(slug) .author-(user_nicename). De låter dig stilsätta en specifik kategorisida eller författarsida. Till exempel kommer .category-news .entry-title { color: red; } att färga rubriker endast i kategorin "Nyheter".
Inläggsklasser: post_class() och innehållsformat
Funktionen post_class() lägger till klasser på <article>-elementet (eller vilken tag ditt tema nu använder för att omsluta inlägg). Klasserna skrivs ut i class-attributet och beror på innehållstypen.
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 separat grupp utgörs av inläggsformatklasser. WordPress stöder format direkt ur lådan: bild, galleri, chatt, länk, citat, status, video. post_class() lägger automatiskt till .format-{type} på varje inlägg.
1 .format-image {} 2 .format-gallery {} 3 .format-chat {} 4 .format-link {} 5 .format-quote {} 6 .format-status {} 7 .format-video {}
I praktiken ser det ut så här: du visar ett rutnät med tre kolumner på startsidan, men vill ha en enda bred kolumn för videoformat. Lösningen är en rad CSS:
1 .format-video { grid-column: span 3; }
Klassen .sticky markerar fastnålade inlägg, och .hentry fungerar som en mikroformatmarkör (används av sökmotorer och parsers). Huvudpoängen: ta inte bort post_class() från mallen. Utan den förlorar temat kompatibilitet med plugins som förlitar sig på standardiserad inläggsuppmärkning.
Navigeringsmenyklasser: från container till dropdown-objekt
När du skapar en meny i WordPress admin är den omsluten i en container med en klass du angav när du registrerade menyn. I exemplet nedan är detta main-menu. Inuti finns en standardnästling av <ul> → <li> → <a>, och varje nivå får sina egna 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 */
Klasserna .current_page_item .current-cat och .current-menu-item är de mest användbara. De markerar automatiskt det aktiva menyvalet. Du behöver inte skriva PHP-villkor: sätt bara en stil för .current-menu-item a, så kommer den aktiva länken att framhävas med färg eller understrykning på vilken sida som helst på webbplatsen.
Redigeringsklasser: bilder, gallerier och bildtexter
WordPress-redigeraren (både klassiska TinyMCE och blockbaserade Gutenberg) lägger till standardklasser på <img>, gallerier och bildtexter när du infogar mediefiler. Genom att känna till dessa klasser kan du styra bildjustering och galleristil via ditt temas 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 {}
Klasserna .alignleft .alignright .aligncenter styr textflödet runt bilder. WordPress lägger till dem på <img> automatiskt när användaren väljer justering i redigeraren. Klasserna .size-full .size-large .size-medium .size-thumbnail motsvarar de miniatyrstorlekar som registrerats i temat, och du kan använda dem för att sätta max-width eller border-radius för bilder av en specifik storlek.
.wp-caption och .wp-caption-text är behållaren och bildtexten för en bild. I de flesta teman är bildtexten stilren: grå kursiv text under bilden. När du kan klassen kan du förvandla den till en snygg överläggsbricka ovanpå fotot med en enda CSS-redigering, inga tillägg behövs.
Widgetklasser: sök, kategorier, kalender, taggmoln
WordPress levereras med en uppsättning standardwidgets: Sök, Kategorier, Senaste inlägg, Taggmoln, Kalender, Meta, Arkiv, Sidor, Text. Var och en har sin egen CSS-wrapper med förutsägbara klasser. Om du inte har tagit bort standardwidgetarna via unregister_widget() finns de i sidofältet.
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 {}
Många klasser delar samma struktur: Kategorier, Arkiv, Sidor och Senaste inlägg har alla identisk nästling av ul → li → a. I praktiken låter detta dig gruppera selektorer med kommatecken och förkorta din stilmall:
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 }
Fyra widgets, en rad CSS. Utan att känna till standardklasserna skulle du skriva separata regler för varje widget manuellt.
Kommentarsklasser: lista och formulär
Kommentarer i WordPress har det mest utarbetade klassystemet, särskilt om temat stöder trådade diskussioner. En platt lista kräver bara tre eller fyra selektorer, men den fullständiga uppsättningen täcker nästling, udda/jämn paritet, författarskap och djup.
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 användbara i praktiken är .bypostauthor (framhäver kommentarer från inläggsförfattaren med en färgad bricka) och .depth-{id} (styling efter nästlingsnivå). Klasserna .odd/.even låter dig randa kommentarer för bättre läsbarhet i långa diskussioner.
Video: hur du använder standard WordPress-klasser när du bygger ett tema
En praktisk genomgång är alltid tydligare än ett torrt fusklapp. Den här videon visar hur du hittar och tillämpar standard WordPress-klasser när du anpassar ett befintligt tema: från kodinspektören till redigeringar i style.css.
⁉️🤔 Vanliga frågor
Är det obligatoriskt att använda body_class() och post_class() i mitt tema?
Ja, om du utvecklar ett tema för offentlig distribution. Detta är ett krav i WordPress granskningsstandarder för teman: utan
body_class()ochpost_class()kommer temat inte att godkännas i WordPress.org-katalogen. För ett anpassat tema som du bygger för eget bruk är det inte obligatoriskt, men dessa funktioner sparar timmar av arbete när du stylar enskilda sidor och inläggstyper.
Kan jag lägga till min egen klass på body eller ett inlägg?
Ja. Skicka en sträng med klassen till funktionsanropet:
body_class('my-theme-body')lägger till.my-theme-bodypå<body>-taggen. På samma sätt fungerarpost_class('featured'), och klassen.featuredvisas på valda inlägg. Flera klasser skickas som en array:post_class( array( 'featured', 'no-sidebar' ) ).
Är klasserna i denna lathund fortfarande giltiga för Gutenberg?
Ja. Även om Gutenberg förändrade editorn är frontend-märkningen i WordPress densamma.
body_class()ochpost_class()fungerar oavsett editor, och Gutenberg använder också.align*.wp-captionoch galleriklasserna. Widgetklasser är giltiga för klassiska widgetar; för block i sidofältet skiljer sig strukturen, men grundklassen.widgetfinns kvar.
Var ska jag lägga min CSS: i temats style.css eller i inställningarna för anpassaren?
För redigeringar som använder standardklasser från WordPress är den säkraste platsen
style.cssi ett barntema. Extra CSS i anpassaren (Utseende → Anpassa → Extra CSS) fungerar också, men den är knuten till det aktiva temat och lagras i databasen: när du byter tema försvinner stilarna. Om du anpassar någon annans tema, skapa ett barntema och gör ändringarna där.
Vad ska jag göra om temat inte matar ut standardklasser?
Kontrollera
header.phpför förekomsten avbody_class()inuti<body>-taggen. Om anropet saknas, lägg till det. På samma sätt i loop-mallar:post_class()ska finnas iclass-attributet för det omslutande elementet för inlägg. Detta händer sällan i kommersiella teman, men det är vanligt i äldre eller egenbyggda teman.
Vad du ska ta med dig från denna lathund först
Om du har byggt ett eller två teman och inte vill memorera alla klasser, kom ihåg tre huvudsaker.
För det första. body_class() är ditt främsta verktyg för att styla specifika sidor. .home .single .category-slug .logged-in täcker de flesta anpassningsbehov utan att redigera mallar.
För det andra. post_class() med format (.format-video .format-gallery) låter dig bygga ett inläggsrutnät där varje format ser olika ut, utan tillägg eller extra villkor i loopen.
För det tredje. Standard widgetklasser (ul → li → a) är identiska för alla widgetar. Gruppera selektorer med kommatecken, så blir din style.css hälften så lång.
Bokmärk denna lathund. Nästa gång du öppnar kodinspektören och ser en obekant klass på <body> vet du var den kom ifrån och hur du använder den.
Ett professionellt team av skribenter och redaktörer specialiserade på att skapa kvalitetsinnehåll.