Standard WordPress Generated CSS Cheat Sheet för nybörjare

Har du någonsin undrat hur du kan utforma olika delar av WordPress-temat? Jo det varierar från tema till tema, men det finns vissa CSS-klasser och ID-er som genereras av WordPress. Om du är någon som försöker ställa in ett tema eller vill skapa ett tema för offentliggörande, så är det några stilelement som du kanske vill överväga att lägga till i ditt tema.

Målet med det här fuskarket är att hjälpa nybörjare som vill komma in i WordPress-tematypen. Om du är en nybörjare som inte vill hantera koderna rekommenderar vi att du får ett temamaterial som Headway vilket gör allt för dig med dra och släpp. För resten av er kommer vi att gå igenom några av de viktigaste standardformaten WordPress en efter en.

Video Tutorial

Om du inte gillar videon eller behöver mer instruktioner, fortsätt läsa.

Standard Body Class Styles

En av de stora sakerna om WordPress är dess anpassningsbarhet. Det låter dig rikta in specifika aspekter av din webbplats med CSS. Ett sätt att göra det här är att lägga till egna klasser på olika delar av din blogg. Det viktigaste av dessa är taggen. Här är några exempel på gemensamma klasser som WordPress kan lägga till i det här elementet:

 .rtl  .home  .blog  .archive  .date  .search  .paged  .attachment  .error404  .single postid- (id)  ​​.attachmentid- (id)  .attachment- (mime-typ)  .author  .author- (user_nicename)  .category  .category- (slug)  .tag  .tag- (slug)  .page -parent  .sida-barn parent-pageid- (id)  ​​.sida-mall sida-mall- (mallfilnamn)  .search-results  .search-no-results  .loggad  .paged- (sidnummer)  .single-paged- (sidnummer)  .page-paged- (sidnummer)  .category-paged- (sidnummer)  .tag-paged- ( sidnummer)  .date-paged- (sidnummer)  .author-paged- (sidnummer)  .search-paged- (sidnummer)  

Om du till exempel vill utforma din sökresultatsida på ett visst sätt kan du använda klassen "sökresultat" för att lägga till din styling. WordPress lägger bara till den här klassen i kroppstaggen när sökresultatsidan är aktiv så den inte påverkar andra sidor.

Standard poststilar

Precis som med kroppsdelen lägger WordPress dynamiska klasser till postelementen också. Här är en lista över några av de mest populära:

 .post-id  .post  .page  .attachment  .sticky  .hentry  .kategori-misc  .kategori-exempel  .tag-nyheter  .tag-wordpress . tag-markup  

Om du har läst vår artikel Vad, hur och hur är det med postformat i WordPress 3.1 då handlar du om inläggsformat och hur du kan visa dina inlägg annorlunda i enlighet med det format du väljer. Än en gång lägger WordPress dynamiska klasser i ditt inlägg med funktionen post_class () som låter dig skapa egna stilar för varje format. Funktionen post_class () lägger till en klass i form av ".format-foo" där foo är vilket postformat du har valt dvs. galleri, bild, etc..

 .format-image  .format-gallery  .format-chat  .format-link  .format-quote  .format-status  .format-video  

Standardmenystilar

I vår artikel kallas hur man stilar WordPress navigationsmenyer vi diskuterar hur du kan gå om att lägga till din egen klass i din meny. Vi antar att du har läst det och att du gav din navmeny ett eget klassnamn på "huvudmenyn".

 #header .main-menu  // container class #header .main-meny ul  // container klass första oorderad lista #header .main-meny ul ul  // oorderad lista inom en oordnad lista #header .main -meny li  // varje navigeringsobjekt #header .main-menu li a  // varje navigationsobjekt ankar #header .main-meny li ul  // oorderad lista om det finns nedrullningsalternativ #header .main -meny li li  // varje fall ned navigeringsobjektet #header .main-menu li li a  // vardera dra ner navigeringsobjektet ankare .current_page_item  // klass för aktuell sida .current-cat  // Klass för aktuell kategori. Aktuell menyobjekt  // Klass för något annat aktuellt menyobjekt. Meny-Item-Type-taxonomy  // Klass för en kategori. Meny-post-typ-Post_type  // Klass för Pages .menu-item-type-custom  // Klass för något anpassat objekt som du lagt till .menu-item-home  // Klass för hemlänken 

Observera att när du skapar en meny i WordPress sätts den automatiskt in i en div. Denna div har endast ett klassnamn om du anger det (vi valde "huvudmeny"). Därifrån justerar du bara de olika listelementen.

Standard WISIWYG Editor Styles

WISWYG-redigeraren är en av de mest populära och mest använda aspekterna av WordPress. Av denna anledning är det en bra idé att ha stilar redo för allt som användaren kan lägga till i sin blogg, som bilder eller blockquotes. Följande CSS visar vilka klasser WordPress automatiskt lägger till i dessa element:

 .post-innehåll img  .alignleft, img.alignleft  .alignright, img.alignright  .aligncenter, img.aligncenter  .alignnone, img.alignnone  .wp-caption  .wp-caption img   .wp-caption p.wp-caption-text  .wp-smiley  blockquote.left  blockquote.right  .gallery dl  .gallery dt  .gallery dd  .gallery dl a   .gallery dl img  .gallery-caption  .size-full . stor-stor . storlek-medium . storlek-miniatyrbild 

Du kan se att det finns flera klasser som bara gäller bilder. Om användaren till exempel väljer att inkludera en vänsterjusterad bild kommer WordPress att lägga till klassen "alignleft".

Standard WordPress Widget Styles

Widgets är en annan populär aspekt av WordPress. Eftersom utvecklaren har kontroll över vilka widgets som ska visas så kommer du vanligtvis att veta exakt vilka stilar som ska läggas till. WordPress levereras med en handfull standard widgets, och om du inte tar bort dem är det klokt att lägga till styling i sina klasser.

 .widget  #searchform  .widget_search  .skärmsläsare-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 välj  .widget_archive option  .widget_pages . widget_pages ul  .widget_pages ul li  .widget_pages ul li a  .widget_links  .widget_links li: efter  .widget_links li: före  .widget_tag_cloud  .widget_tag_cloud a  .widget_tag_cloud a: after   .widget_tag_cloud a: före  .widget_calendar  #calendar_wrap  #calendar_wrap th  #calendar_wrap td  # wp-kalender tr td  # wp-kalendertexter  # wp-kalender a  #wp -kalender #today  # wp-kalender #prev  # wp-kalender #next  # wp-kalender #nästa en  # wp-kalender #prev a  .widget_categories  .widget_categories ul . widget_categories ul li  .widget_categories ul ul.childr en  .widget_categories a  .widget_categories välj  .widget_categories välj # 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  

När du utformar widgets kommer du antagligen att sluta använda samma stilar om och om igen. Av denna anledning är det en bra idé att kombinera klasser på ditt stilark med kommatecken. Till exempel kan du kombinera .widget_pages ul och .widget_archive ul genom att göra något så här:

 .widget_pages ul, .widget_archive ul  

Standard Kommentar Form Styles

Så ful som styling kommentarer kan få WordPress gör det mycket lättare med sina standardklasser. Om du inte arbetar med trådade kommentarer, är det dock möjligt att ignorera många av dem.

 / * 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  .kommentlista .comment- meta  .commentlist .comment-meta a  .commentlista .commentmetadata  .commentlista .commentmetadata a  .kommentlista .parent  .kommentlista .komment  .kommentlista .barn  .kommentlista .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  .co mmentlist 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  # avbryt-kommentar-svar  # avbryt-kommentera-svara en  / * Kommentarformulär * / #respond  # reply-title  # cancel-comment- answer-link  #commentform  #author  #email  #url  #komment #submit.comment-notes  .required  .comment-form-author  .comment-form-email   .comment-form-url  .comment-form-comment  .form-allowed-tags  .form-submit 

Eftersom detta bara är ett cheatsheet finns det fortfarande många andra klasser och id som vi kanske inte har täckt. Om du känner som om något annat är viktigt och det tillhör den här listan, var god och skriv en kommentar nedan.