Siete alla ricerca di un cheat sheet CSS predefinito generato da WordPress?
WordPress aggiunge automaticamente alcune classi CSS a diversi elementi nella maggior parte dei temi. Queste classi CSS predefinite possono essere utilizzate per creare lo stile di questi elementi nel vostro tema WordPress.
In questo articolo, vi mostreremo il cheat sheet CSS generato di default da WordPress. Parleremo anche di come trovare facilmente le classi CSS e di come aggiungere classi CSS personalizzate ogni volta che ne avete bisogno.
Perché imparare a conoscere i CSS generati di default da WordPress?
WordPress genera e aggiunge automaticamente classi CSS predefinite a diversi elementi del vostro sito WordPress.
Gli sviluppatori di temi WordPress possono quindi utilizzare queste classi CSS per creare lo stile delle aree comuni di tutti i siti WordPress. Queste possono includere l’area dei contenuti, le barre laterali, i widget, i menu di navigazione e altro ancora.
Conoscere queste classi CSS è utile se si sta imparando lo sviluppo di un tema WordPress o semplicemente se si sta cercando di creare un tema figlio per il proprio sito web.
Inoltre, vi aiuta a stilizzare rapidamente alcuni elementi del vostro tema WordPress aggiungendo CSS personalizzati senza creare il vostro tema.
Nota: non è necessario imparare i CSS per modificare gli stili del tema o creare un tema personalizzato. Se preferite non imparare il codice, potete usare un costruttore drag and drop come SeedProd. Ne parleremo più avanti nell’articolo.
Detto questo, diamo un’occhiata alle classi CSS generate di default da WordPress.
Stili predefiniti della classe del corpo
Il tag body <body> in HTML contiene l’intera struttura del layout di qualsiasi pagina web, il che lo rende molto importante nella progettazione di qualsiasi tema WordPress.
WordPress aggiunge diverse classi CSS all’area del corpo, che i progettisti di temi possono utilizzare per stilizzare il contenitore del corpo.
// Added when a website is using a right-to-left language e.g. Arabic, Hebrew
.rtl {}
// Added when home page is being displayed
.home {}
// Added when blog page is being displayed
.blog {}
// Added when an Archive page is being displayed
.archive {}
// Added when a date based archive is displayed
.date {}
// Added on search pages
.search {}
// Added when pagination is enabled
.paged {}
// Added when an attachment page is displayed
.attachment {}
// Added when a 404 error page is displayed
.error404 {}
// Added when a single post is dispayed includes post ID
.single postid-(id) {}
// Added when a single attachment is displayed. Includes attachment ID
.attachmentid-(id) {}
// Added when a single attachment is displayed. Includes attachment mime-type
.attachment-(mime-type) {}
// Added when an author page is displayed
.author {}
// Added when an author page is displayed. Includes author name.
.author-(user_nicename) {}
// Added when a category page is displayed
.category {}
//Added when a category page is displayed. Includes category slug.
.category-(slug) {}
// Added when a tag page is displayed.
.tag {}
// Added when a tag page is displayed. Includes tag slug.
.tag-(slug) {}
// Added when a parent page is displayed.
.page-parent {}
// Added when a child page is displayed. Includes parent page ID.
.page-child parent-pageid-(id) {}
// Added when a page is displayed using page template. Includes page template file name.
.page-template page-template-(template file name) {}
// Added when search results are displayed.
.search-results {}
// Added when search returns no results.
.search-no-results {}
// Added when a logged in user is detected.
.logged-in {}
// Added when a paginated page is displayed. Includes page number.
.paged-(page number) {}
// Added when a paginated single item is displayed. Includes page number.
.single-paged-(page number) {}
// Added when a paged page type is displayed. Includes page number.
.page-paged-(page number) {}
// Added when a paged category page is displayed. Includes page number.
.category-paged-(page number) {}
// Added when a paged tag page is displayed. Includes page number.
.tag-paged-(page number) {}
//Added when a paged date based archive page is displayed. Includes page number.
.date-paged-(page number) {}
// Added when a paged author page is displayed. Includes page number.
.author-paged-(page number) {}
// Added when a paaged search page is displayed. Includes page number.
.search-paged-(page number) {}
Come si può vedere, queste classi includono un’ampia varietà di condizioni che possono essere utilizzate negli stili CSS.
Per esempio, se si vuole che la pagina della categoria “Notizie” abbia un colore di sfondo diverso, si può aggiungere il seguente CSS personalizzato.
.category-news {
background-color:#f7f7f7;
}
Avete bisogno di un modo semplice per aggiungere CSS e snippet di codice in WordPress? Provate il plugin gratuito WPCode per rendere i vostri snippet di codice a prova di futuro.
Classi di stile predefinite per i post
Come per l’elemento body, WordPress aggiunge classi dinamiche anche agli elementi del post.
Questo elemento è solitamente il tag <article> nel template del tema. Tuttavia, potrebbe essere qualsiasi altro tag, a seconda del tema. Le classi CSS del post sono visualizzate nel tema aggiungendo il tag post_class().
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Ecco un elenco di alcune delle classi CSS più comuni generate dalla funzione post_class():
// Adds a class with ID for single items
.post-(ID) {}
// Generic post claass added for single blog posts.
.post {}
// Generic page class added when a single page is displayed.
.page {}
// Generic attachment class added to attachment pages.
.attachment {}
// Adds a post type class e.g. type-post
.type(post-type){}
// Adds a class for post format if theme supports posts formats. E.g. format-standard
.format-(post-format){}
// Added when an item has a featured image
.has-post-thumbnail{}
// Added when a sticky post is displayed
.sticky {}
// Generic class to display an entry
.hentry {}
// Classes with categories assigned to a post. E.g. category-news category-movies
.category-(slug) {}
// Classes with tags assigned to a post. e.g. tag-photofriday tag-tgif
.tag-(slug) {}
Le classi di post consentono di stilizzare i post e le pagine del blog in base a condizioni diverse. Ad esempio, è possibile stilizzare in modo diverso i post del blog archiviati in una categoria specifica utilizzando il seguente CSS personalizzato:
.category-news {
background-color:#EFEFEF;
}
Se non vedete l’editor CSS nella vostra dashboard di WordPress, seguite il nostro tutorial su come risolvere la mancanza del personalizzatore di temi di WordPress.
Classi di menu di navigazione predefinite
WordPress aggiunge anche classi CSS ai menu di navigazione. Di seguito sono riportate le classi aggiunte di default ai menu di navigazione.
// Class for Current Page
.current_page_item{}
// Class for Current Category
.current-cat{}
// Class for any other current Menu Item
.current-menu-item{}
// Class for a taxonomies
.menu-item-type-(taxonomy){}
// class to distinguish post types.
.menu-item-type-(post_type){}
// Class for any custom item that you added
.menu-item-type-custom{}
// Class for the Home Link
.menu-item-home{}
Il tema WordPress aggiungerà anche una classe CSS a ciascuna posizione del menu di navigazione.
Supponiamo che il tema assegni la classe primary-menu a una posizione del menu all’interno dell’area dell’intestazione, allora si può puntare su di essa nel CSS utilizzando le seguenti classi CSS.
// container class
#header .primary-menu{}
// container class first unordered list
#header .primary-menu ul {}
//unordered list within an unordered list
#header .primary-menu ul ul {}
// each navigation item
#header .primary-menu li {}
// each navigation item anchor
#header .primary-menu li a {}
// unordered list if there is drop down items
#header .primary-menu li ul {}
// each drop down navigation item
#header .primary-menu li li {}
// each drap down navigation item anchor
#header .primary-menu li li a {}
Per maggiori dettagli, consultate la nostra guida su come creare un menu di navigazione in WordPress.
Classi di widget predefinite di WordPress
I widget sono un modo semplice per visualizzare blocchi non contenutistici nel tema WordPress. In genere vengono visualizzati in aree o barre laterali dedicate al widget nel tema WordPress.
WordPress aggiunge le seguenti classi ai widget legacy.
.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 {}
Tuttavia, con il passaggio di WordPress alle aree widget basate su blocchi, è ora possibile aggiungere diversi blocchi alle aree widget e ognuno di essi genera classi CSS in modo dinamico.
Vi mostreremo come trovare queste classi CSS più avanti in questo articolo.
Classi predefinite del modulo di commento
I commenti sono il fulcro del coinvolgimento di molti siti web WordPress. Il loro stile aiuta a fornire agli utenti un’esperienza più pulita e coinvolgente.
WordPress aggiunge le seguenti classi CSS predefinite per aiutare gli sviluppatori di temi a stilizzare l’area dei commenti.
/*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
Per maggiori dettagli, consultate la nostra guida su come creare uno stile per i commenti in WordPress.
Trovare le classi di blocchi di WordPress
L’editor di blocchi di WordPress genera dinamicamente le classi CSS per i blocchi.
Per trovare queste classi CSS, è necessario aggiungere quel particolare blocco a un post o a una pagina. Dopodiché, è necessario fare clic sul pulsante Anteprima per vedere il blocco in azione.
Nella scheda Anteprima, posizionare il mouse sul blocco appena aggiunto e selezionare lo strumento Ispezione facendo clic con il pulsante destro del mouse.
Nella console degli sviluppatori, si vedrà l’HTML generato dal blocco. Da qui, si possono vedere le classi CSS aggiunte dal blocco.
Nella schermata qui sopra, stiamo osservando le classi CSS del blocco Galleria. È possibile utilizzare queste classi CSS per creare lo stile del blocco Galleria nel proprio tema WordPress.
Aggiunta di classi CSS personalizzate in WordPress
Le classi CSS predefinite di WordPress sono piuttosto complete. Tuttavia, il loro scopo è principalmente quello di fornire agli sviluppatori di temi un quadro standardizzato con cui costruire.
Per il proprio sito web, potrebbe essere necessario aggiungere CSS personalizzati per le aree in cui non è possibile trovare una classe CSS predefinita.
Allo stesso modo, a volte si può desiderare di apportare una piccola modifica a un post o a una pagina specifica senza applicarla all’intero tema.
Fortunatamente WordPress offre diversi modi semplici per aggiungere classi CSS in diverse aree.
Aggiungere classi CSS personalizzate a un blocco nell’editor di blocchi
Se si desidera aggiungere rapidamente una classe CSS personalizzata a un post o a una pagina specifici, il modo più semplice è utilizzare l’editor di blocchi.
È sufficiente modificare il post o la pagina e selezionare il blocco in cui si desidera aggiungere la classe CSS personalizzata. Nelle impostazioni del blocco, fare clic sul pannello avanzato e aggiungere il nome della classe CSS.
Non dimenticate di salvare le modifiche facendo clic sul pulsante Aggiorna.
È ora possibile utilizzare questa classe per aggiungere codice CSS personalizzato che avrà effetto solo su questo particolare blocco in questo particolare post o pagina.
Nei menu di navigazione di WordPress
È anche possibile aggiungere CSS personalizzati alle voci del menu di navigazione di WordPress. Se volete convertire una voce di menu in un pulsante, questo metodo vi sarà utile.
È sufficiente andare alla pagina Aspetto ” Menu e fare clic sul pulsante Opzioni schermo nell’angolo superiore destro dello schermo.
Da qui, è necessario selezionare la casella accanto all’opzione Classi CSS.
Successivamente, è necessario scorrere verso il basso e fare clic per espandere la voce di menu in cui si desidera aggiungere la classe CSS personalizzata.
Si noterà un campo con la dicitura Classi CSS. Aggiungete qui la vostra classe CSS personalizzata.
Non dimenticate di fare clic sul pulsante Salva menu per memorizzare le modifiche.
È ora possibile utilizzare questa classe CSS personalizzata per creare uno stile diverso per quella particolare voce di menu.
Bonus: Progettare facilmente un tema WordPress senza scrivere codice CSS
Imparare a creare il proprio tema WordPress con i CSS personalizzati è un’abilità molto utile. Tuttavia, alcuni utenti potrebbero semplicemente desiderare una soluzione per progettare il proprio tema WordPress senza mai scrivere codice CSS.
Per questo, avrete bisogno di SeedProd. È il miglior strumento di page builder per WordPress presente sul mercato, che consente di creare facilmente temi personalizzati senza scrivere alcun codice.
SeedProd viene fornito con temi pronti all’uso che potete utilizzare come punto di partenza.
È anche possibile creare un tema da zero creando manualmente dei modelli.
È quindi possibile modificare il tema personalizzato utilizzando un’intuitiva interfaccia di costruzione del sito a trascinamento.
È sufficiente aggiungere blocchi al progetto per creare layout personalizzati.
È inoltre possibile modificare facilmente qualsiasi elemento con un semplice clic. È possibile utilizzare colori, sfondi, caratteri e altro ancora.
Per maggiori dettagli, consultate il nostro tutorial passo passo su come creare facilmente un tema WordPress personalizzato senza scrivere alcun codice.
Speriamo che questo articolo vi abbia aiutato a trovare il foglio informativo sui CSS generati di default da WordPress. Potreste anche voler consultare la nostra guida alla correzione degli errori più comuni di WordPress o vedere il nostro confronto tra i migliori software di live chat per le piccole imprese.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Rodrigo Vieira Eufrasio da Silva says
You are to be congratulated for this wonderful content. I would only recommend updating this article, and letting us know which classes are generated by guttenberg and the latest version of WordPress because this post is out of date. But it helped me a lot.
Hugs to you all.
WPBeginner Support says
Thank you for letting us know, we’ll be sure to take a look
Admin
Alison Westall says
Is there a CSS class for changing the padding of an element? Thanks!
WPBeginner Support says
Once you find the object you want to add padding to, you would use:
padding, padding-top, padding-right, padding-bottom, padding-left
depending on what type of padding you want added
Admin
Matt Cauley says
Thanks for the info. I just bookmarked page even though its a few years old!
WPBeginner Support says
Thank you, while the article is older, it should still be useful
Admin
MS Shohan says
Awesome work bro. Thanks for making a list of all the default WP classes
Hannah Steele says
Hello, I am really struggling to format the automatically generated events page.
Please help me?
Arunjith RS says
Realy useful..Tank you.
Shai says
Can you (if not already elsewhere) list the admin dashboard and admin widgets classes.
it look like the admin is using a loader (wp-admin/load-styles.php) to include it CSS but that CSS is compress and hard to read. it will be nice to see a list of the items in use. for example if you want to create your own widget with tabs ; I inspected the CSS and can see large list of the class .nav-tab related CSS.
.
Ari Susanto says
and the “entry-content” itself!
Ari Susanto says
I want to add this one:
“status-publish”
luroch says
A question: when creating a bootstrap theme from underscores, should I keep the classes and ids that come with this framework, just adding the Bootstrap ones, or can I use only Bootstrap classes and Ids?
Ari Susanto says
How did you found them? Is there an automated way like using php function, may be?
Stephen Clark says
Fantastic post and highly informative. Curious if you could append this post with similar details about the WP footer. I have been struggling with styling and formatting the footer with the theme I’m using, and with some other sites I’ve built.
Would also be helpful to have a downloadable CSS stylesheet file containing all of these styles. Thanks!
Kevin Pryce says
When I inspect element only my wordpress theme, I do not see these styles, especially the ones applied to the body class. Do you have to put them into the template?
Joel Bladt says
Nice compilation of all the standard WordPress classes. Was that really all classes that are added automatically by WordPress? If classes are obsolete and disappeared, or new ones have come to this, I look forward to updating the list.
– German Blogger and translated with Google Translator.
WPBeginner Support says
It is up to date to the best of our knowledge, if you find any class obsolete, please let us know.
Admin
loreto says
time saver! now let me mess those styles
Amba Junior says
Very useful tutorial. Just like the Genesis visual hook guide, this summarizes Genesis real well
MalcolmOwen says
Do you know what would be useful? A printable PDF version of this guide…
Pete says
http://www.printfriendly.com/print/v2?url=http%3A%2F%2Fwww.wpbeginner.com%2Fwp-themes%2Fdefault-wordpress-generated-css-cheat-sheet-for-beginners%2F#
Adriane says
Thank you Pete!
wpbeginner says
@smashingmag Thank you for retweeting our article
really appreciate the love.
favstar50 says
@smashingmag Congrats on your 50★ tweet! http://t.co/r78Ao3Sm
bobHankin says
@photoassassin No I hadn’t. That’s sweet! Handy too!
eugenebicyclist says
Just learning to work with WP and this is really handy. Thank you.