Cheat Sheet CSS predefinito generato da WordPress per principianti

Ti sei mai chiesto come si possono disegnare diversi elementi del tema WordPress? Beh, varia da tema a tema, ma ci sono alcune classi CSS e ID che vengono generati da WordPress. Se sei qualcuno che sta cercando di creare uno stile per un tema, o stai cercando di creare un tema per la pubblicazione pubblica, questi sono alcuni elementi di stile che potresti voler aggiungere al tuo tema.

L'obiettivo di questo cheat sheet è assistere i principianti che stanno cercando di entrare nello stile dei temi WordPress. Se sei un principiante che non vuole trattare con i codici, ti consigliamo di ottenere una struttura a tema come Headway che fa tutto per te con il drag and drop. Per il resto di voi, passeremo alcuni degli stili WordPress predefiniti più importanti uno per uno.

Video Tutorial

Se il video non ti piace o hai bisogno di ulteriori istruzioni, continua a leggere.

Stili di body class predefiniti

Una delle grandi cose di WordPress è la sua personalizzazione. Ti consente di indirizzare gli aspetti molto specifici del tuo sito con i CSS. Uno dei modi in cui lo fa è l'aggiunta di classi personalizzate a vari elementi del tuo blog. Il più importante di questi è il tag. Ecco alcuni esempi di classi comuni che WordPress potrebbe aggiungere a questo elemento:

 .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  .loged-in  .paged- (numero di pagina)  .single-paged- (numero di pagina)  .page-paged- (numero di pagina)  .category-paged- (numero di pagina)  .tag-paged- ( numero di pagina)  .date-paged- (numero di pagina)  .author-paged- (numero di pagina)  .search-paged- (numero di pagina)  

Se, ad esempio, desideri ridisegnare la pagina dei risultati di ricerca in un modo specifico, puoi utilizzare la classe "risultati di ricerca" per aggiungere il tuo stile. WordPress aggiunge questa classe solo al tag body quando la pagina dei risultati della ricerca è attiva, quindi non ha effetto su altre pagine.

Stili postali predefiniti

Proprio come con l'elemento body WordPress aggiunge anche classi dinamiche agli elementi del post. Ecco una lista di alcuni dei più popolari:

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

Se hai letto il nostro articolo What, Whys e How to's di Post Formats in WordPress 3.1, hai parlato dei formati dei post e di come puoi visualizzare i tuoi post in modo diverso a seconda del formato che scegli. Ancora una volta, WordPress aggiunge classi dinamiche al tuo post utilizzando la funzione post_class () che ti permetterà di creare i tuoi stili per ogni formato. La funzione post_class () aggiungerà una classe sotto forma di ".format-foo", dove foo è qualsiasi formato di post che hai scelto ie. galleria, immagine, ecc.

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

Stili di menu predefiniti

Nel nostro articolo, chiamato come si modellano i menu di navigazione di WordPress, discutiamo su come puoi aggiungere la tua classe al tuo menu. Assumeremo che tu l'abbia letto e che hai dato al tuo menu di navigazione il suo nome di classe di "menu principale".

 #header .main-menu  // classe contenitore #header .main-menu ul  // classe contenitore primo elenco non ordinato #header .main-menu ul ul  // elenco non ordinato in un elenco non ordinato #header .main -menu li  // ogni elemento di navigazione #header .main-menu li a  // ogni elemento di navigazione anchor #header .main-menu li ul  // elenco non ordinato se vi sono elementi a discesa #header .main -menu li li  // ogni elemento di navigazione a discesa #header .main-menu li li a  // ogni elemento di navigazione drap down anchor .current_page_item  // Classe per pagina corrente .current-cat  // Class per Current Category .corrent-menu-item  // Classe per qualsiasi altro elemento di menu corrente .menu-item-type-taxonomy  // Class per una categoria .menu-item-type-post_type  // Class per Pagine .menu-item-type-custom  // Classe per qualsiasi articolo personalizzato aggiunto .menu-item-home  // Classe per il collegamento Home 

Si noti che ogni volta che si crea un menu in WordPress viene automaticamente avvolto in un div. Questo div ha solo un nome di classe se lo specifichi (abbiamo scelto "main-menu"). Da lì stai semplicemente disegnando i vari elementi dell'elenco.

Stili dell'editor WISIWYG predefiniti

L'editor WISWYG è uno degli aspetti più popolari e più utilizzati di WordPress. Per questo motivo è una buona idea avere gli stili pronti per tutto ciò che l'utente potrebbe aggiungere al proprio blog, come immagini o blockquotes. Il seguente CSS mostra quali classi WordPress aggiunge automaticamente a questi elementi:

 .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  

Puoi vedere che ci sono diverse classi relative solo alle immagini. Se, ad esempio, l'utente decide di includere un'immagine allineata a sinistra, WordPress aggiungerà la classe "alignleft".

Stili di WordPress predefiniti

I widget sono un altro aspetto popolare di WordPress. Come sviluppatore hai il controllo su quali widget verranno visualizzati in modo da sapere esattamente quali stili aggiungere. WordPress viene fornito con una manciata di widget predefiniti, tuttavia, a meno che non li rimuovi è consigliabile aggiungere uno stile alle loro classi.

 .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 seleziona  .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 it  .widget_categories a  .widget_categories seleziona  .widget_categories seleziona # 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  

Quando si disegnano i widget, si finisce per utilizzare sempre gli stessi stili più e più volte. Per questo motivo è una buona idea combinare le classi sul foglio di stile usando le virgole. Ad esempio, puoi combinare .widget_pages ul e .widget_archive ul facendo qualcosa del genere:

 .widget_pages ul, .widget_archive ul  

Stili dei moduli di commento predefiniti

Per quanto brutti siano i commenti sullo styling, WordPress lo rende molto più semplice con le sue classi predefinite. Se non si hanno a che fare con commenti thread, tuttavia, è possibile ignorarne molti.

 / * Uscita commenti * / .comlistlist .reply . Lista di elementi .reply a  .comlistlist .alt . Lista di elementi .odd . Lista di elementi .even . Lista di elementi.  .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 metament  .commentlist .commentmetadata  .comlistlist 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  # cancel-comment-reply  # cancel-comment-reply a  / * Modulo commenti * / #respond  # reply-title  # cancel-comment- reply-link  #commentform  #author  #email  #url  #comment #submit .comment-notes . richiesto  .com-form-author  .com-form-email   .comment-form-url  .com-form-comment  .form-allowed-tags  .form-submit 

Dato che questo è solo un cheatsheet ci sono ancora molte altre classi e id che potremmo non avere coperto. Se ritieni che qualcos'altro sia importante e appartenga a questo elenco, non esitare a lasciare un commento qui sotto.