GeoDirectory

Aggiungere una Classe Body Personalizzata in WordPress

Paolo

WordPress: Aggiungere una Classe al Body

In molti casi le classi generate automaticamente non sono sufficienti e potrebbe essere necessario aggiungere alcune classi personalizzate.

Per aggiungere classi personalizzate, utilizzeremo il filtro WordPress:

  1. body_class

Di seguito ti mostreremo degli snippet con gli esempi più richiesti.

Ma prima una breve introduzione per spiegare ai principianti di più sulle Classi Body.

Le Classi Body Personalizzate di WordPress sono qualcosa con cui prima o poi ogni sviluppatore WordPress dovrà confrontarsi.

Usare un plugin per questo sarebbe eccessivo, perché nella maggior parte dei casi bastano un paio di righe di codice.

Quindi, come si aggiungono le Classi Body Personalizzate in WordPress?

WordPress dispone sia di una funzione body_class che di un filtro body_class (hook).

La funzione body_class viene utilizzata nei temi per aggiungere i tag delle classi autogenerate da WordPress al tag body del tuo sito web.

Ecco come viene aggiunta al file header.php del tuo tema:

<body <?php body_class($class); ?>>

A seconda della pagina visitata, WordPress genererà classi specifiche.

1) Per il post predefinito "Hello World", le classi body sono:

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

2) Le classi body della pagina di esempio sono:

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

3) Le classi body delle pagine di archivio delle categorie sono:

<body class="archive category category-uncategorized category-1 logged-in admin-bar no-sidebar hfeed customize-support">

4) Le classi body della pagina di archivio degli autori sono:

<body class="archive author author-admin author-1 logged-in admin-bar no-sidebar hfeed customize-support">

5) La classe body della home page (supponendo che ne abbiate una)

<body class="home blog logged-in admin-bar no-sidebar hfeed customize-support">

I 5 esempi forniti sopra sono comuni alla maggior parte dei temi predefiniti quando l'utente amministratore è connesso.

Quando si è disconnessi, le classi saranno leggermente diverse.

Le classi in HTML vengono utilizzate per stilizzare una pagina web tramite CSS.

Copiando i seguenti snippet nel file functions.php, nel markup del vostro sito web appariranno nuove classi body personalizzate.

Utilizzeremo il filtro body_class.

Aggiungere una classe body personalizzata in WordPress

function my_custom_body_class($classes) {<br />
// add 'my-class' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class');

Questo aggiungerà la nuova classe: "my-class" al tag body di tutte le pagine del vostro sito web.

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class customize-support">

E se avessi bisogno di aggiungere più di 1 classe?

Aggiungere 2 o più classi body personalizzate in WordPress

function my_custom_body_classes($classes) {<br />
// add 'my-class' and 'my-class-2' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
$classes[] = 'my-class-2';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom classes via body_class filter<br />
add_filter('body_class','my_custom_body_classes');

Questo sarà il risultato:

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class my-class-2 customize-support">

E se volessi aggiungere una classe body solo su una pagina specifica in cui voglio inserire uno stile personalizzato tramite CSS?

Aggiungere una classe body personalizzata in WordPress a una pagina specifica

Questo può essere fatto in diversi modi:

1) Aggiungere una classe body personalizzata usando l'ID della pagina

function my_custom_body_class_id($classes) {<br />
// add 'my-class' only to page with ID 1.<br />
if ( is_page( '1' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_id');

Questo sarà il risultato sulla pagina con id 2, mentre tutte le altre pagine non avranno la classe personalizzata.

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar my-class customize-support">

2) Aggiungere una classe body personalizzata usando lo slug della pagina

function my_custom_body_class_slug($classes) {<br />
// add 'my-class' only to page with slug contact-form.<br />
if ( is_page( 'contact-form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_slug');

Questo aggiungerà la classe personalizzata "my-class" sulla pagina con lo slug contact-form, mentre tutte le altre pagine non avranno la classe personalizzata.

3) Aggiungere una classe body personalizzata usando il titolo della pagina

function my_custom_body_class_title($classes) {<br />
// add 'my-class' only to page with title Contact Form.<br />
if ( is_page( 'Contact Form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_title');

Questo aggiungerà la classe personalizzata "my-class" sulla pagina con il titolo Contact Form, mentre tutte le altre pagine non avranno la classe personalizzata.

4) Aggiungere una classe body personalizzata usando il template della pagina

function my_custom_body_class_template($classes) {<br />
// add 'my-class' only to pages using my custom template.<br />
if ( is_page_template( 'my-custom-page-template' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_template');

Questo aggiungerà la classe personalizzata "my-class" sulla pagina che utilizza il template my-custom-page-template. Tutte le altre pagine non avranno la classe personalizzata.

Possiamo anche aggiungere la classe personalizzata a una pagina di categoria o tag, sia tramite ID che tramite slug di categoria/tag.

Aggiungere una classe body personalizzata in WordPress all'archivio di una categoria o tag

1) Categorie

function my_custom_body_class_category($classes) {<br />
// add 'my-class' only to the my-category archive.<br />
if ( is_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_category');

2) Tag

function my_custom_body_class_tag($classes) {<br />
// add 'my-class' only to the my-tag archive.<br />
if ( is_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_tag');

Questo aggiungerà la classe body personalizzata solo nella pagina di archivio della categoria my-category e del tag my-tag.

Possiamo anche aggiungere una classe body personalizzata alla pagina singola di ogni post nella categoria my-category o con il tag my-tag.

Utilizzeremo le funzioni in_catgeory e has_tag.

1) Categorie (sia pagina di archivio che pagina singola)

function my_custom_body_class_in_category($classes) {<br />
// add 'my-class' to the my-category archive and single posts of the category.<br />
if ( in_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_in_category');

2) Tag (sia pagina di archivio che pagina singola)

function my_custom_body_class_has_tag($classes) {<br />
// add 'my-class' to the my-tag archive and single posts with that tag.<br />
if ( has_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_has_tag');

Questi ultimi 2 esempi aggiungeranno la classe personalizzata sia nella pagina di archivio che nella pagina singola.

Aggiungere il nome della categoria come classe body personalizzata in WordPress per ogni post

Se desiderate aggiungere il nome descrittivo della categoria come classe body personalizzata a ogni post, avrete bisogno del seguente snippet: 

function my_custom_body_class_category_in_single($classes) {<br />
     if (is_single() || is_category()) {<br />
       global $post;<br />
       foreach((get_the_category($post->ID)) as $category) {<br />
         $classes[] = $category->category_nicename;<br />
       }<br />
     }<br />
     return $classes;<br />
   }<br />
add_filter('body_class','my_custom_body_class_category_in_single');

Ad esempio, se state visitando un post della categoria "Travel", lo snippet sopra aggiungerà la classe body Travel in modo che possiate stilizzare i post di ogni categoria in modo diverso.

Aggiungere una classe body personalizzata in WordPress quando si visita da un dispositivo mobile

Possiamo farlo facilmente utilizzando la wp_is_mobile funzione. 

function my_custom_body_class_mobile( $classes ) {<br />
    if ( wp_is_mobile() ) {<br />
        $classes[] = 'mobile';<br />
    }<br />
    return $classes;<br />
}<br />
add_filter( 'body_class', 'my_custom_body_class_mobile' );

Le classi body personalizzate possono essere aggiunte anche a 1 o tutte le pagine create da un plugin (a seconda del plugin).

GeoDirectory

GeoDirectory aggiunge le proprie classi body personalizzate. Ogni pagina di GeoDirectory, ad esempio, avrà la classe body: geodir-page.

Se il componente aggiuntivo per la ricerca avanzata e/o per i tipi di post personalizzati è installato, le classi: geodir_advance_search e geodir_custom_posts verranno aggiunte rispettivamente.

Esempio di una pagina Home GD:

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

Nelle pagine degli annunci (custom post type o archivio di categoria) troverai una classe diversa per ogni Custom Post Type.

Ad esempio in Places, ci sarà post-type-archive-gd_place.

Nella pagina dei dettagli dell'annuncio troverai anche una classe diversa per ogni Custom Post Type utilizzato, ad esempio in Places ci sarà: single-gd_place.

Tuttavia, ci possono essere situazioni in cui sono necessarie altre classi body personalizzate. Vediamo alcuni esempi:

1) Aggiungere una classe body personalizzata alla pagina della località

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_location_custom_body_class');</p>
<p>function gd_location_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('location')) {<br />
$classes[] = 'gd-location';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

lo stesso tag condizionale 

geodir_is_page()
può essere utilizzato per qualsiasi pagina gd, ad esempio per la pagina di anteprima:

2) Aggiungere una classe body personalizzata alla pagina di anteprima dell'annuncio

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_preview_custom_body_class');</p>
<p>function gd_preview_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('preview')) {<br />
$classes[] = 'gd-preview';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

3) Aggiungere una classe body personalizzata nella pagina di dettaglio per diversi pacchetti di prezzi

 // add extra custom class via body_class filter<br />
add_filter('body_class','gd_price_custom_body_class');<br />
function gd_price_custom_body_class($classes) {<br />
global $post;<br />
if ( $post->package_id == 1) {<br />
$classes[] = 'price-1';<br />
}<br />
elseif ( $post->package_id == 2) {<br />
$classes[] = 'price-2';<br />
}<br />
else {}<br />
// return the modified $classes array<br />
return $classes;<br />
}

4) Aggiungere una classe body personalizzata nella pagina di ricerca per diversi CPT cercati

add_filter('body_class','gd_search_cpt_custom_body_class');</p>
<p>function gd_search_cpt_custom_body_class($classes) {<br />
if (isset($_GET['stype']) == 'gd_place') {<br />
$classes[] = 'search_gd_place';<br />
}<br />
return $classes;<br />
}

WooCommerce

1) Aggiungere una classe body personalizzata a tutte le pagine WooCommerce

function my_custom_body_class_woo($classes) {<br />
// add 'my-class' to all woocom pages.<br />
if ( is_woocommerce() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo');

2) Aggiungere una classe body personalizzata solo alla pagina del Negozio

function my_custom_body_class_woo_shop($classes) {<br />
// add 'my-class' only to the shop page.<br />
if ( is_shop() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_shop');

3) Aggiungere una classe body personalizzata alla pagina della Categoria Prodotto

function my_custom_body_class_woo_cat($classes) {<br />
// add 'my-class' only to the product category archives.<br />
if ( is_product_category() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat');

4) Aggiungere una classe body personalizzata a una specifica pagina di Categoria Prodotto

function my_custom_body_class_woo_cat_a($classes) {<br />
// add 'my-class' only to a specific product category archive.<br />
if ( is_product_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat_a');

5) Aggiungere una classe body personalizzata alla pagina del Prodotto

function my_custom_body_class_woo_prod($classes) {<br />
// add 'my-class' to product pages.<br />
if ( is_product() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod');

6) Aggiungere una classe body personalizzata a una specifica pagina di Prodotto

function my_custom_body_class_woo_prod_a($classes) {<br />
// add 'my-class' only to the my-product single page.<br />
if ( is_product( 'my-product' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod_a');

Esistono molti altri tag condizionali di WooCommerce, come

Puoi trovarli tutti qui: https://docs.woothemes.com/document/conditional-tags/

Aggiungere classi body WordPress personalizzate alle pagine generate da altri plugin

Lo stesso può essere fatto per qualsiasi plugin che offra tag condizionali.

Ad esempio, puoi trovare i tag condizionali di bbPress qui: https://codex.bbpress.org/bbpress-conditional-tags/

un esempio?

1) Per aggiungere un tag body personalizzato a tutte le pagine di bbPress avrai bisogno di questo:

function my_custom_body_class_bbpress($classes) {<br />
// add 'my-class' only to bbpress page.<br />
if ( is_bbpress() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_bbpress');

Troverai tag condizionali anche per BuddyPress e per la maggior parte dei migliori plugin disponibili.

Rimozione delle classi Body

Così come puoi aggiungere qualcosa tramite i filtri, puoi anche rimuoverlo:

function remove_body_class( $classes ) {</p>
<p>foreach ( $classes as $key =&amp;amp;gt; $value ) {<br />
if ( $value == 'my-class' ) unset( $classes[ $key ] );<br />
}</p>
<p>return $classes;</p>
<p>}<br />
add_filter( 'body_class', 'remove_body_class' );

Hai difficoltà ad aggiungere o rimuovere classi body dal tuo sito WordPress? Chiedi un esempio specifico nei commenti qui sotto e farò del mio meglio per fornirtelo!