Aggiunta alla Body Class in WordPress

In questo breve tutorial, guardiamo la body class di WordPress e come possiamo manipolarla usando le chiamate API di base.

Nello specifico, copriamo l'aggiunta di classi corporee, la rimozione di classi corporee, l'aggiunta di classi corporee e alcuni casi d'uso.

La classe di corpo: cosa può essere usato per?

Il corpo la classe in WordPress è una classe o una serie di classi applicate all'elemento HTML del corpo. Questo è utile per applicare stili unici a diverse aree di un sito WordPress come corpo le classi possono essere aggiunte in modo condizionale. 

WordPress contiene un numero di classi di corpo predefinite che sono trattate in questo articolo. 

Aggiunta alla Body Class

Ci sono alcuni metodi disponibili per aggiungere nuove classi di body in WordPress. Questo tutorial coprirà l'aggiunta della classe del corpo all'interno di un tema (in genere definito in header.php) usando il body_class funzione e aggiunta di classi usando un filtro.

Modifica del tema: passaggio di un valore di classe corporea

Questo è un modo molto semplice per aggiungere classi del corpo ed è particolarmente utile se si sta creando un tema. La classe del corpo è normalmente inclusa in un tema usando il seguente codice:

>

Per aggiungere la tua classe a questo, puoi passare un argomento alla funzione, in questo modo:

>

Questo aggiungerebbe una classe corporea di la mia classe su ogni pagina del tuo sito WordPress.

Aggiunta di più classi di corpo

Ci possono essere momenti in cui vuoi aggiungere più di una classe corporea. Questo può essere ottenuto utilizzando un semplice array:

> 

Questo prende tutte le classi nell'array e le passa al body_class funzione.

Aggiunta condizionale di una classe corporea

Potresti anche voler aggiungere una classe corporale in modo condizionale. Questo è facile con qualche semplice PHP. Questo esempio utilizza il metodo condizionale di WooCommerce di is_shop () :

Nota: WooCommerce aggiunge già una classe basata su questo, quindi si noti che questo è puramente un esempio.

Che cosa sta facendo il codice precedente, sta controllando che la prima funzione restituisca true, se è vera, allora la classe body ha è-woocommerce-shop aggiunto ad esso; altrimenti, se non è vero, viene visualizzata solo la classe fisica predefinita.

Aggiunta di una classe corporea per filtro

È anche possibile utilizzare un filtro WordPress per aggiungere una classe corporea. Questo metodo mantiene il codice del tema più pulito ed è particolarmente utile se si desidera aggiungere una classe del corpo da un plugin. Questo codice può andare nei tuoi temi functions.php o all'interno del tuo plugin.

add_filter ('body_class', 'my_body_classes'); function my_body_classes ($ classes) $ classes [] = 'nome-classe'; restituire $ classi; 

Questo aggiunge una classe (o classi, a seconda dell'implementazione) all'array e le restituisce.

Aggiunta di più classi di corpo per filtro

Per aggiungere più classi al filtro, aggiungi un'altra riga che aggiunge un altro valore alla matrice:

add_filter ('body_class', 'my_body_classes'); function my_body_classes ($ classes) $ classes [] = 'nome-classe'; $ classes [] = 'class-name-two'; restituire $ classi; 

Aggiunta condizionale di una classe corporea per filtro

Le condizioni possono anche essere utilizzate in un filtro. Prendendo lo stesso esempio che abbiamo usato in precedenza, possiamo ottenere lo stesso effetto:

add_filter ('body_class', 'my_body_classes'); function my_body_classes ($ classes) if (is_shop ()) $ classes [] = 'nome-classe'; $ classes [] = 'class-name-two';  return $ classes; 

Aggiunta di una classe di corpo basata sul modello di pagina

Per impostazione predefinita, WordPress aggiunge una classe fisica per il modello di pagina, ma se sei uno sviluppatore front-end e hai convenzioni di denominazione per il tuo CSS, potresti voler cambiare questo. 

Ad esempio, un modello di pagina chiamato "halfhalf" avrebbe una classe body di Pagina-template-page-halfhalf-php - non buono.

Quindi aggiungiamo una nuova classe, utilizzando un filtro e un tag condizionale WordPress:

add_filter ('body_class', 'halfhalf_body_class'); function halfhalf_body_class ($ classes) if (is_page_template ('page-halfhalf.php')) $ classes [] = 'halfhalf-page';  return $ classes; 

Questo aggiungerà la classe del corpo halfhalf-page se il modello di pagina è Pagina-halfhalf.php.

Rimozione di una classe di corpo

È improbabile che tu voglia rimuovere una classe del corpo, dato che non sei obbligato a usarli e loro aggiungono molto poco al tuo markup. Detto questo, è possibile farlo usando lo stesso body_class filtro.

add_filter ('body_class', 'adjust_body_class'); function adjust_body_class ($ classes) foreach ($ classes as $ key => $ value) if ($ value == 'woocommerce-page') unset ($ classes [$ key]);  return $ classes; 

Credito: questo codice è stato modificato da questo articolo.

In questo esempio stiamo eseguendo il ciclo attraverso la matrice di nomi di classi, disattivando il nome della classe woocommerce-page se esiste, e quindi restituisce le classi, meno quelle rimosse.

È tutto gente!

In questo piccolo tutorial abbiamo coperto due metodi di aggiunta alla classe del corpo di WordPress:

1. Usando il body_class funzione all'interno di un tema,
2. E usando un filtro. 

Abbiamo anche trattato di aggiungere classi di body in modo condizionale e di rimuovere le classi, nel caso aveste bisogno di fare uno sviluppo futuro.