WordPress Body Class 101 Sfaturi și trucuri pentru designeri temă

Prin experiența noastră în utilizarea WordPress, am constatat că deseori designerii de temă trec peste o anumită funcționalitate. Ei caută filtre nebunești WordPress și cârlige pentru a realiza o sarcină atunci când tot ce au nevoie este un simplu CSS. WordPress implicit generează o mulțime de clase CSS. (WordPress CSS Cheat Sheet). Una dintre aceste clase de CSS ia stilurile de clasa a corpului. În acest articol, vom explica corpul WordPress de clasă 101 împreună cu împărtășirea unor sfaturi utile și trucuri pentru designerii începători temă.

Ce este Clasa de corp WordPress?

Clasa corpului (body_class) este o funcție WordPress care oferă elementului corpului diferite clase, astfel încât autorii temelor pot să-și eticheteze site-urile în mod eficient cu CSS. Eticheta de caractere HTML este prezentă în majoritatea fișierelor header.php care se încarcă pe fiecare pagină. Când codați o temă, puteți atașa funcția body_class la elementul dvs. de corp astfel:

Prin adăugarea acestui element mic, vă dați flexibilitatea de a modifica cu ușurință aspectul fiecărei pagini utilizând CSS. În funcție de tipul de pagină încărcat, WordPress adaugă automat clasa corespunzătoare. De exemplu, dacă vă aflați într-o pagină de arhivă, WordPress va adăuga automat clasa de arhivă la elementul corpului dacă alegeți să o utilizați. Face asta doar pentru fiecare pagină. Iată câteva exemple de clase comune pe care WordPress le-ar putea adăuga:

 .(id)  ​​.attachmentid- (id) .  .  .attachment- (tip mime)  .author  .author- (user_nicename)  .category  .category- (slug)  .tag  .tag- (slug) . -parent  .page-copil părinte-paginăid- (id)  ​​.pagină-șablon șablon de pagină- (nume fișier șablon)  .search-results  .search-no-results  .logged-in  .pagină- (numărul paginii)  .sunt un paginat (numărul paginii)  .pagină-paginată (numărul paginii)  .categorie-paginată (numărul paginii)  .tag-paged- numărul paginii)  .date-paginate- (numărul paginii)  .author-paged- (numărul paginii)  .search-pagided- (numărul paginii)  

După cum puteți vedea, având o astfel de resursă puternică la îndemână, puteți personaliza în întregime pagina dvs. WordPress folosind doar CSS. Puteți personaliza anumite pagini de profil autor, arhive bazate pe date etc. Deci, cum și când ați utiliza acest lucru?

Cum se utilizează Clasa de corp WordPress

În cele mai multe cazuri, clasa de corp WordPress este soluția simplă pe care designerii temelor le ignoră adesea. Da, aceasta include și noi. Aproximativ un an în urmă, am avut nevoie pentru a stil un element de meniu WordPress care a fost doar pe o anumită pagină. Am decis să săpăm adânc pentru a găsi un filtru pentru a adăuga o clasă de navigație specială elementelor din meniu care ar fi adăugate folosind instrucțiunea condiționată. De exemplu, dacă este o singură pagină, atunci adăugați clasa "Blog" la elementele de meniu. După ce și-a petrecut tot timpul inventând totul și scriind un post despre el, unul dintre utilizatorii noștri a subliniat că am reușit să facem cu ușurință acest lucru cu clasa de corp existentă, așa cum este:

.singurul #navigație .leftmenublog div display: inline-block important;

Observați: modul în care utilizează clasa .single corp care este adăugată în toate paginile postate unice.

Băiatul nu ne-am simțit prost după aceea. Încă de atunci, am făcut o notă pentru a vedea dacă se pot face lucruri mai întâi cu clasa corpului înainte de a se sătura mai adânc.

Pentru a vă da un alt exemplu. Odată ce un utilizator ne-a contactat și ne-a cerut o modalitate de a schimba imaginea logo-ului pe site-ul său pe baza paginii categoriei. Majoritatea modelelor tematice, inclusiv lui, încărca sigla folosind un CSS (#header .logo). V-am sugerat cum sa folositi clasa corpului .category-slug pentru a-ti schimba sigla asa:

 .categorie-sfat #header .logo fundal: url (images / logo-advice.png) no-repeat! important;. repet! important; 

Acest nou designer tematic a avut același moment ah-hah pe care l-am avut. Speram ca acum sa obtineti un semn despre modul in care puteti folosi clasa de corp in design-ul temelor. Dar așteptați, acest lucru devine și mai puternic deoarece există o modalitate prin care puteți adăuga clase personalizate folosind un filtru. Să aruncăm o privire la cum să facem asta.

Cum se adaugă clase personalizate

WordPress are un filtru pe care îl puteți utiliza pentru a adăuga clase personalizate atunci când este necesar. Vă vom arăta cum să adăugați o clasă de corp folosind filtrul înainte de a vă arăta scenariul de caz specific, pentru ca toată lumea să poată fi pe aceeași pagină.

Deoarece clasele de caroserie sunt specifice temelor, va trebui să scrieți o funcție personalizată în fișierul functions.php, cum ar fi:

 funcția my_class_names ($ classes) // adăugați 'class-name' la $ classes array $ classes [] = 'test-class-name'; // returnează clasele $ triunghi retur $;  // Acum adăugați clasa de test în filtrul add_filter ('body_class', 'my_class_names'); 

Codul de mai sus va adăuga o etichetă a clasei "test-class-name" pe fiecare pagină de pe site-ul dvs. web. Nu-i așa de rău? Puterea reală a acestei funcții este în etichetele condiționate. Puteți spune că adăugați clasa XYZ numai pe pagini individuale etc. Să luăm acest exemplu și să îl aplicăm scenariului de utilizare reală.

Adăugați o categorie de categorii în pagini individuale de postare

Să presupunem că doriți să personalizați paginile single postate din fiecare categorie. În funcție de tipul de personalizare, puteți folosi clase corporale pentru aceasta. Pentru a menține lucrurile simple, vă permite să spuneți că doriți să modificați culoarea de fundal a paginii pe baza categoriei de postări unice. Puteți face acest lucru adăugând clase de categorii la vizualizările unice ale paginilor. Inserați următoarea funcție în fișierul functions.php al temei:

 // adăugați categorii nicenames în funcția de clasă corporală category_id_class ($ classes) global $ post; foreach ((get_the_category ($ post-> ID)) ca categorie $) $ classes [] = $ category-> category_nicename; returnează clase de $;  add_filter ('body_class', 'class_id_class'); 

Codul de mai sus va adăuga clasa de categorii în clasa corpului dumneavoastră pentru paginile single postate. Apoi puteți folosi clasele CSS pentru a o stiliza așa cum doriți.

Adăugați pagina Slug în clasa corpului temelor dvs. WordPress

Inserați următorul cod în fișierul functions.php al temei:

 Funcția de clasificare a funcției de pagină a lui Slug add_slug_body_class ($ classes) global $ post; dacă (isset ($ post)) $ classes [] = $ post-> post_type. "-". $ Post-> POST_NAME;  returnează clase $;  add_filter ('body_class', 'add_slug_body_class'); 

Citiți articolul nostru pe pagina slug în clasa de corp, care va explica de ce avem nevoie de acest lucru.

Detectarea navigării și clasele de caroserie specifice browserului

Uneori este posibil să aveți nevoie de stiluri CSS speciale pentru ca totul să funcționeze corect în anumite browsere (HINT: Internet Explorer). Ei bine, Nathan Rice a sugerat o soluție foarte interesantă, care adaugă clase specifice browserului pentru clasa corporală pe baza browserului pe care îl vizitează site-ul de pe site.

Tot ce trebuie să faceți este să lipiți următorul cod în fișierul functions.php:

Puteți folosi apoi clase precum:

.adică .navigație un articol merge aici

Dacă este vorba despre o problemă mică sau de marjă, aceasta este o modalitate destul de rapidă de a o fixa.

Mai multe cazuri de utilizare:

Putem lista, probabil, mai multe cazuri de utilizări, dar, altfel, acest articol nu va scăpa. Întreaga idee a fost de a ajuta noii dezvoltatori de teme să înțeleagă elementele de bază ale clasei corpului WordPress și avantajele sale. Cazurile de utilizare sunt limitate la imaginația ta. Am văzut dezvoltatorii temelor comerciale (Genesis) care folosesc clasele corpului pentru a oferi diferite opțiuni de aspect. De exemplu, aspectul paginii complete, conținutul barei laterale, bara laterală de conținut etc. Cu această ocazie, utilizatorul poate schimba cu ușurință aspectul paginii, fără a-și face griji în ceea ce privește aspectul, deoarece este deja îngrijit cu CSS.0

Am văzut unii dezvoltatori care adaugă solicitări HTTP pentru a încărca fișiere CSS pentru diferite scheme de culori pe care le oferă. În multe cazuri, schimbările sunt și ele minore. Nu are nici un rost de a fi încărcate 3 foi de stil atunci când se poate face treaba. Doar folosiți clasa corpului pentru asta.

Sperăm că ați găsit acest articol util. Am fi bucuroși să vă auzim gândurile privind Clasa de corp și cum ați folosit-o în trecut sau intenționați să faceți acest lucru în viitor.