WordPress Body Class 101 Consigli e trucchi per i progettisti di temi

Attraverso la nostra esperienza nell'uso di WordPress, abbiamo scoperto che spesso i progettisti di temi pensano a una certa funzionalità. Stanno cercando pazzi filtri WordPress e ganci per svolgere un compito quando tutto ciò di cui hanno bisogno è un semplice CSS. WordPress genera automaticamente molte classi CSS. (Foglio trucchi WordPress CSS). Una di queste aree delle classi CSS ia gli stili di classe del corpo. In questo articolo, spiegheremo la classe 101 di WordPress insieme a condividere alcuni suggerimenti e trucchi utili per i progettisti di temi iniziali.

Cos'è la Body Class di WordPress?

Body Class (body_class) è una funzione di WordPress che fornisce all'elemento body diverse classi, così gli autori di temi possono personalizzare i loro siti in modo efficace con i CSS. Il tag body HTML è presente principalmente nel file header.php che viene caricato su ogni pagina. Quando si codifica un tema, è possibile allegare la funzione body_class all'elemento body in questo modo:

Aggiungendo questo piccolo elemento, ti dai la flessibilità di modificare facilmente l'aspetto di ogni pagina usando i CSS. A seconda del tipo di pagina che viene caricata, WordPress aggiunge automaticamente la classe appropriata. Ad esempio, se si è su una pagina di archivio, WordPress aggiungerà automaticamente la classe di archivio all'elemento body se si sceglie di usarlo. Lo fa per quasi ogni pagina. Ecco alcuni esempi di classi comuni che WordPress potrebbe aggiungere:

 .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  .loged-in  .paged- (numero di pagina)  .single-paged- (numero di pagina)  .page-paged- (numero di pagina)  .category-paged- (numero di pagina)  .tag-paged- ( numero di pagina)  .date-paged- (numero di pagina)  .author-paged- (numero di pagina)  .search-paged- (numero di pagina)  

Come puoi vedere, avendo a portata di mano una risorsa così potente, puoi personalizzare completamente la tua pagina di WordPress usando solo i CSS. È possibile personalizzare pagine del profilo dell'autore specifiche, archivi basati sulla data, ecc. Quindi come e quando utilizzeresti questo?

Come usare WordPress Body Class

Nella maggior parte dei casi, la classe corporea di WordPress è la soluzione semplice che i progettisti di temi spesso ignorano. Sì, questo include anche noi. Circa un anno fa, avevamo bisogno di modellare una voce di menu WordPress che era solo su una pagina specifica. Abbiamo deciso di scavare in profondità per trovare un filtro per aggiungere una speciale classe di navigazione alle voci di menu che verrebbero aggiunte utilizzando un'istruzione condizionale. Ad esempio, se si tratta di una singola pagina, quindi aggiungere la classe "Blog" alle voci di menu. Dopo aver speso tutto il tempo per capire tutto questo e aver scritto un post su di esso, uno dei nostri utenti ha sottolineato che avremmo potuto farlo facilmente con la body class esistente in questo modo:

.single #navigation .leftmenublog div display: inline-block! important;

Nota: come usa la classe corporea .single che viene aggiunta in tutte le singole pagine del post.

Ragazzo, non ci sentiamo stupidi dopo quello. Da allora, abbiamo fatto una nota per vedere se le cose possono essere fatte con la classe del corpo prima di scavare più a fondo.

Per darti un altro esempio. Una volta che un utente si è avvicinato a noi chiedendo un modo per cambiare l'immagine del logo sul loro sito web in base alla pagina della categoria. La maggior parte dei disegni a tema, incluso il suo, stava caricando il logo usando un CSS (#header .logo). Abbiamo suggerito come usare la classe del corpo di .category-slug per cambiare il suo logo in questo modo:

 .category-advice #header .logo background: url (images / logo-advice.png) no-repeat! important; .category-health #header .logo background: url (images / logo-health.png) no- ripeti! importante; 

Questo nuovo designer di temi ha avuto lo stesso momento di ah-hah che abbiamo avuto. Si spera che ora tu ti stia imparando come utilizzare la body class nei tuoi temi. Ma aspetta, questo diventa ancora più potente perché c'è un modo per aggiungere classi del corpo personalizzate usando un filtro. Diamo un'occhiata a come farlo.

Come aggiungere classi di corpo personalizzate

WordPress ha un filtro che puoi utilizzare per aggiungere classi del corpo personalizzate quando necessario. Ti mostreremo come aggiungere una classe corporea usando il filtro prima di mostrarti lo scenario caso d'uso specifico in modo che tutti possano essere sulla stessa pagina.

Poiché le classi del corpo sono specifiche del tema, è necessario scrivere una funzione personalizzata nel file functions.php in questo modo:

 function my_class_names ($ classes) // aggiungi 'class-name' alla $ classes array $ classes [] = 'test-class-name'; // restituisce l'array $ classes restituisce $ classes;  // Ora aggiungi la classe di test al filtro add_filter ('body_class', 'my_class_names'); 

Il codice sopra aggiungerà una classe "nome-classe-test" al tag body su ogni pagina del tuo sito web. Non è così male, vero? Il vero potere di questa funzione è nei tag condizionali. Puoi dire aggiungere la classe XYZ solo su pagine singole, ecc. Prendiamo questo esempio e lo applichiamo allo scenario caso d'uso reale.

Aggiungi classe di categoria a pagine di singoli post

Diciamo che vuoi personalizzare le singole pagine di ogni categoria. A seconda del tipo di personalizzazione, è possibile utilizzare le classi del corpo per questo. Per semplificare le cose, diciamo che vuoi cambiare il colore di sfondo della pagina in base alla categoria dei singoli post. Puoi farlo aggiungendo classi di categorie alle tue singole visualizzazioni di post page. Incolla la seguente funzione nel file functions.php del tuo tema:

 // aggiungi i nomi di categoria nella funzione di classe body class_id_class ($ classes) global $ post; foreach ((get_the_category ($ post-> ID)) as $ category) $ classes [] = $ category-> category_nicename; restituire $ classi;  add_filter ('body_class', 'category_id_class'); 

Il codice sopra aggiungerà la classe di categoria nella tua classe corporea per le singole pagine di post. Puoi quindi utilizzare le classi CSS per modellarlo come desideri.

Aggiungi Pagina Slug in Body Class dei tuoi temi WordPress

Incolla il seguente codice nel file functions.php del tuo tema:

 // Page Slug Funzione Body Class 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'); 

Leggi il nostro articolo su slug di pagina in classe corporea che spiegherà perché ne abbiamo avuto bisogno.

Rilevamento del browser e classi specifiche del corpo del browser

A volte potrebbe essere necessario disporre di stili CSS speciali per far funzionare tutto in alcuni browser (SUGGERIMENTO: Internet Explorer). Beh, Nathan Rice ha suggerito una soluzione molto interessante che aggiunge classi specifiche del browser alla classe del corpo in base al browser da cui l'utente visita il sito.

Tutto quello che devi fare è incollare il seguente codice nel tuo file functions.php:

È quindi possibile utilizzare classi come:

.Ad esempio .navigation qualche elemento va qui

Se si tratta di un piccolo problema di padding o margine, questo è un modo abbastanza veloce per risolverlo.

Altri casi d'uso:

Probabilmente possiamo elencare molti più casi d'uso, ma non lo faremo altrimenti questo articolo sfuggirà di mano. L'obiettivo principale era aiutare i nuovi sviluppatori di temi a capire le basi della body class di WordPress e dei suoi vantaggi. I casi d'uso sono limitati alla tua immaginazione. Abbiamo visto sviluppatori di temi commerciali (Genesis) utilizzare le classi del corpo per offrire varie opzioni di layout. Ad esempio Layout di pagina completa, Contenuto della sidebar, Sidebar dei contenuti ecc. Facendo ciò, l'utente può facilmente cambiare il layout della propria pagina senza preoccuparsi dei problemi di visualizzazione perché è già stato curato con CSS.0

Abbiamo visto alcuni sviluppatori aggiungere richieste HTTP per caricare file CSS per vari schemi di colori che offrono. In molti casi, anche le modifiche sono minime. Non ha senso avere 3 fogli di stile da caricare quando si può fare il lavoro. Usa semplicemente la classe del corpo per quello.

Spero che tu abbia trovato utile questo articolo. Saremo lieti di ascoltare i tuoi pensieri su Body Class e su come lo hai usato in passato o hai intenzione di farlo in futuro.