Hai bisogno di personalizzare le classi del tag body e non sai come fare?
Hai bisogno di aggiungere differenti classi in base alla pagina visualizzata?
Ecco che qui spieghiamo come fare e come personalizzare il codice . 
Utilità
A cosa potrebbe servire personalizzare le classi del body? Potrebbe essere utile, ad esempio, per verificare se l’utente è loggato all’interno dello script oppure per eseguire uno script personalizzato in base ad una determinata classe presente nel body.
Potrebbe essere utile per associare uno stile differente ad ogni pagina visualizzata. Ce ne sono molti di esempi, però sta tutto alla tua immaginazione sul come adattarlo alle tue esigenze.
Introduzione
Come prima cosa mettiamo un esempio di classi presenti nel tag body:
<body class="single single-lesson postid-454 logged-in">
A prima vista possiamo capire che ci troviamo nel template di pagina singolo, che il post type è custom single-lesson, che il post ID è il 454, che è un utente loggato.
Per aggiungere classi al body, ci è di aiuto la funzione body_class (Codex WordPress: inglese) che worpdress ci mette a disposizione dalla versione 2.8.
Perché è utile usare la funzione body_class? Quali sono i Vantaggi?
Potremmo scrivere nell’header del tema le varie casistiche con un if o con uno switch ed ecco risolto il problema! Purtroppo in questo modo dovremmo sempre aprire il file header.php ed aggiungere delle clausole ad ogni nuova classe da aggiungere al body.
Utilizzando la funzione body_class invece, terremo la logica fuori dal file header.php mantenendo pulito il codice. Ok adesso che abbiamo visto queste cose
Iniziamo
Per prima cosa, prima di iniziare, dobbiamo controllare di avere nell’header del tema è questo codice
<body <?php body_class(); ?>>
altrimenti potremmo passare giorni a capire perché non funziona e la risposta è proprio li 🙂 Ora vediamo l’esempio base di come utilizzare l’action body_class per passare le classi al tag body
## aggiungiamo la classe personalizzata
add_action( 'body_class', 'my_custom_class');
function my_custom_class( $classes ) {
$classes[] = 'my-custom-class';
return $classes;
}
Questa funzione, che dobbiamo inserire nel functions.php del tema, inserirà la classe my-custom-class a tutte le pagine del sito
Come possiamo personalizzare la funzione?
La funzione utilizzata sopra la possiamo personalizzare a nostro piacimento utilizzando ad esempio i Tag Condizionali di WordPress . Ecco alcuni esempi di utilizzo avanzato.
Aggiungiamo la classe alla pagina con lo slug “mia-pagina”
## aggiungiamo la classe personalizzata in base alla pagina vista
add_action( 'body_class', 'my_custom_class');
function my_custom_class( $classes ) {
if ( is_page( 'mia-pagina' ))
$classes[] = 'my-custom-class';
return $classes;
}
Ecco che, in questo esempio, visualizzeremo la classe solamente se visiteremo la pagina mia-pagina Aggiungiamo la classe alla pagina con lo slug “mia-pagina” oppure alla pagina con ID 10 oppure alla pagina con il titolo “titolo mia pagina”
## aggiungiamo la classe personalizzata in base alla pagina vista
add_action( 'body_class', 'my_custom_class');
function my_custom_class( $classes ) {
if ( is_page( 'mia-pagina' ) || is_page(10) || is_page('titolo mia pagina'))
$classes[] = 'my-custom-class';
return $classes;
}
Ecco che in questo esempio un pochino più avanzato del precedente, visualizzeremo il tag solo se la pagina ha lo slug mia-pagina o ha l’ID 10 oppure ha il titolo titolo mia pagina.
Suggerimento: al seguente link troverete le possibilità di utilizzo del Tag condizionale is_page()
Aggiungiamo la classe alla categoria “mia-categoria”
## aggiungiamo la classe personalizzata in base alla categoria
add_action( 'body_class', 'my_custom_class');
function my_custom_class( $classes ) {
if ( is_category( 'mia-categoria' ))
$classes[] = 'my-custom-class';
return $classes;
}
In questo esempio visualizzeremo la classe solamente se visitiamo la categoria mia-categoria.
Suggerimento: come per l’esempio visto prima (is_page()), possiamo unire più condizioni per is_category. Possiamo vedere le varie possibilità al seguente link Tag condizionale is_category()
Aggiungiamo la classe al custom post_type “mio-cpt”
## aggiungiamo la classe personalizzata in base al custom post type
add_action( 'body_class', 'my_custom_class');
function my_custom_class( $classes ) {
global $post;
if ( $post->post_type == 'mio-cpt')
$classes[] = 'my-custom-class';
return $classes;
}
Come possiamo vedere dagli esempi, le possibilità di utilizzo sono moltissime. Possiamo sbizzarrirci come vogliamo come sempre, basta avere inventiva. Quindi date il via al vostro estro artistico
Dettagli
Livello: medio
Compatibilità: testato su WP versione 3.9.1
Ciao ,
scusa io devo inserire il codice di monitoraggio delle conversioni di adwords nella pagina mia di wordpress, ma non trovo nel codice html il tag body.
come faccio a trovarlo?
Ciao Maurizio,
su quali file stai lavorando? Il file da verificare è header.php all’interno del tema wordpress. In quel file accertati che sia presente nel tag body questa classe body_class(); all’interno dei tag di apertura e chiusura di php. (<body <?php body_class(); ?>>)
Una volta accertato che la classe sia presente puoi aprire il file functions.php sempre nella cartella del tema wordpress e aggiungere il codice che trovi nell’articolo.
Fammi sapere se hai bisogno di altro aiuto! 🙂
Ciao, ho provato a utilizzare il tuo codice per poter mettere una classe ad il titolo di una pagina, non al link nel menù, ma al titolo interno che appare sulla pagina.
Il bodyclass iniziale che dici di controllare se ce io ce lo, ma inserendo il codice non mi appare nulla….sai come posso risolvere? ti metto anche il codice dove l’ho inserita
<body >
<?php
Grazie mille in anticipo
Ciao