Se siete aspiranti designer di temi per WordPress, la padronanza dei CSS è fondamentale per ottenere un maggiore controllo, personalizzazione ed efficienza nel vostro flusso di lavoro.
Fortunatamente, WordPress aggiunge automaticamente delle classi CSS che possono essere utilizzate nei temi. Molte di queste classi CSS vengono add-on automaticamente alla sezione <body> di ogni pagina di un sito web WordPress.
In questo articolo spiegheremo il contenuto delle classi di WordPress. Condivideremo anche suggerimenti e trucchi per l’utilizzo delle classi del contenuto di WordPress, frutto di anni di esperienza nello sviluppo di temi, per aiutarvi a migliorare i vostri progetti.
Ecco una rapida panoramica di ciò che imparerete in questo articolo.
- What is WordPress Body Class?
- When to Use the WordPress Body Class
- How to Add Custom Body Classes
- Adding Body Class Using a WordPress Plugin
- Using Conditional Tags with the Body Class
- Other Examples of Dynamically Adding Custom Body Classes
- Browser Detection and Browser Specific Body Classes
- Expert Guides on WordPress Theme Design
Che cos’è WordPress Body Class?
Body class (body_class) è una funzione di WordPress che consente di assegnare classi CSS all’elemento body.
Il tag HTML body inizia normalmente nel file header.php di un tema, che viene caricato su ogni pagina. Ciò consente di capire dinamicamente quale pagina l’utente sta visualizzando e di aggiungere le classi CSS di conseguenza.
Normalmente, la maggior parte dei temi e dei framework include già la funzione body class all’interno del tag body dell’HTML. Tuttavia, se il tema non lo prevede, è possibile aggiungerlo modificando il tag body in questo modo:
<body <?php body_class($class); ?>>
A seconda del tipo di pagina visualizzata, WordPress aggiunge automaticamente le classi appropriate.
Ad esempio, se ci si trova su una pagina di archivio, WordPress aggiungerà automaticamente la classe archivio all’elemento contenuto. Lo fa praticamente per tutte le pagine.
Correlato: Scoprite come funziona WordPress dietro le quinte (infografica).
Ecco alcuni esempi di classi comuni che WordPress potrebbe aggiungere, a seconda della pagina visualizzata:
.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 {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}
Come potete vedere, avendo a disposizione una risorsa così potente, potete personalizzare interamente la vostra pagina di WordPress utilizzando solo i CSS. È possibile personalizzare pagine specifiche del profilo dell’autore, archivi basati sulla data, ecc.
Detto questo, vediamo ora come e quando utilizzare la classe body.
Quando utilizzare la classe WordPress Body
Innanzitutto, è necessario assicurarsi che l’elemento body del tema contenga la funzione body class, come mostrato sopra. Se lo contiene, includerà automaticamente tutte le classi CSS generate da WordPress e menzionate sopra.
Successivamente, sarà possibile aggiungere le proprie classi CSS personalizzate all’elemento body. È possibile aggiungere queste classi ogni volta che se ne ha bisogno.
Ad esempio, se si desidera modificare l’aspetto degli articoli di un autore specifico archiviati in una categoria specifica.
Come aggiungere classi di corpi personalizzate
WordPress dispone di un filtro che è possibile utilizzare per aggiungere classi di corpo personalizzate quando necessario. Vi mostreremo come aggiungere una classe del corpo utilizzando il filtro prima di mostrarvi lo scenario specifico del caso d’uso, in modo che tutti siano sulla stessa pagina.
Poiché le classi del corpo sono specifiche del tema, è necessario aggiungere il seguente codice al file functions.php del tema o in un plugin di snippets di codice.
function my_class_names($classes) {
// add 'class-name' to the $classes array
$classes[] = 'wpb-class';
// return the $classes array
return $classes;
}
//Now add test class to the filter
add_filter('body_class','my_class_names');
Il codice sopra riportato aggiungerà una classe “wpb-class” al tag body di ogni pagina del vostro sito web.
Consigliamo di aggiungere questo codice con WPCode, il miglior plugin di snippets di codice sul mercato. Rende sicura e facile l’aggiunta di codice personalizzato in WordPress senza modificare il file functions.php del tema.
Per prima cosa, è necessario installare e attivare il plugin gratuito WPCode. Se avete bisogno di istruzioni, consultate la nostra guida su come installare un plugin di WordPress.
Una volta attivato il plugin, andate su Code Snippets “ Add Snippet dalla vostra dashboard di WordPress. Quindi, trovate l’opzione “Add Your Custom Code (New Snippet)” e fate clic sul pulsante “Use snippet” sotto di essa.
A questo punto, è necessario scegliere “PHP Snippet” come tipo di codice dall’elenco di opzioni che appare sulla schermata.
Quindi, aggiungete un titolo per il vostro snippet e incollate il codice di cui sopra nella casella “Anteprima codice”.
A questo punto, è sufficiente spostare l’interruttore da ‘Inattivo’ ad ‘Attivo’ e fare clic sul pulsante ‘Salva snippet’.
Ora potete utilizzare questa classe CSS direttamente nel foglio di stile del vostro tema. Se state lavorando al vostro sito web, potete anche aggiungere il CSS utilizzando la funzione CSS personalizzata nel personalizzatore di temi di WordPress.
Per maggiori dettagli, consultate la nostra guida su come aggiungere facilmente CSS personalizzati al vostro sito WordPress.
Aggiungere la classe del corpo utilizzando un plugin di WordPress
Se non state lavorando a un progetto cliente e non volete scrivere codice, questo metodo è più semplice per voi.
La prima cosa da fare è installare e attivare il plugin Custom Body Class. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.
Dopo l’attivazione, è necessario visitare la pagina Impostazioni ” Classe corpo personalizzata. Da qui è possibile configurare le impostazioni del plugin.
È possibile selezionare i tipi di post per i quali si desidera abilitare la funzione body class e chi può accedervi. Non dimenticate di cliccare sul pulsante “Salva modifiche” per salvare le impostazioni.
Quindi, potete andare a modificare qualsiasi post o pagina del vostro sito WordPress. Nella schermata di modifica del post, troverete un nuovo meta-riquadro nella colonna di destra con l’etichetta “Classi del post”.
Fare clic per aggiungere le classi CSS personalizzate. È possibile aggiungere più classi separate da uno spazio.
Una volta terminato, si può semplicemente salvare o pubblicare il post. Il plugin aggiungerà le classi CSS personalizzate alla classe body di quel particolare post o pagina.
Utilizzo dei tag condizionali con la classe Body
La vera potenza della funzione body_class si ha quando viene usata con i tag condizionali.
Questi tag condizionali sono tipi di dati true o false che verificano se una condizione è vera o falsa in WordPress. Ad esempio, il tag condizionale is_home verifica se la pagina attualmente visualizzata è la homepage o meno.
Ciò consente agli sviluppatori di temi di verificare se una condizione è vera o falsa prima di aggiungere una classe CSS personalizzata alla funzione body_class.
Vediamo alcuni esempi di utilizzo dei tag condizionali per aggiungere classi personalizzate alla classe body.
Supponiamo che vogliate creare uno stile diverso per la vostra homepage per gli utenti che hanno effettuato l’accesso con il ruolo di autore. Mentre WordPress genera automaticamente una classe .home e .logged-in, non rileva il ruolo dell’utente né lo aggiunge come classe.
Ora, questo è uno scenario in cui si possono usare i tag condizionali con del codice personalizzato per aggiungere dinamicamente una classe personalizzata alla classe body.
Per ottenere questo risultato, aggiungete il seguente codice al file functions.php del vostro tema o al plugin Code Snippets.
function wpb_loggedin_user_role_class($classes) {
// let's check if it is homepage
if ( is_home() ) {
// Now let's check if the logged in user has author user role.
$user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) {
//The user has the "author" role
// Add user role to the body class
$classes[] = 'author';
// Return the classes array
return $classes;
}
} else {
// if it is not homepage, then just return default classes
return $classes;
}
}
add_filter('body_class', 'wpb_loggedin_user_role_class');
Vediamo ora un altro esempio utile. Questa volta controlleremo se la pagina visualizzata è un’anteprima di una bozza di WordPress.
Per farlo, utilizzeremo il tag condizionale is_preview e aggiungeremo la nostra classe CSS personalizzata.
function add_preview_class($classes) {
if ( is_preview() ) {
$classes[] = 'preview-mode';
return $classes;
}
return $classes;
}
add_filter('body_class','add_preview_class');
Ora aggiungiamo il seguente CSS al foglio di stile del nostro tema per utilizzare la nuova classe CSS personalizzata appena aggiunta.
.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}
Ecco come appariva sul nostro sito demo:
Si consiglia di consultare l’elenco completo dei tag condizionali che si possono usare in WordPress. Questo vi fornirà una serie di tag pronti all’uso per il vostro codice.
Altri esempi di aggiunta dinamica di classi corpo personalizzate
Oltre ai tag condizionali, è possibile utilizzare altre tecniche per recuperare informazioni dal database di WordPress e creare classi CSS personalizzate per la classe body.
Aggiunta di nomi di categorie alla classe body di una pagina di un singolo post
Supponiamo di voler personalizzare l’aspetto dei singoli post in base alla categoria in cui sono archiviati. Per farlo, si può usare la classe body
Innanzitutto, è necessario aggiungere i nomi delle categorie come classe CSS nelle pagine dei singoli post. Per farlo, aggiungete il seguente codice al file functions.php del vostro tema o a un plugin di snippets di codice come WPCode:
// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
add_filter('body_class', 'category_id_class');
Il codice qui sopra aggiungerà la classe della categoria nella classe del corpo per le pagine dei post singoli. È quindi possibile utilizzare le classi CSS per creare lo stile desiderato.
Aggiunta dello slug della pagina alla classe body
Incollate il seguente codice nel file functions.php del vostro tema o in un plugin di snippets di codice:
//Page Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );
Anche in questo caso, si consiglia di aggiungere questo codice in WordPress utilizzando un plugin di snippets di codice come WPCode. In questo modo, non dovrete preoccuparvi di rompere il vostro sito.
Iniziate installando e attivando il plugin gratuito WPCode. Se avete bisogno di aiuto, seguite questa guida su come installare un plugin di WordPress.
Una volta attivato il plugin, andare su Code Snippets “ Aggiungi snippet dalla dashboard di WordPress. Quindi, fare clic sul pulsante “Usa snippet” sotto l’opzione “Aggiungi il tuo codice personalizzato (nuovo snippet)”.
Quindi, selezionare “Snippet PHP” come tipo di codice.
Quindi, è sufficiente aggiungere un titolo per lo snippet di codice e incollare il codice di cui sopra nella casella “Anteprima codice”.
Infine, spostare l’interruttore da ‘Inattivo’ ad ‘Attivo’ e fare clic sul pulsante ‘Salva snippet’.
Rilevamento del browser e classi del corpo specifiche del browser
A volte è possibile imbattersi in problemi in cui il tema necessita di CSS aggiuntivi per un particolare browser.
Ora, la buona notizia è che WordPress rileva automaticamente il browser al momento del caricamento e memorizza temporaneamente questa informazione come variabile globale.
È sufficiente verificare se WordPress ha rilevato un browser specifico e quindi aggiungerlo come classe CSS personalizzata.
È sufficiente copiare e incollare il seguente codice nel file functions.php del vostro tema o nel plugin Code Snippets:
function wpb_browser_body_class($classes) {
global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;
if ($is_iphone) $classes[] ='iphone-safari';
elseif ($is_chrome) $classes[] ='google-chrome';
elseif ($is_safari) $classes[] ='safari';
elseif ($is_NS4) $classes[] ='netscape';
elseif ($is_opera) $classes[] ='opera';
elseif ($is_macIE) $classes[] ='mac-ie';
elseif ($is_winIE) $classes[] ='windows-ie';
elseif ($is_gecko) $classes[] ='firefox';
elseif ($is_lynx) $classes[] ='lynx';
elseif ($is_IE) $classes[] ='internet-explorer';
elseif ($is_edge) $classes[] ='ms-edge';
else $classes[] = 'unknown';
return $classes;
}
add_filter('body_class','wpb_browser_body_class');
Si possono quindi utilizzare classi come:
.ms-edge .navigation {some item goes here}
Se si tratta di un piccolo problema di padding o di margine, questo è un modo abbastanza semplice per risolverlo.
Ci sono sicuramente molti altri scenari in cui l’uso della funzione body_class può evitare di scrivere lunghe righe di codice. Per esempio, se si utilizza un framework di temi come Genesis, è possibile utilizzarla per aggiungere classi personalizzate nel tema figlio.
Si può usare la funzione body_class per aggiungere classi CSS per i layout delle pagine a tutta larghezza, per i contenuti delle barre laterali, per le intestazioni e i piè di pagina, ecc.
Guide di esperti sul design dei temi di WordPress
Cercate altri tutorial? Consultate le nostre altre guide sulla progettazione di temi in WordPress:
- Come aggiungere un effetto parallasse a qualsiasi tema WordPress
- Come modificare il footer in WordPress (4 modi)
- Come aggiungere fiocchi di neve nel vostro blog WordPress
- Come aggiornare un tema di WordPress senza perdere i personalizzazioni
- Come ottenere feedback sul design di un sito web in WordPress
Speriamo che questo articolo vi abbia aiutato a imparare a utilizzare la classe body di WordPress nei vostri temi. Vi consigliamo di leggere anche il nostro articolo su come dare uno stile diverso a ogni post di WordPress e il nostro confronto tra i migliori plugin di page builder per WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
jenny
plsss give me example outwitting a crocodile theme plsssssssss
Corrinda
Thank you after reading a number of articles regarding the body-class this is the one the finally sunk in.
Got it working on individual pages and on category pages this is great. The use cases are what made the difference for me.
Editorial Staff
Sweet. Glad to be able to help.
Admin
Yolanda
Great tips! I’m trying to figure out how to add the menu class (the one you can enter in the admin) to body_class:
[pre]
/** Add nav menu css class to body class */
function add_nav_menu_css( $classes ) {
$classes[] = ‘menu-class-from-admin’;
return $classes;
}
add_filter( ‘body_class’, ‘add_nav_menu_css’ );
[/pre]
Seth Burleigh
Great tips. I”m trying to do this, and when inserting “page-template page-template-(template file name)” into my header file such that I have:
<body >
And I then modify my CSS to include: .page-template-home_corechella
I am left with a completely blank page. Nothing. What am I doing wrong? Thanks!
Editorial Staff
The page-templates are added in the homepage automatically as long as you have the body_class tags. Would have to see the file to see what you are doing wrong. Use a third party service like pastebin, and then paste the link here.
Admin
Seth
Ok, thank you very much!
I’ve changed the approach slightly since my post (now using instead of page template), but a similar problem is happening – the correct body CSS (body.corechella) is not showing. The original body class is taking priority.
Corechella Page template (http://dev.corebaby.org/corechella-home/) – http://pastebin.com/embed_js.php?i=8L6rhESr
Corechella header.php file – http://pastebin.com/embed_js.php?i=n2Sn4jUJ
CSS (the new body class is at the very bottom) – http://pastebin.com/embed_js.php?i=4U6d09cQ”
Seth
Editorial Staff
In your header.php, you have to keep the body class like this:
1-click Use in WordPress
In your CSS, just use .corchella instead of body.corchella
Michael
Great write up, thanks
Editorial Staff
Glad you found it helpful
Admin
Rasha
i have news page that get posts using category.php , i want to give it specific class so i can make the content wide and without the sidebar , how i can do that ?
Vajrasar
Indeed a good writeup and very informative. Just a question – For example if I add Browser Specific Body Class today and after few days I need to apply Page Class in Body Slug. Then will the settings/css that I did with Browser Specific Body class will get ruined or not?
Editorial Staff
No it will not get ruined. It can be overridden depending on how your CSS is written.
Admin