Standaard WordPress Generated CSS Cheat Sheet for Beginners

Heb je je ooit afgevraagd hoe je verschillende elementen van het WordPress-thema kon stylen? Wel, het varieert van thema tot thema, maar er zijn bepaalde CSS-klassen en id's die worden gegenereerd door WordPress. Als u iemand bent die een thema probeert te stylen, of een thema voor openbare uitgave wilt maken, dan zijn dit enkele stijlelementen die u misschien zou willen toevoegen in uw thema.

Het doel van deze spiekbrief is om beginners te helpen die op zoek zijn naar WordPress-thema-styling. Als je een beginner bent die niet met de codes te maken wil hebben, raden we je aan om een ​​themakader te gebruiken zoals Headway die het hele ding voor je doet met slepen en neerzetten. Voor de rest van jullie gaan we enkele van de belangrijkste standaard WordPress-stijlen een voor een bekijken.

Video-instructies

Als je de video niet leuk vindt of meer instructies nodig hebt, ga dan door met lezen.

Standaard Body Class Styles

Een van de geweldige dingen over WordPress is de aanpasbaarheid. Hiermee kunt u zeer specifieke aspecten van uw site targeten met CSS. Een van de manieren waarop dit gebeurt, is door aangepaste klassen toe te voegen aan verschillende elementen van uw blog. De belangrijkste hiervan is de tag. Hier zijn enkele voorbeelden van algemene klassen die WordPress aan dit element zou kunnen toevoegen:

 .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)  .pagina -ouder  .pagina-child parent-pageid- (id)  ​​.page-template paginasjabloon- (template bestandsnaam)  .zoek-resultaten  .search-no-results  .logged-in  .paged- (paginanummer)  .single-paged- (paginanummer)  .pagina-paged- (paginanummer)  .category-paged- (paginanummer)  .tag-paged- ( paginanummer)  .date-paged- (paginanummer)  .author-paged- (paginanummer)  .search-paged- (paginanummer) . 

Als u bijvoorbeeld uw pagina met zoekresultaten op een specifieke manier wilt stijlen, kunt u de klasse "zoekresultaten" gebruiken om uw stijl toe te voegen. WordPress voegt deze klasse alleen toe aan de body-tag wanneer de pagina met zoekresultaten actief is, zodat deze geen invloed heeft op andere pagina's.

Standaard berichtstijlen

Net als met het body-element voegt WordPress dynamische klassen toe aan de bericht-elementen. Hier is een lijst met enkele van de meest populaire:

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

Als u ons artikel Wat, Wat en hoe hebt gelezen van berichtindelingen in WordPress 3.1 hebt gelezen, leest u over berichtformaten en hoe u uw berichten anders kunt weergeven volgens het formaat dat u kiest. Wederom voegt WordPress dynamische klassen aan uw bericht toe met behulp van de functie post_class () waarmee u uw eigen stijlen voor elk formaat kunt maken. De functie post_class () voegt een klasse toe in de vorm van ".format-foo" waarbij foo het door jou gekozen postformaat is, dwz. galerij, afbeelding, enz.

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

Standaard menustijlen

In ons artikel over hoe u WordPress-navigatiemenu's vormgeeft, bespreken we hoe u uw eigen klasse aan uw menu kunt toevoegen. We gaan ervan uit dat je het hebt gelezen en dat je je nav-menu zijn eigen klassennaam van "hoofdmenu" hebt gegeven.

 #header .main-menu  // containerklasse #header .main-menu ul  // containerklasse eerste ongeordende lijst #header .main-menu ul ul  // ongeordende lijst binnen een ongeordende lijst #header .main -menu li  // elk navigatie-item #header .main-menu li a  // elk navigatie-item anchor #header .main-menu li ul  // ongeordende lijst als er dropdown-items zijn #header .hoofd -menu li li  // elk drop-down navigatie-item #header .main-menu li li a  // elk drapeer navigatie-item anchor .current_page_item  // Klasse voor huidige pagina .current-cat  // Klasse voor Huidige Categorie. Current-menu-item  // Klasse voor een ander huidig ​​Menu-item .menu-item-type-taxonomie  // Klasse voor een Categorie .menu-item-type-post_type  // Klasse voor Pages .menu-item-type-custom  // Klasse voor elk aangepast item dat u hebt toegevoegd .menu-item-home  // Klasse voor de startkoppeling 

Merk op dat wanneer u een menu in WordPress maakt, dit automatisch in een div wordt gewikkeld. Deze div heeft alleen een klassenaam als je deze opgeeft (we hebben voor "hoofdmenu" gekozen). Vanaf daar vorm je alleen de verschillende elementen van de lijst.

Standaard WISIWYG-bewerkingsstijlen

De WISWYG-editor is een van de meest populaire en meest gebruikte aspecten van WordPress. Om deze reden is het een goed idee om stijlen klaar te hebben voor alles dat de gebruiker aan zijn blog zou kunnen toevoegen, zoals afbeeldingen of blockquotes. De volgende CSS laat zien welke klassen WordPress automatisch toevoegt aan deze elementen:

 .entry-content img  .alignleft, img.alignleft  .alignright, img.alignright  .aligncenter, img.aligncenter  .alignnone, img.alignnone  .wp-caption  .wp-caption img   .wp-bijschrift p.wp-bijschrift-tekst  .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  

Je kunt zien dat er verschillende klassen alleen voor afbeeldingen zijn. Als de gebruiker bijvoorbeeld een links uitgelijnde afbeelding invoegt, voegt WordPress de klasse "alignleft" toe.

Standaard WordPress Widget Styles

Widgets zijn een ander populair aspect van WordPress. Als ontwikkelaar heb je controle over welke widgets worden weergegeven, zodat je meestal precies weet welke stijlen je moet toevoegen. WordPress wordt echter geleverd met een handjevol standaardwidgets en tenzij je ze verwijdert, is het verstandig om styling aan hun klassen toe te voegen.

 .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.childr en  .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  

Bij het stylen van widgets zul je waarschijnlijk steeds dezelfde stijlen gebruiken. Om deze reden is het een goed idee om klassen op uw stylesheet te combineren met behulp van komma's. U kunt bijvoorbeeld .widget_pages ul en .widget_archive ul combineren door iets als dit te doen:

 .widget_pages ul, .widget_archive ul  

Default Comment Form Styles

Zo lelijk als het maken van opmerkingen ervoor zorgt dat WordPress het een stuk eenvoudiger maakt met zijn standaardklassen. Als u echter geen opmerkingen met een thread gebruikt, is het mogelijk om er veel van te negeren.

 / * Commentaar uitvoer * / .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  .comlijst.vcard  .comlijst. vcard cite.fn  .commentlist .vcard span.says  .commentlist .vcard img.photo  .commentlist .vcard img.avatar  .comlijst cite.fn a.url  .comlijstlijst.vcard meta  .commentlist .comment-meta a  .commentlist .commentmetadata  .commentlist .commentmetadata a  .commentlist .parent  .commentlist .comment  .commentlist .children  .commentlist.pingback . commentlist .bypostauthor  .commentlist .comment-auteur  .commentlist .comment-auteur-admin  .comlijst  Loyallist li  Loyallist li p  Loyallist li ul  Loyellijst 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-auteur-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  .com-formulier-email   .comment-form-url  .comment-form-comment  .form-allowed-tags  .form-submit 

Omdat dit slechts een cheatsheet is, zijn er nog steeds veel andere klassen en id's die we mogelijk niet hebben behandeld. Als je het gevoel hebt dat iets anders belangrijk is en het hoort op deze lijst, kun je hieronder een reactie achterlaten.