WordPress lägger till sina egna CSS-klasser till olika element i de flesta teman. Dessa standardklasser hjälper till att automatiskt styla olika delar av din webbplats.
Att känna till dessa standard-CSS-klasser kan vara riktigt användbart. De gör det enklare att anpassa utseendet på din webbplats utan att börja från noll.
Till exempel, när vi började använda CSS på våra webbplatser, fann vi det mycket enklare att styla vårt blogginnehåll för att få det att sticka ut.
I den här artikeln hittar du ett fuskblad med dessa standard-CSS-klasser som genereras av WordPress. Vi visar dig också hur du hittar fler CSS-klasser och lägger till egna när du behöver dem.
Varför lära sig om standard-CSS som genereras av WordPress?
WordPress genererar och lägger automatiskt till standard-CSS-klasser till olika element på din WordPress-webbplats.
Temautvecklare kan leka med dessa standard-CSS-klasser för att styla vanliga områden på WordPress-webbplatser, såsom innehållsområden, sidofält, widgets, navigeringsmenyer och mer.
Så, att känna till dessa CSS-klasser är användbart om du lär dig WordPress temautveckling eller helt enkelt försöker skapa ett barn-tema för din egen webbplats.
Det hjälper dig också att snabbt styla vissa element i ditt WordPress-tema genom att lägga till anpassad CSS utan att skapa ett eget tema.
Notera: Du behöver inte lära dig CSS för att ändra dina temastilar eller skapa ett anpassat tema. Om du föredrar att inte lära dig koda kan du använda en dra-och-släpp-byggare som SeedProd. Vi kommer att prata mer om det senare i artikeln.
I följande avsnitt kommer vi att dela de standardmässigt WordPress-genererade CSS-klasserna. Här är en snabb översikt över allt vi kommer att täcka i den här artikeln:
- Standardklasser för brödtext
- Standardinläggsstilklasser
- Standardklasserna för navigeringsmenyn
- Standardklasser för WordPress-widgets
- Standardklasser för kommentarsformulär
- Hitta WordPress Blockklasser
- Lägga till egna anpassade CSS-klasser i WordPress
- Bonus: Designa enkelt ett WordPress-tema utan att skriva CSS-kod
Utan vidare, låt oss dyka in och lära oss hur du får din WordPress-webbplats att se ut precis som du vill!
Standardklasser för brödtext
I HTML innehåller <body> -taggen layoutstrukturen för alla webbsidor, vilket gör den mycket viktig i WordPress-temadesign.
WordPress lägger till flera CSS-klasser till body-taggen. Temadesigners kan använda dessa klasser för att effektivt styla body-containern.
// Added when a website is using a right-to-left language e.g. Arabic, Hebrew
.rtl {}
// Added when home page is being displayed
.home {}
// Added when blog page is being displayed
.blog {}
// Added when an Archive page is being displayed
.archive {}
// Added when a date based archive is displayed
.date {}
// Added on search pages
.search {}
// Added when pagination is enabled
.paged {}
// Added when an attachment page is displayed
.attachment {}
// Added when a 404 error page is displayed
.error404 {}
// Added when a single post is dispayed includes post ID
.single postid-(id) {}
// Added when a single attachment is displayed. Includes attachment ID
.attachmentid-(id) {}
// Added when a single attachment is displayed. Includes attachment mime-type
.attachment-(mime-type) {}
// Added when an author page is displayed
.author {}
// Added when an author page is displayed. Includes author name.
.author-(user_nicename) {}
// Added when a category page is displayed
.category {}
//Added when a category page is displayed. Includes category slug.
.category-(slug) {}
// Added when a tag page is displayed.
.tag {}
// Added when a tag page is displayed. Includes tag slug.
.tag-(slug) {}
// Added when a parent page is displayed.
.page-parent {}
// Added when a child page is displayed. Includes parent page ID.
.page-child parent-pageid-(id) {}
// Added when a page is displayed using page template. Includes page template file name.
.page-template page-template-(template file name) {}
// Added when search results are displayed.
.search-results {}
// Added when search returns no results.
.search-no-results {}
// Added when a logged in user is detected.
.logged-in {}
// Added when a paginated page is displayed. Includes page number.
.paged-(page number) {}
// Added when a paginated single item is displayed. Includes page number.
.single-paged-(page number) {}
// Added when a paged page type is displayed. Includes page number.
.page-paged-(page number) {}
// Added when a paged category page is displayed. Includes page number.
.category-paged-(page number) {}
// Added when a paged tag page is displayed. Includes page number.
.tag-paged-(page number) {}
//Added when a paged date based archive page is displayed. Includes page number.
.date-paged-(page number) {}
// Added when a paged author page is displayed. Includes page number.
.author-paged-(page number) {}
// Added when a paaged search page is displayed. Includes page number.
.search-paged-(page number) {}
Som du kan se inkluderar dessa klasser en mängd olika villkor som du kan rikta in dig på i dina CSS-stilar.
Om du till exempel ville att kategorisidan 'Nyheter' skulle ha en annan bakgrundsfärg, kan du lägga till följande anpassade CSS.
.category-news {
background-color:#f7f7f7;
}
Experttips: Behöver du ett enkelt sätt att lägga till CSS och kodavsnitt i WordPress? Prova den kostnadsfria WPCode-pluginet för att framtidssäkra dina kodavsnitt.
Standardinläggsstilklasser
Precis som med body-elementet lägger WordPress till dynamiska klasser till post-elementen också.
Detta element är vanligtvis taggen <article> i din temamall. Det kan dock vara vilken annan tagg som helst, beroende på ditt WordPress-tema. Post-CSS-klasserna visas i ditt tema genom att lägga till mall-taggen post_class().
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Här är en lista över några av de vanligaste CSS-klasserna som genereras av funktionen post_class():
// Adds a class with ID for single items
.post-(ID) {}
// Generic post claass added for single blog posts.
.post {}
// Generic page class added when a single page is displayed.
.page {}
// Generic attachment class added to attachment pages.
.attachment {}
// Adds a post type class e.g. type-post
.type(post-type){}
// Adds a class for post format if theme supports posts formats. E.g. format-standard
.format-(post-format){}
// Added when an item has a featured image
.has-post-thumbnail{}
// Added when a sticky post is displayed
.sticky {}
// Generic class to display an entry
.hentry {}
// Classes with categories assigned to a post. E.g. category-news category-movies
.category-(slug) {}
// Classes with tags assigned to a post. e.g. tag-photofriday tag-tgif
.tag-(slug) {}
Postklasser gör det möjligt att styla blogginlägg och sidor som matchar olika villkor. Du kan till exempel styla blogginlägg som tillhör en specifik kategori annorlunda med hjälp av följande anpassade CSS:
.category-news {
background-color:#EFEFEF;
}
Om du inte ser CSS-redigeraren i din WordPress-instrumentpanel, följ då vår handledning om hur du åtgärdar den saknade anpassaren för WordPress-teman.
Standardklasserna för navigeringsmenyn
WordPress lägger också till CSS-klasser till navigeringsmenyer. Följande är standardklasserna som läggs till navigeringsmenyer.
// Class for Current Page
.current_page_item{}
// Class for Current Category
.current-cat{}
// Class for any other current Menu Item
.current-menu-item{}
// Class for a taxonomies
.menu-item-type-(taxonomy){}
// class to distinguish post types.
.menu-item-type-(post_type){}
// Class for any custom item that you added
.menu-item-type-custom{}
// Class for the Home Link
.menu-item-home{}
Ditt WordPress-tema kommer också att lägga till en CSS-klass till varje navigeringsmenyplats.
Låt oss säga att ditt tema tilldelar primära menyklassen till en menyplats inuti headerområdet, och sedan kan du rikta in dig på den i din CSS med följande CSS-klasser.
// container class
#header .primary-menu{}
// container class first unordered list
#header .primary-menu ul {}
//unordered list within an unordered list
#header .primary-menu ul ul {}
// each navigation item
#header .primary-menu li {}
// each navigation item anchor
#header .primary-menu li a {}
// unordered list if there is drop down items
#header .primary-menu li ul {}
// each drop down navigation item
#header .primary-menu li li {}
// each drap down navigation item anchor
#header .primary-menu li li a {}
För mer information kan du se vår guide om hur du stilar navigeringsmenyer i WordPress.
Standardklasser för WordPress-widgets
Widgets är ett enkelt sätt att visa block som inte är innehåll i ditt WordPress-tema. De visas vanligtvis i dedikerade widget-redo områden eller sidofält.
WordPress lägger till följande klasser till de äldre widgetarna.
.widget {}
#searchform {}
.widget_search {}
.screen-reader-text {}
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}
.textwidget {}
.widget_text {}
.textwidget p {}
Men eftersom WordPress går över till blockbaserade widgetområden kan du nu lägga till olika block i dina widgetområden, och vart och ett genererar CSS-klasser dynamiskt.
Vi visar dig hur du hittar dessa CSS-klasser senare i den här artikeln.
Standardklasser för kommentarsformulär
Kommentarer är engagemangscentret för många WordPress-webbplatser. Att styla dem hjälper dig att ge användarna en renare och mer engagerande upplevelse.
WordPress lägger till följande standard-CSS-klasser för att hjälpa temautvecklare att styla kommentarsområden.
/*Comment Output*/
.commentlist .reply {}
.commentlist .reply a {}
.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}
.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}
.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}
.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}
#cancel-comment-reply {}
#cancel-comment-reply a {}
/*Comment Form */
#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.form-submit
För mer information, se vår guide om hur du stylar kommentarer i WordPress.
Hitta WordPress Blockklasser
WordPress blockredigerare genererar dynamiskt CSS-klasser för block.
För att hitta dessa CSS-klasser måste du först lägga till ett visst block i ett inlägg eller en sida. Sedan vill du klicka på knappen 'Förhandsgranska' för att se blocket i aktion.
I förhandsgranskningsfliken, flytta helt enkelt musen över blocket du precis lade till och högerklicka för att välja verktyget Inspektera.
I utvecklarkonsolen ser du HTML som genereras av blocket och de CSS-klasser som det har lagt till.
I skärmdumpen ovan tittar vi på Galleriblocks CSS-klasser. Du kan sedan använda dessa CSS-klasser för att styla galleribloocket i ditt WordPress-tema.
Lägga till egna anpassade CSS-klasser i WordPress
Nu är standardklasserna för WordPress ganska omfattande. Syftet är dock främst att ge temautvecklare ett standardiserat ramverk att bygga med.
För din webbplats kan du behöva lägga till anpassad CSS i områden där standard-CSS-klasser inte är tillgängliga.
På samma sätt kanske du vill göra små ändringar i ett specifikt inlägg eller en sida utan att påverka hela ditt tema.
Lyckligtvis ger WordPress dig flera enkla sätt att lägga till CSS-klasser till olika områden. Här är flera metoder:
Lägg till anpassade CSS-klasser till ett block inuti blockredigeraren
Om du snabbt vill lägga till en anpassad CSS-klass till ett specifikt inlägg eller en sida, är det enklaste sättet att använda blockredigeraren.
Redigera helt enkelt inlägget eller sidan och välj det block där du vill lägga till en anpassad CSS-klass. Under blockinställningar, klicka helt enkelt på panelen 'Avancerat' och lägg till namnet på din CSS-klass.
Glöm inte att spara dina ändringar genom att klicka på knappen 'Uppdatera'.
Du kan nu använda den här klassen för att lägga till anpassad CSS-kod som bara påverkar detta specifika block i detta specifika inlägg eller sida.
I WordPress navigeringsmenyer
Du kan också lägga till anpassad CSS till dina WordPress-navigeringsmenyobjekt. Låt oss säga att du vill konvertera ett menyobjekt till en knapp, då är den här metoden användbar.
Gå helt enkelt till sidan Utseende » Menyer och klicka på knappen 'Skärmalternativ' längst upp till höger på skärmen.
Härifrån vill du kryssa i rutan bredvid alternativet 'CSS Classes'.
Därefter, låt oss scrolla ner och expandera menyobjektet där du vill lägga till den anpassade CSS-klassen.
Du kommer då att märka ett fält märkt CSS-klasser. Lägg till din anpassade CSS-klass här.
Glöm inte att klicka på knappen 'Spara meny' för att behålla dina ändringar.
Du kan nu använda den här anpassade CSS-klassen för att styla det specifika menyalternativet annorlunda.
Bonus: Designa enkelt ett WordPress-tema utan att skriva CSS-kod
Att lära sig att styla ditt WordPress-tema med anpassad CSS är en mycket användbar färdighet. Vissa användare kanske dock bara vill ha en lösning för att designa sitt WordPress-tema utan att någonsin skriva CSS-kod.
För detta behöver du SeedProd. Det är det bästa WordPress-sidbyggarverktyget på marknaden för att enkelt skapa anpassade teman utan att skriva någon kod.
SeedProd levereras med färdiga teman som du kan använda som utgångspunkt.
Om du vill kan du också skapa ett tema från grunden.
Efter att ha valt en mall är du redo att redigera ditt anpassade tema med en intuitiv dra-och-släpp-redigerare.
Släpp helt enkelt block i din design för att skapa dina egna layouter.
Du kan också enkelt ändra vilket objekt som helst med en enkel pek-och-klicka-funktion. Dessutom kan du använda dina egna färger, bakgrunder, typsnitt och mer.
För mer information, se vår steg-för-steg-handledning om hur du enkelt skapar ett anpassat WordPress-tema utan att skriva någon kod.
Vi hoppas att den här artikeln hjälpte dig att hitta standard-CSS-fuskbladet som genereras av WordPress. Därefter kanske du också vill se vår guide om hur man minimerar CSS- eller JavaScript-filer i WordPress och hur man tar bort oanvänd CSS i WordPress.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Gwyneth Llewelyn
En riktigt, riktigt användbar referens — speciellt när du vill lägga till lite ‘extra’ styling, och det enklaste sättet att göra det är helt enkelt att använda en av de inbyggda stilarna (eftersom alla block tillåter att lägga till extra klasser — men inte alla teman tillåter dig att lägga till extra CSS, om du inte gör ditt eget child theme, etc.)
Jag undrar om Automattic, bland de ‘nyare’ CSS-klasserna, har tillhandahållit något för att styla avdelarna. Jag älskar fotnoter och använder dem *mycket* (även innan de var ‘standard’ i WP, tillbaka på 6.3:ans dagar!), men jag ogillar den minimalistiska stil de har. WordPress medger fullständigt att detta är ett ‘pågående arbete’ och det finns lite mer som kan ändras än vissa fontattribut: https://wordpress.org/documentation/article/footnotes-block/
Därför – CSS till undsättning! Jag behöver bara en grundläggande klass som ger dig en
bredd=30%. Jag hoppades få något sådant från din omfattande lista, men jag är rädd inte – åtminstone inte till hösten 2025.Tack ändå. Din lista är ändå ganska användbar!
Moinuddin Waheed
Mycket användbart "cheat sheet" för dem som har en viss bakgrund som utvecklare och har praktisk erfarenhet av CSS.
Detta kommer att vara mycket hjälpsamt för att göra ändringar i det visuella utseendet och göra det vackert.
Tack för att du skapade detta "cheat sheet".
Mrteesurez
Bra jobbat, ni har skapat användbara CSS-fuskblad. Dessa kommer att göra det lättare att hantera stil korrekt när ni väl behärskar dem. Tack för att ni tog er tid att sammanställa dessa CSS-fuskblad för oss.
Rodrigo Vieira Eufrasio da Silva
Ni ska gratuleras för detta underbara innehåll. Jag skulle bara rekommendera att uppdatera den här artikeln och låta oss veta vilka klasser som genereras av guttenberg och den senaste versionen av WordPress eftersom det här inlägget är föråldrat. Men det hjälpte mig mycket.
Kram till er alla.
WPBeginner Support
Thank you for letting us know, we’ll be sure to take a look
Admin
Alison Westall
Finns det en CSS-klass för att ändra marginalen (padding) på ett element? Tack!
WPBeginner Support
När du har hittat objektet du vill lägga till marginal till, skulle du använda:
padding, padding-top, padding-right, padding-bottom, padding-left
b beroende på vilken typ av marginal du vill lägga till
Admin
Matt Cauley
Tack för informationen. Jag har precis bokmärkt sidan trots att den är några år gammal!
WPBeginner Support
Thank you, while the article is older, it should still be useful
Admin
MS Shohan
Fantastiskt jobb, brorsan. Tack för att du gjorde en lista över alla standard WP-klasser
Hannah Steele
Hej, jag kämpar verkligen med att formatera den automatiskt genererade händelsesidan.
Kan du hjälpa mig?
Arunjith RS
Verkligen användbart.. Tack.
Shai
Kan du (om det inte redan finns någon annanstans) lista klasserna för admin-instrumentpanelen och admin-widgetarna.
det ser ut som att admin använder en laddare (wp-admin/load-styles.php) för att inkludera sin CSS, men den CSS:en är komprimerad och svår att läsa. det skulle vara trevligt att se en lista över de använda elementen. till exempel om du vill skapa din egen widget med flikar; Jag inspekterade CSS:en och kan se en lång lista med klassen .nav-tab relaterad CSS.
Ari Susanto
och själva "entry-content"!
Ari Susanto
Jag vill lägga till den här:
“status-publish”
luroch
En fråga: när jag skapar ett bootstrap-tema från underscores, ska jag behålla de klasser och id:n som kommer med detta ramverk, bara lägga till Bootstrap-klasserna, eller kan jag bara använda Bootstrap-klasser och id:n?
Ari Susanto
Hur hittade du dem? Finns det ett automatiserat sätt som att använda en php-funktion, kanske?
Stephen Clark
Fantastiskt inlägg och mycket informativt. Nyfiken om du kunde komplettera detta inlägg med liknande detaljer om WP-sidfoten. Jag har kämpat med att styla och formatera sidfoten med det tema jag använder, och med några andra webbplatser jag har byggt.
Det vore också bra att ha en nedladdningsbar CSS-stilmall som innehåller alla dessa stilar. Tack!
Kevin Pryce
När jag inspekterar elementet på mitt WordPress-tema ser jag inte dessa stilar, särskilt de som appliceras på body-klassen. Måste man lägga in dem i mallen?
Joel Bladt
Fin sammanställning av alla standard WordPress-klasser. Var det verkligen alla klasser som läggs till automatiskt av WordPress? Om klasser blir inaktuella och försvinner, eller om nya tillkommer, ser jag fram emot att uppdatera listan.
– Tysk bloggare och översatt med Google Translator.
WPBeginner Support
Det är uppdaterat såvitt vi vet, om du hittar någon klass som är föråldrad, vänligen meddela oss.
Admin
loreto
time saver! now let me mess those styles
Amba Junior
Mycket användbar handledning. Precis som Genesis visuella hook-guide, sammanfattar detta Genesis riktigt bra
Malcolm Owen
Vet du vad som skulle vara användbart? En utskrivbar PDF-version av den här guiden...
Pete
http://www.printfriendly.com/print/v2?url=http%3A%2F%2Fwww.wpbeginner.com%2Fwp-themes%2Fdefault-wordpress-generated-css-cheat-sheet-for-beginners%2F#
Adriane
Tack Pete!
wpbeginner
@smashingmag Thank you for retweeting our article
really appreciate the love.
favstar50
@smashingmag Grattis till din 50★ tweet! http://t.co/r78Ao3Sm
bobHankin
@photoassassin Nej, det hade jag inte. Det är toppen! Praktiskt också!
eugenebicyclist
Lär mig precis att jobba med WP och detta är verkligen användbart. Tack.