Implicit WordPress generat CSS Sheet Cheat pentru incepatori

Te-ai intrebat vreodata cum poti modela diferite elemente ale temei WordPress? Ei bine, variază de la temă la temă, dar există anumite clase și ID-uri CSS generate de WordPress. Dacă sunteți cineva care încearcă să schițeze o temă sau căuta să creeze o temă pentru lansarea publică, atunci acestea sunt câteva elemente de stil pe care ați putea dori să le adăugați în tema.

Scopul acestui cheat foaie este de a ajuta incepatori care sunt în căutarea de a intra în styling tema WordPress. Dacă sunteți un începător care nu dorește să se ocupe de coduri, atunci vă recomandăm să obțineți un cadru tematic, cum ar fi Headway, care face totul pentru dvs. cu drag and drop. Pentru restul de dvs., vom trece prin unele dintre cele mai importante stiluri WordPress implicite unul câte unul.

Tutorial video

Dacă nu vă place videoclipul sau aveți nevoie de mai multe instrucțiuni, continuați să citiți.

Stiluri de clasă corporală implicite

Unul dintre marile lucruri despre WordPress este personalizarea lui. Acesta vă permite să vizați aspecte foarte specifice ale site-ului dvs. cu CSS. Unul dintre modurile în care aceasta se întâmplă este adăugarea de clase personalizate la diverse elemente ale blogului dvs. Cel mai important dintre acestea este eticheta. Iată câteva exemple de clase comune pe care WordPress le-ar putea adăuga la acest element:

 .(id)  ​​.attachmentid- (id) .  .  .attachment- (tip mime)  .author  .author- (user_nicename)  .category  .category- (slug)  .tag  .tag- (slug) . -parent  .page-copil părinte-paginăid- (id)  ​​.pagină-șablon șablon de pagină- (nume fișier șablon)  .search-results  .search-no-results  .logged-in  .pagină- (numărul paginii)  .sunt un paginat (numărul paginii)  .pagină-paginată (numărul paginii)  .categorie-paginată (numărul paginii)  .tag-paged- numărul paginii)  .date-paginate- (numărul paginii)  .author-paged- (numărul paginii)  .search-pagided- (numărul paginii)  

Dacă, de exemplu, doriți să modelați pagina cu rezultatele căutării într-un mod specific, puteți utiliza clasa "rezultate-căutare" pentru a vă adăuga stilul. WordPress adaugă doar această clasă la eticheta corporală atunci când pagina cu rezultatele căutării este activă, astfel încât să nu afecteze alte pagini.

Implicit Stilurile postului

La fel ca și cu elementul corpului WordPress adaugă clase dinamice și elementelor post. Iată o listă cu unele dintre cele mai populare:

 .post-id  .post  .page . atașament  .stic  .hentry  .category-misc  .category-example  .tag -new  .tag-wordpress . tag-markup  

Dacă ați citit articolul nostru Ce, Whys și Cum să aveți formate Post în WordPress 3.1, atunci despre formatele de postare și cum vă puteți afișa posturile în mod diferit în funcție de formatul pe care îl alegeți. Încă o dată, WordPress adaugă clase dinamice postării dvs. utilizând funcția post_class () care vă va permite să creați propriile stiluri pentru fiecare format. Funcția post_class () va adăuga o clasă sub formă de ".format-foo" unde foo este oricare format de post selectat de exemplu. galerie, imagine, etc.

 .format-imagine  .format-galerie  .format-chat  .format-link  .format-quote  .format-status  .format-video  

Șabloane de meniu implicite

În articolul nostru numit cum să stil WordPress meniuri de navigare vom discuta despre cum puteți merge despre adăugarea propria clasă în meniul dumneavoastră. Vom presupune că ați citit-o și că ați oferit meniului dvs. nav propriul nume de clasă de "meniu principal".

 #header .main-menu  // clasa containerului #header .main-menu ul  // clasa containerului prima listă neordonată #header .main-menu ul ul  // lista neordonată într-o listă neordonată #header .main -menu li  // fiecare element de navigare #header .main-menu li a  // fiecare element de navigare anchor #header .main-menu li ul  // listă neordonată în cazul în care există elemente derulante #header .main -menu li li  // fiecare element de navigare derulant #header .main-meniu li li a  // fiecare element de navigare drapare ancora .current_page_item  // Clasa paginii curente .current-cat  // Clasă pentru categoria curentă .current-menu-item  // Clasă pentru orice alt articol din meniul curent .menu-item-type-taxonomy  // Clasa pentru o categorie .menu-item-type-post_type  pentru paginile .menu-item-type-custom  // Class pentru orice element personalizat pe care l-ați adăugat .menu-item-home  // Clasa pentru link-ul Home 

Observați că ori de câte ori creați un meniu în WordPress, acesta este înfășurat automat într-un div. Acest div are numai un nume de clasă dacă îl specificați (am ales "meniul principal"). De acolo simțiți diferitele elemente de listă.

Implicit stiluri editor WISIWYG

Editorul WISWYG este unul dintre cele mai populare și cele mai utilizate aspecte ale WordPress. Din acest motiv, este o idee bună să aveți stiluri gata pentru orice lucru pe care utilizatorul îl poate adăuga la blog, cum ar fi imagini sau bloccotes. Următorul CSS vă arată ce clase WordPress adaugă automat la aceste elemente:

 . .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  .galeria dl  .gallery dt  .gallery dd  .gallery dl a   .galerie dl img  .gallery-caption  .size-plin  .size-mare  .size-mediu  .size-thumbnail  

Puteți vedea că există mai multe clase care se referă doar la imagini. Dacă, de exemplu, utilizatorul decide să includă o imagine aliniată la stânga, atunci WordPress va adăuga clasa "alignleft".

Implicit Stilurile Widget WordPress

Widget-urile sunt un alt aspect popular al WordPress. Pe măsură ce dezvoltatorul deține controlul asupra widget-urilor care vor fi afișate, veți ști, de obicei, exact ce stiluri să adăugați. WordPress vine cu o mână de widget-uri implicite, cu toate acestea, și dacă nu le eliminați, este înțelept să adăugați stil la clasele lor.

 .widget  #searchform  .widget_search  .screen-reader-text  .widget_meta  .widget_meta ul  .widget_meta ul li  .widget_meta ul  .widget_links  .widget_links ul  .widget_links ul li  .widget_links ul a  .widget_archive  .widget_archive ul  .widget_archive ul li  .widget_archive ul li  .widget_archive selectați  .widget_archive opțiunea  .widget_pages . widget_pages ul  .widget_pages ul li  .widget_pages  .widget_links li: după  .widget_links li: înainte de  .widget_tag_cloud  .widget_tag_cloud a  .widget_tag_cloud a: după   .widget_tag_cloud a: înainte de  .widget_calendar  #calendar_wrap  #calendar_wrap th 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 selectați  .widget_categories selectați # cat  .widget_categories select.postform  .widget_categories opțiunea  .widget_categories .level-0  .widget_categories .level-1  .widget_categories . 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  .textwidget  .widget_text  .textwidget p  

Atunci când aplicați widget-urile de stil, probabil veți termina folosind aceleași stiluri de mai multe ori. Din acest motiv, este o idee bună să combinați clasele pe foaia dvs. de stil utilizând virgule. De exemplu, puteți combina .widget_pages ul și .widget_archive ul făcând astfel:

 .widget_pages ul, .widget_archive ul  

Modele standard de formular de comentarii

La fel de urât ca comentariile stilului, WordPress îl face mult mai ușor cu clasele sale implicite. Dacă nu aveți de-a face cu comentariile cu filet, este posibil să ignorați multe dintre ele.

 / * Comentariu Rezultat * / .commentlist .reply  .commentlist .reply o  .commentlist .alt  .commentlist .odd  .commentlist .even  .commentlist .thread-alt  .commentlist .thread-  . commentlist.  .comment li  .comment li ul. vcard cite.fn . commentlist .vcard span.says . commentlist .vcard img.photo  .commentlist .vcard img.avatar . commentlist .vcard cite.fn a.url  .commentlist .comment- . commentlist .comment-meta  .commentlist .commentmetadata  .commentlist .commentmetadata Commentlist parental commentlist comment com commentlist  .Commentlist .pingback . lista de comentarii .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   . commentlist li ul.children li.bypostauthor  .commentlist li ul.children li.comment-autor-admin  # anulează-comentariu-răspuns  # anulați-comentariu-răspuns a  / * Comentariu Formular * / #respond  answer-link  #commentform  #author  #email  #url  #comment #submit .comment-notes .  .comment-form-url  .comment-form-comment  .form-permis-etichete  .form-trimite 

Deoarece acesta este doar un cheatsheet, există încă multe alte clase și id-uri pe care probabil că nu le-am acoperit. Dacă vă simțiți ca și cum altceva este important și aparține acestei liste, vă rugăm să lăsați un comentariu mai jos.