Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress Body Class 101: Suggerimenti e trucchi per progettisti di temi

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

Siete aspiranti designer di temi WordPress alla ricerca di nuovi modi per utilizzare i CSS nei vostri temi?

Fortunatamente, WordPress aggiunge automaticamente delle classi CSS che potete utilizzare nei vostri temi. Alcune di queste classi CSS vengono aggiunte automaticamente alla sezione <body> di ogni pagina di un sito WordPress.

In questo articolo, spiegheremo le classi di corpi di WordPress con suggerimenti e trucchi per gli aspiranti designer di temi per utilizzarli nei loro progetti.

Using WordPress body class for theme development
Ecco una rapida panoramica di ciò che imparerete in questo articolo.

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 in una pagina di archivio, WordPress aggiungerà automaticamente la classe archivio all’elemento body. Lo fa praticamente per ogni pagina.

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.

Add a new custom code snippet in WPCode

Quindi, aggiungete un titolo per il vostro snippet e incollate il codice di cui sopra nella casella “Anteprima codice”. È inoltre necessario selezionare “PHP Snippet” come tipo di codice dal menu a discesa sulla destra.

Paste code into WPCode and select PHP snippet as code type

A questo punto, è sufficiente spostare l’interruttore da ‘Inattivo’ ad ‘Attivo’ e fare clic sul pulsante ‘Salva snippet’.

Activate and save your custom code 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.

Adding custom CSS in theme customizer

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.

Custom Body Class settings

È 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”.

Adding body classes to a post in WordPress

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:

Custom preview mode CSS class added to the body class

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)”.

Add a new custom code snippet in WPCode

Quindi, è sufficiente incollare il codice di cui sopra nella casella “Anteprima codice” e selezionare “PHP Snippet” come tipo di codice dal menu a discesa.

Paste code snippet into WPCode

Infine, spostare l’interruttore da ‘Inattivo’ ad ‘Attivo’ e fare clic sul pulsante ‘Salva snippet’.

Activate and save your custom code 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:

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.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

14 commentiLascia una risposta

  1. 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!

  2. Corrinda says

    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.

  3. Yolanda says

    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]

  4. Seth Burleigh says

    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!

  5. Rasha says

    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 ?

  6. Vajrasar says

    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?

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.