Standard WordPress-genererat CSS-fuskark för nybörjare

Standard WordPress-genererat CSS-fuskark för nybörjare

Har du nÄgonsin undrat hur du kan utforma olika delar av WordPress-temat? Tja, det varierar frÄn tema till tema, men det finns vissa CSS-klasser och ID som genereras av WordPress. Om du Àr nÄgon som försöker utforma ett tema eller vill skapa ett tema för offentlig release, Àr det hÀr nÄgra stilelement som du kanske vill övervÀga att lÀgga till i ditt tema.

MÄlet med detta fuskark Àr att hjÀlpa nybörjare som vill komma in i WordPress temastyling. Om du Àr en nybörjare som inte vill hantera koderna rekommenderar vi att du fÄr ett temaramverk som Headway som gör det hela Ät dig med dra och slÀpp. För resten av er kommer vi att gÄ igenom nÄgra av de viktigaste standard WordPress-stilarna en efter en.

Videohandledning

Prenumerera pÄ WPBeginner

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

Standard kroppsklassformat

En av de stora sakerna med WordPress Àr dess anpassningsbarhet. Det lÄter dig rikta in mycket specifika aspekter av din webbplats med CSS. Ett av sÀtten det gör pÄ Àr att lÀgga till anpassade klasser till olika delar av din blogg. Den viktigaste av dessa Àr taggen . HÀr Àr nÄgra exempel pÄ vanliga 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-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

Om du till exempel vill utforma din sökresultatsida pĂ„ ett specifikt 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 body-taggen nĂ€r sökresultatsidan Ă€r aktiv sĂ„ att den inte pĂ„verkar nĂ„gra andra sidor.

Standard inlÀggsstilar

Precis som med kroppselementet tillför WordPress ocksÄ dynamiska klasser till inlÀggselementen. HÀr Àr en lista över nÄgra av de mest populÀra:


.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

Om du har lĂ€st vĂ„r artikel Vad, varför och hur gör jag av inlĂ€ggsformat i WordPress 3.1 sĂ„ om inlĂ€ggsformat och hur du kan visa dina inlĂ€gg pĂ„ olika sĂ€tt beroende pĂ„ det format du vĂ€ljer. Än en gĂ„ng lĂ€gger WordPress till dynamiska klasser i ditt inlĂ€gg med funktionen post_class () som lĂ„ter dig skapa dina egna stilar för varje format. Funktionen post_class () lĂ€gger till en klass i form av “.format-foo” dĂ€r foo Ă€r vilket inlĂ€ggsformat du har valt, dvs. galleri, bild etc.


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

Standardmenyformat

I vĂ„r artikel kallad hur man utformar WordPress-navigeringsmenyer diskuterar vi hur du kan gĂ„ till och lĂ€gga till din egen klass i din meny. Vi kommer att anta att du har lĂ€st den och att du gav din nav-meny sitt eget klassnamn “huvudmeny”.


#header .main-menu{} // container class
#header .main-menu ul {} // container class first unordered list
#header .main-menu ul ul {} //unordered list within an unordered list
#header .main-menu li {} // each navigation item
#header .main-menu li a {} // each navigation item anchor
#header .main-menu li ul {} // unordered list if there is drop down items
#header .main-menu li li {} // each drop down navigation item
#header .main-menu li li a {} // each drap down navigation item anchor

.current_page_item{} // Class for Current Page
.current-cat{} // Class for Current Category
.current-menu-item{} // Class for any other current Menu Item
.menu-item-type-taxonomy{} // Class for a Category
.menu-item-type-post_type{} // Class for Pages
.menu-item-type-custom{} // Class for any custom item that you added
.menu-item-home{} // Class for the Home Link

Observera att nĂ€r du skapar en meny i WordPress förpackas den automatiskt i en div. Denna div har bara ett klassnamn om du anger det (vi valde “huvudmeny”). DĂ€rifrĂ„n stylar du bara de olika listelementen.

Standard WISIWYG Editor-stilar

WISWYG-redigeraren Àr en av de mest populÀra och mest anvÀnda aspekterna av WordPress. Av den anledningen À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:


.entry-content 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 {}
.size-large {}
.size-medium {}
.size-thumbnail {}


Du kan se att det finns flera klasser som bara avser bilder. Om till exempel anvĂ€ndaren bestĂ€mmer sig för att inkludera en vĂ€nsterjusterad bild kommer WordPress att lĂ€gga till “alignleft” -klassen.

Standard WordPress-widgetstilar

Widgets Àr en annan populÀr aspekt av WordPress. Som utvecklare har du kontroll över vilka widgets som ska visas sÄ att du vanligtvis vet exakt vilka stilar du ska lÀgga till. WordPress kommer dock med en handfull standardwidgets, och om du inte tar bort dem Àr det klokt att lÀgga till styling i sina klasser.



.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 {}


NÀr du stylar widgets kommer du förmodligen att anvÀnda samma stilar om och om igen. Av denna anledning Àr det en bra idé att kombinera klasser pÄ ditt stilark med kommatecken. Du kan till exempel kombinera .widget_pages ul och .widget_archive ul genom att göra nÄgot sÄ hÀr:



.widget_pages ul, .widget_archive ul {}


Standardformat för kommentarformulÀr

SÄ ful som stylingkommentarer kan fÄ WordPress gör det mycket lÀttare med sina standardklasser. Om du inte har att göra med gÀngade 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 {}

.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



Eftersom detta bara Àr ett cheatsheet finns det fortfarande mÄnga andra klasser och id: er som vi kanske inte har tÀckt. Om du kÀnner att nÄgot annat Àr viktigt och det hör hemma pÄ den hÀr listan Àr du vÀlkommen att lÀmna en kommentar nedan.