Dacă sunteți un designer aspirant de teme WordPress, stăpânirea CSS este cheia pentru a debloca un control, o personalizare și o eficiență mai mare în fluxul dvs. de lucru.
Din fericire, WordPress adaugă automat clase CSS pe care le puteți utiliza în temele dvs. Mai multe dintre aceste clase CSS sunt adăugate automat la secțiunea <body> a fiecărei pagini de pe un site WordPress.
În acest articol, vom explica clasa body din WordPress. Vom împărtăși, de asemenea, sfaturi și trucuri pentru utilizarea claselor body din WordPress, din ani de experiență în dezvoltarea temelor, pentru a vă ajuta să vă îmbunătățiți proiectele.
Here is a quick overview of what you’ll learn in this article.
- Ce este clasa de corp WordPress?
- Când să folosiți clasa de corp WordPress
- Cum să adăugați clase personalizate pentru corp
- Adăugarea clasei Body folosind un plugin WordPress
- Utilizarea etichetelor condiționale cu clasa corpului
- Alte exemple de adăugare dinamică a claselor de corp personalizate
- Detectarea browserului și clasele corpului specifice browserului
- Ghiduri experte despre designul temelor WordPress
Ce este clasa de corp WordPress?
Clasa de corp (body_class) este o funcție WordPress care vă permite să atribuiți clase CSS elementului body.
Eticheta HTML body începe în mod normal în fișierul header.php al temei, care se încarcă pe fiecare pagină. Acest lucru vă permite să determinați dinamic ce pagină vizualizează un utilizator și apoi să adăugați clasele CSS în consecință.
În mod normal, majoritatea temelor de pornire și a framework-urilor includ deja funcția body class în tag-ul HTML body. Cu toate acestea, dacă tema dvs. nu o are, o puteți adăuga modificând tag-ul body astfel:
<body <?php body_class($class); ?>>
În funcție de tipul paginii afișate, WordPress adaugă automat clasele corespunzătoare.
De exemplu, dacă vă aflați pe o pagină de arhivă, WordPress va adăuga automat clasa de arhivă la elementul body. Face acest lucru pentru aproape fiecare pagină.
Conexe: Vedeți cum funcționează WordPress în culise (infografic).
Iată câteva exemple de clase comune pe care WordPress le-ar putea adăuga, în funcție de pagina afișată:
.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 {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}
După cum puteți vedea, având o resursă atât de puternică la îndemână, puteți personaliza complet pagina dvs. WordPress folosind doar CSS. Puteți personaliza pagini specifice de profil de autor, arhive bazate pe dată etc.
Acestea fiind spuse, să vedem acum cum și când ai folosi clasa body.
Când să folosiți clasa de corp WordPress
Mai întâi, trebuie să vă asigurați că elementul corp al temei dvs. conține funcția body class, așa cum este arătat mai sus. Dacă o face, atunci va include automat toate clasele CSS generate de WordPress menționate mai sus.
După aceea, veți putea, de asemenea, să adăugați propriile clase CSS personalizate la elementul body. Puteți adăuga aceste clase ori de câte ori aveți nevoie de ele.
De exemplu, dacă doriți să schimbați aspectul articolelor unui anumit autor, clasificate într-o anumită categorie.
Cum să adăugați clase personalizate pentru corp
WordPress are un filtru pe care îl poți utiliza pentru a adăuga clase personalizate pentru body atunci când este necesar. Îți vom arăta cum să adaugi o clasă pentru body folosind filtrul înainte de a-ți arăta scenariul specific de utilizare, doar pentru ca toată lumea să fie pe aceeași lungime de undă.
Deoarece clasele body sunt specifice temei, va trebui să adăugați următorul cod în fișierul functions.php al temei dvs. sau într-un plugin de fragmente de cod.
function my_class_names($classes) {
// add 'class-name' to the $classes array
$classes[] = 'wpb-class';
// return the $classes array
return $classes;
}
//Now add test class to the filter
add_filter('body_class','my_class_names');
Codul de mai sus va adăuga o clasă „wpb-class” la tag-ul body pe fiecare pagină a site-ului dvs. web.
Recomandăm adăugarea acestui cod cu WPCode, cel mai bun plugin de fragmente de cod de pe piață. Acesta face ca adăugarea de cod personalizat în WordPress să fie sigură și ușoară, fără a edita fișierul functions.php al temei dvs.
Mai întâi, trebuie să instalați și să activați pluginul gratuit WPCode. Dacă aveți nevoie de instrucțiuni, consultați ghidul nostru despre cum să instalați un plugin WordPress.
Odată ce pluginul este activat, accesați Code Snippets » + Add Snippet din tabloul de bord WordPress.
Apoi, găsiți opțiunea „Adăugați codul dvs. personalizat (Fragment nou)” și faceți clic pe butonul „+ Adăugați fragment personalizat” de sub acesta.
De acolo, trebuie să alegeți un tip de cod din lista de opțiuni care apar pe ecran.
Pentru acest tutorial, selectați „Fragment PHP”.
Apoi, adaugă un titlu pentru fragmentul tău, care poate fi orice pentru a te ajuta să-ți amintești la ce folosește codul.
Apoi, lipiți codul de mai sus în caseta „Previzualizare cod”.
După aceea, pur și simplu comutați comutatorul de la „Inactiv” la „Activ” și faceți clic pe butonul „Salvează fragmentul”.
Acum puteți utiliza această clasă CSS direct în foaia de stil a temei dvs.
Dacă lucrați la propriul site web, atunci puteți adăuga și CSS folosind funcția CSS personalizat în personalizatorul de teme WordPress.
Pentru mai multe detalii, consultați ghidul nostru despre cum să adăugați cu ușurință CSS personalizat pe site-ul dvs. WordPress.
Adăugarea clasei Body folosind un plugin WordPress
Dacă nu lucrați la un proiect pentru un client și nu doriți să scrieți cod, atunci această metodă ar fi mai ușoară pentru dvs.
Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul Custom Body Class. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum se instalează un plugin WordPress.
La activare, trebuie să vizitați pagina Setări » Clasa corpului personalizat. De aici puteți configura setările pluginului.
Puteți selecta tipurile de postări unde doriți să activați funcționalitatea clasei body și cine poate accesa aceasta. Nu uitați să faceți clic pe butonul „Salvare modificări” pentru a vă stoca setările.
Apoi, puteți accesa pentru a edita orice postare sau pagină de pe site-ul dvs. WordPress. Pe ecranul de editare a postării, veți găsi o nouă casetă meta în coloana din dreapta, etichetată „Post Classes”.
Faceți clic pentru a adăuga clasele CSS personalizate. Puteți adăuga mai multe clase separate prin spațiu.
Odată ce ați terminat, puteți pur și simplu să salvați sau să publicați postarea. Pluginul va adăuga acum clasele CSS personalizate la clasa body pentru acea postare sau pagină particulară.
Utilizarea etichetelor condiționale cu clasa corpului
Adevărata putere a funcției body_class apare atunci când este utilizată cu etichetele condiționale.
Aceste etichete condiționale sunt tipuri de date adevărat sau fals care verifică dacă o condiție este adevărată sau falsă în WordPress. De exemplu, eticheta condițională is_home verifică dacă pagina afișată în prezent este pagina de pornire sau nu.
Acest lucru permite dezvoltatorilor de teme să verifice dacă o condiție este adevărată sau falsă înainte de a adăuga o clasă CSS personalizată la funcția body_class.
Să analizăm câteva exemple de utilizare a etichetelor condiționale pentru a adăuga clase personalizate la clasa corpului.
Să spunem că doriți să stilizați pagina de pornire diferit pentru utilizatorii conectați cu rolul de utilizator utilizator. În timp ce WordPress generează automat o clasă .home și .logged-in, nu detectează rolul utilizatorului și nu îl adaugă ca o clasă.
Acum, acesta este un scenariu în care puteți utiliza etichetele condiționale cu un cod personalizat pentru a adăuga dinamic o clasă personalizată la clasa body.
Pentru a realiza acest lucru, veți adăuga următorul cod în fișierul functions.php al temei dvs. sau în pluginul de fragmente de cod.
function wpb_loggedin_user_role_class($classes) {
// let's check if it is homepage
if ( is_home() ) {
// Now let's check if the logged in user has author user role.
$user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) {
//The user has the "author" role
// Add user role to the body class
$classes[] = 'author';
// Return the classes array
return $classes;
}
} else {
// if it is not homepage, then just return default classes
return $classes;
}
}
add_filter('body_class', 'wpb_loggedin_user_role_class');
Acum, să aruncăm o privire la un alt exemplu util. De data aceasta vom verifica dacă pagina afișată este o previzualizare a unui draft WordPress.
Pentru a face acest lucru, vom folosi eticheta condițională is_preview și apoi vom adăuga clasa noastră CSS personalizată.
function add_preview_class($classes) {
if ( is_preview() ) {
$classes[] = 'preview-mode';
return $classes;
}
return $classes;
}
add_filter('body_class','add_preview_class');
Acum, vom adăuga următorul CSS la foaia de stil a temei noastre pentru a utiliza noua clasă CSS personalizată pe care tocmai am adăugat-o.
.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}
Așa arăta pe site-ul nostru demo:
Ați putea dori să consultați lista completă de taguri condiționale pe care le puteți utiliza în WordPress. Acest lucru vă va oferi un set util de taguri gata de utilizat pentru codul dvs.
Alte exemple de adăugare dinamică a claselor de corp personalizate
Pe lângă etichetele condiționale, puteți utiliza și alte tehnici pentru a prelua informații din baza de date WordPress și pentru a crea clase CSS personalizate pentru clasa corpului.
Adăugarea numelor categoriilor la clasa corpului unei pagini de postare unică
Să spunem că doriți să personalizați aspectul postărilor individuale în funcție de categoria în care sunt clasificate. Puteți utiliza clasa body pentru a realiza acest lucru
Mai întâi, trebuie să adăugați nume de categorii ca clasă CSS pe paginile postărilor individuale. Pentru a face acest lucru, adăugați următorul cod în fișierul functions.php al temei dvs. sau într-un plugin de fragmente de cod precum WPCode:
// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
add_filter('body_class', 'category_id_class');
Codul de mai sus va adăuga clasa de categorie în clasa corpului dvs. pentru paginile de postări individuale. Puteți apoi folosi clase CSS pentru a o stiliza după cum doriți.
Adăugarea slug-ului paginii la clasa body
Lipiți următorul cod în fișierul functions.php al temei dvs. sau într-un plugin de fragmente de cod:
//Page Slug Body Class
function 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' );
Din nou, recomandăm adăugarea acestui cod în WordPress folosind un plugin de fragmente de cod, cum ar fi WPCode. Astfel, nu va trebui să vă faceți griji că vă veți strica site-ul.
Începeți prin a instala și activa pluginul gratuit WPCode. Dacă aveți nevoie de ajutor, urmați acest ghid despre cum să instalați un plugin WordPress.
După activarea pluginului, accesați Code Snippets » Add Snippet din tabloul de bord WordPress.
Apoi, faceți clic pe butonul „Utilizați fragmentul” sub opțiunea „Adăugați codul dvs. personalizat (Fragment nou)”.
Apoi, selectați „Fragment PHP” ca tip de cod.
După aceea, pur și simplu adăugați un titlu pentru fragmentul dvs. de cod și lipiți codul de mai sus în caseta „Previzualizare cod”.
În cele din urmă, comutați comutatorul de la „Inactiv” la „Activ” și faceți clic pe butonul „Save Snippet”.
Detectarea browserului și clasele corpului specifice browserului
Uneori, este posibil să întâmpinați probleme în care tema dvs. necesită CSS suplimentar pentru un anumit browser.
Acum, vestea bună este că WordPress detectează automat browserul la încărcare și apoi stochează temporar aceste informații ca variabilă globală.
Trebuie doar să verificați dacă WordPress a detectat un browser specific și apoi să îl adăugați ca o clasă CSS personalizată.
Pur și simplu, copiați și lipiți următorul cod în fișierul functions.php al temei dvs. sau în pluginul de fragmente de cod:
function wpb_browser_body_class($classes) {
global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;
if ($is_iphone) $classes[] ='iphone-safari';
elseif ($is_chrome) $classes[] ='google-chrome';
elseif ($is_safari) $classes[] ='safari';
elseif ($is_NS4) $classes[] ='netscape';
elseif ($is_opera) $classes[] ='opera';
elseif ($is_macIE) $classes[] ='mac-ie';
elseif ($is_winIE) $classes[] ='windows-ie';
elseif ($is_gecko) $classes[] ='firefox';
elseif ($is_lynx) $classes[] ='lynx';
elseif ($is_IE) $classes[] ='internet-explorer';
elseif ($is_edge) $classes[] ='ms-edge';
else $classes[] = 'unknown';
return $classes;
}
add_filter('body_class','wpb_browser_body_class');
Puteți apoi folosi clase precum:
.ms-edge .navigation {some item goes here}
Dacă este o problemă minoră de spațiere sau de margine, aceasta este o modalitate destul de ușoară de a o remedia.
Există cu siguranță multe alte scenarii în care utilizarea funcției body_class vă poate salva de la scrierea unor linii lungi de cod. De exemplu, dacă utilizați un cadru de temă precum Genesis, atunci îl puteți folosi pentru a adăuga clase personalizate în tema dvs. copil.
Puteți utiliza funcția body_class pentru a adăuga clase CSS pentru layout-uri de pagină pe lățime completă, conținutul barei laterale, anteturi și subsoluri etc.
Ghiduri experte despre designul temelor WordPress
Căutați mai multe tutoriale? Consultați celelalte ghiduri ale noastre despre designul temelor în WordPress:
- Cum să adăugați un efect parallax la orice temă WordPress
- Cum să editați subsolul în WordPress (4 moduri)
- Cum să adăugați fulgi de zăpadă căzători pe blogul dvs. WordPress
- Cum să actualizați o temă WordPress fără a pierde personalizările
- Cum să obții feedback despre designul site-ului în WordPress
Sperăm că acest articol v-a ajutat să învățați cum să utilizați clasa body din WordPress în temele dvs. De asemenea, ați putea dori să consultați articolul nostru despre cum să stilizezi fiecare postare WordPress diferit și comparația noastră despre cele mai bune pluginuri de creare pagini WordPress.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Mrteesurez
Mulțumesc pentru împărtășirea acestor sfaturi și coduri despre clasa body din WordPress, tocmai învăț despre această clasă aici, deoarece mă ocup de dezvoltarea WordPress, așa că acest post îmi este benefic pentru a înțelege mai bine clasa și funcțiile WordPress.
jenny
plsss dă-mi un exemplu de temă de ieșire dintr-un crocodil plsssssssss
Corrinda
Mulțumesc, după ce am citit o serie de articole despre clasa corpului, acesta este cel care în cele din urmă a prins.
Am reușit să funcționeze pe pagini individuale și pe pagini de categorie, este grozav. Cazurile de utilizare au făcut diferența pentru mine.
Personal editorial
Excelent. Mă bucur că am putut ajuta.
Admin
Yolanda
Sfaturi grozave! Încerc să-mi dau seama cum să adaug clasa de meniu (cea pe care o poți introduce în admin) la body_class:
[pre]
/** Adaugă clasa CSS a meniului de navigare la clasa body */
function add_nav_menu_css( $classes ) {
$classes[] = ‘menu-class-from-admin’;
return $classes;
}
add_filter( ‘body_class’, ‘add_nav_menu_css’ );
[/pre]
Seth Burleigh
Sfaturi grozave. Încerc să fac asta și, la inserarea „page-template page-template-(nume fișier șablon)” în fișierul meu header, astfel încât să am:
<body >
Și apoi îmi modific CSS-ul pentru a include: .page-template-home_corechella
Am rămas cu o pagină complet goală. Nimic. Ce fac greșit? Mulțumesc!
Personal editorial
Template-urile de pagină sunt adăugate automat pe pagina principală atâta timp cât aveți etichetele body_class. Ar trebui să văd fișierul pentru a înțelege ce faceți greșit. Folosiți un serviciu terț precum pastebin și apoi postați linkul aici.
Admin
Seth
Ok, mulțumesc mult!
Am schimbat ușor abordarea de la postarea mea (acum folosesc în loc de șablon de pagină), dar apare o problemă similară – clasa CSS corectă a corpului (body.corechella) nu este afișată. Clasa de corp originală are prioritate.
Șablon pagină Corechella (http://dev.corebaby.org/corechella-home/) – http://pastebin.com/embed_js.php?i=8L6rhESr
Fișier header.php Corechella – http://pastebin.com/embed_js.php?i=n2Sn4jUJ
CSS (noua clasă body se află în partea de jos) – http://pastebin.com/embed_js.php?i=4U6d09cQ”
Seth
Personal editorial
În fișierul dvs. header.php, trebuie să păstrați clasa body astfel:
1-click Use in WordPress
În CSS-ul dvs., folosiți doar .corchella în loc de body.corchella
Michael
Scriere grozavă, mulțumesc
Personal editorial
Glad you found it helpful
Admin
Rasha
am o pagină de știri care preia postări folosind category.php, vreau să îi dau o clasă specifică pentru a putea face conținutul lat și fără bara laterală, cum pot face asta?
Vajrasar
Într-adevăr o scriere bună și foarte informativă. Doar o întrebare – De exemplu, dacă adaug Browser Specific Body Class astăzi și după câteva zile trebuie să aplic Page Class în Body Slug. Atunci setările/css-ul pe care le-am făcut cu Browser Specific Body class vor fi stricate sau nu?
Personal editorial
Nu, nu se va strica. Poate fi suprascris în funcție de cum este scris CSS-ul dvs.
Admin