Standard WordPress Generert CSS Cheat Sheet for Beginners

Har du noen gang lurt på hvordan du kan style forskjellige elementer i WordPress-temaet? Vel, det varierer fra tema til tema, men det er visse CSS-klasser og IDer som genereres av WordPress. Hvis du er noen som prøver å style et tema, eller ser etter å lage et tema for offentlig utgivelse, er disse noen stilelementer som du kanskje vil vurdere å legge til i temaet ditt.

Målet med denne cheat sheet er å hjelpe nybegynnere som ønsker å komme inn i WordPress tema styling. Hvis du er en nybegynner som ikke vil håndtere kodene, anbefaler vi at du får et temaramme som Headway, som gjør alt for deg med dra og slipp. For resten av dere skal vi gå gjennom noen av de viktigste standard WordPress-stilene en etter én.

Videoopplæring

Hvis du ikke liker videoen eller trenger mer instruksjoner, fortsett å lese.

Standard Body Class Styles

En av de store tingene om WordPress er dets tilpassbarhet. Den lar deg målrette svært bestemte aspekter av nettstedet ditt med CSS. En av måtene det gjør ved å legge til egendefinerte klasser til ulike elementer i bloggen din. Den viktigste av disse er taggen. Her er noen eksempler på vanlige klasser som WordPress kan legge til i dette elementet:

 .rtl  .home  .blog  .archive  .date  .search  .paged  .attachment  .error404  .single postid- (id)  ​​.attachmentid-  .attachment- (mime-type)  .author  .author- (user_nicename)  .kategori  .kategori- (slug)  .tag  .tag- (slug)  .page -parent  .page-child parent-pageid- (id)  ​​.page-template side-template- (malfilnavn)  .search-results  .search-no-results  .logget  .paged- (sidetall)  .single-paged- (sidetall)  .page-paged- (sidetall)  .category-paged- (sidetall)  .tag-paged- sidetall)  .date-paged- (sidetall)  .author-paged- (sidetall)  .search-paged- (sidetall)  

Hvis du for eksempel vil utforme søkeresultatsiden din på en bestemt måte, kan du bruke klassen "søkeresultater" for å legge til stylingen. WordPress legger bare til denne klassen i kropps-taggen når søkeresultatsiden er aktiv, slik at den ikke påvirker andre sider.

Standard innleggsstiler

Akkurat som med kroppsdelen, legger WordPress dynamiske klasser til postelementene også. Her er en liste over noen av de mest populære:

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

Hvis du har lest vår artikkel Hva, hvem og hvordan er det i postformater i WordPress 3.1, så om postformater og hvordan du kan vise innleggene dine annerledes i henhold til formatet du velger. Igjen, legger WordPress dynamiske klasser til innlegget ditt ved hjelp av post_class () -funksjonen som lar deg lage dine egne stiler for hvert format. Post_class () -funksjonen vil legge til en klasse i form av ".format-foo" der foo er det postformatet du har valgt dvs. galleri, bilde osv.

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

Standard meny stiler

I vår artikkel heter hvordan du stiler WordPress navigasjonsmenyer, diskuterer du hvordan du kan gå om å legge til din egen klasse i menyen. Vi kommer til å anta at du har lest det, og at du ga nav-menyen sitt eget klassenavn på "hovedmeny".

 #header .main-menu  // container klasse #header .main-menu ul  // container klasse første uordnet liste #header .main-menu ul ul  // uordnet liste innenfor en uordnet liste #header .main -menyen li  // hvert navigasjonsobjekt #header .main-menu li a  // hvert navigasjonselement anker #header .main-menu li ul  // uordnet liste hvis det er drop down-elementer #header .main -meny li li  // hvert fall ned navigasjonselementet #header .main-menu li li a  // hver dra ned navigeringselementet anker .current_page_item  // klasse for nåværende side .current-cat  // Klasse for nåværende kategori. Gjeldende menyelement  // Klasse for alle andre gjeldende Menyelementer. Meny-Type-Type-Klassifisering  // Klasse for en kategori. Meny-element-Type-Post_type  // Klasse for Pages .menu-item-type-custom  // klasse for alle egendefinerte elementer du har lagt til .menu-item-home  // klasse for hjemmekoblingen 

Legg merke til at når du lager en meny i WordPress, pakkes den automatisk inn i en div. Denne diven har bare et klassenavn hvis du spesifiserer det (vi valgte "hovedmeny"). Derfra er du bare styling de ulike listelementene.

Standard WISIWYG Editor Styles

WISWYG-editoren er et av de mest populære og mest brukte aspektene av WordPress. Av denne grunn er det en god ide å ha stiler klar for alt som brukeren kan legge til bloggen sin, som bilder eller blokkeringer. Følgende CSS viser deg hvilke klasser WordPress automatisk legger til disse elementene:

 .inngangsinnhold 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-miniatyrbildet  

Du kan se at det er flere klasser som bare gjelder bilder. Hvis brukeren for eksempel bestemmer seg for å inkludere et venstrejustert bilde, vil WordPress legge til "alignleft" -klassen.

Standard WordPress Widget Styles

Widgets er et annet populært aspekt av WordPress. Som utvikler har du kontroll over hvilke widgets som skal vises slik at du vanligvis vil vite nøyaktig hvilke stiler du vil legge til. WordPress leveres med en håndfull standard widgets, og med mindre du fjerner dem, er det klokt å legge til styling i klassene sine.

 .widget  #searchform  .widget_search  .skjermleser-tekst  .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 velg  .widget_archive alternativ  .widget_pages . widget_pages ul  .widget_pages ul li  .widget_pages ul li a  .widget_links  .widget_links li: etter  .widget_links li: før  .widget_tag_cloud  .widget_tag_cloud a  .widget_tag_cloud a: after   .widget_tag_cloud a: før  .widget_calendar  #calendar_wrap  #calendar_wrap th  #calendar_wrap td  # wp-kalender tr td  # wp-kalender bildetekst  # wp-calendar a  #wp -kalenderen #today  # wp-calendar #prev  # wp-kalender #next  # wp-kalender #next a  # wp-calendar #prev a  .widget_categories  .widget_categories ul . widget_categories ul li  .widget_categories ul ul.childr en  .widget_categories a  .widget_categories select  .widget_categories velg # cat  .widget_categories select.postform  .widget_categories alternativ  .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 utformer widgets, vil du sannsynligvis ende opp med å bruke de samme stilene igjen og igjen. Av denne grunn er det en god ide å kombinere klasser på stilarket ditt ved hjelp av kommaer. For eksempel kan du kombinere .widget_pages ul og .widget_archive ul ved å gjøre noe slikt:

 .widget_pages ul, .widget_archive ul  

Standard Kommentar Form Stiler

Så stygg som styling kommentarer kan få WordPress gjør det mye lettere med sine standardklasser. Hvis du ikke har å gjøre med gjengede kommentarer, er det imidlertid mulig å ignorere mange av dem.

 / * Kommentar Output * / .commentlist .reply  .commentlist .reply en  .kommenteliste .alt  .kommenteliste .odd  .kommenteliste .av  .kommentliste .thread-alt . Kommentartittel .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 .commentlist .commentmetadata  .commentlist .commentmetadata a  .commentlist .parent  .commentlist .comment  .commentlist .children  .commentlist .pingback . kommentarliste .bypostauthor  .kommentliste .kommentforfatter  .kommentliste .komment-forfatter-admin  .kommentliste  .kommentarliste li  .kommentarer li p  .kommentarer li ul  .kommentarer 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-kommentar-svar a  / * Kommentar form * / #respond  # reply-title  # cancel-comment- answer-link  #commentform  #author  #email  #url  #komment #send inn .kommentarer  .required  .komment-form-forfatter  .komment-form-e-post   .comment-form-url  .komment-form-kommentar  .form-allowed-tags  .form-submit 

Siden dette er bare et cheatsheet er det fortsatt mange andre klasser og id'er vi kanskje ikke har dekket. Hvis du føler deg som om noe annet er viktig og det tilhører denne listen, vær så snill å legge igjen en kommentar nedenfor.