Cum să adăugați slug-ul paginii la clasa body în WordPress

Am lucrat la o mulțime de site-uri WordPress de-a lungul anilor, iar un truc de personalizare la care revenim mereu este adăugarea slug-ului paginii la clasa body. Este un lucru atât de simplu, dar face o lume de diferență atunci când vine vorba de flexibilitatea designului.

Iată ce vrem să spunem: Probabil ați mai trecut prin asta – doriți să stilizați o singură pagină diferit de restul site-ului dvs. Fără slug-ul paginii în clasa body, ajungeți să vă luptați cu selectoare CSS complexe sau să creați foi de stil separate.

Adăugarea unui slug de pagină în tema WordPress îți permite să faci toate personalizările dorite fără nicio complicație. Poți schimba cu ușurință culorile, fonturile și alte elemente pe pagini individuale, fără a afecta restul site-ului tău.

În acest articol, vă vom arăta cum să adăugați un slug de pagină în clasa body a temelor dvs. WordPress. Am folosit această metodă pe tot, de la site-uri simple de afaceri la magazine complexe de comerț electronic.

De ce să adăugați un slug de pagină în clasa Body din tema dvs.?

Dacă doriți să personalizați pagini specifice ale site-ului dvs. și doriți să identificați corect pagina, atunci adăugarea unui slug de pagină în clasa body a temei dvs. este foarte utilă.

Implicit, site-ul dvs. WordPress va afișa doar clasele ID ale postărilor, ceea ce poate fi dificil atunci când vine vorba de recunoașterea paginii corecte. Un slug de pagină afișează URL-ul postării dvs. de pe blog, făcând mai ușoară personalizarea paginii.

Pe lângă asta, poți efectua diferite personalizări paginilor tale folosind o clasă body cu slug de pagină. De exemplu, poți schimba fontul și culorile unui anumit post sau evidenția un buton de apel la acțiune pe o pagină de destinație specifică.

Acestea fiind spuse, să vedem cum puteți adăuga slug-ul paginii în clasa body a temei dvs. WordPress.

Adăugarea unui Slug de Pagină în Tema ta WordPress

Pentru a te ajuta să adaugi URL-ul paginii tale în clasa body a temei tale WordPress, poți introduce următorul cod în fișierul functions.php al temei tale.

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' );

Poți accesa fișierele functions.php ale temei tale accesând Editorul de teme WordPress (Editor de cod). Cu toate acestea, editarea directă a fișierelor temei este foarte riscantă.

Acest lucru se datorează faptului că orice greșeală la adăugarea codului poate ruina site-ul dvs. și vă poate bloca accesul la tabloul de bord WordPress.

O modalitate mult mai simplă de a adăuga codul în clasa body a temei tale este prin utilizarea unui plugin WordPress precum WPCode. Îl folosim pe mai multe site-uri, vezi recenzia noastră completă despre WPCode pentru a afla mai multe.

Cu WPCode, puteți adăuga cu ușurință cod pe site-ul dvs. în câteva minute și fără erori. În plus, vă asigură că codul dvs. nu va fi eliminat dacă actualizați sau schimbați tema în viitor.

Vine, de asemenea, cu o bibliotecă de fragmente de cod create de experți pe care le puteți instala cu 1 clic. Deci, nu aveți nevoie de abilități de codare pentru a face personalizări avansate WordPress.

De fapt, adăugarea unui slug de pagină la clasa body este disponibilă ca un fragment predefinit în biblioteca WPCode. Aceasta este cea mai ușoară metodă de urmat.

Mai întâi, va trebui să instalați și să activați gratuitul plugin WPCode pe site-ul dvs. Pentru instrucțiuni pas cu pas, puteți consulta ghidul nostru despre cum să instalați un plugin WordPress.

Odată ce pluginul este activat, un nou element de meniu numit „Code Snippets” va fi adăugat în bara de administrare WordPress. Făcând clic pe el, veți ajunge la pagina unde veți gestiona toate fragmentele de cod.

Pentru a adăuga primul fragment de cod, faceți clic pe butonul „Adăugați nou”.

Aceasta va deschide pagina „Adăugare fragment”, unde puteți alege un fragment de cod din biblioteca predefinită.

Pur și simplu căutați fragmentul „Add the Page Slug to Body Class” și, când îl găsiți, faceți clic pe butonul „Use snippet”.

Acum, WPCode va adăuga automat codul și va seta metoda corectă de inserare.

Tot ce trebuie să faci este să comuți comutatorul din „Inactiv” în „Activ”. În cele din urmă, apasă butonul „Actualizare” din partea de sus a paginii.

Veți începe acum să vedeți o nouă clasă de corp generată astfel: page-{slug}. Folosiți acea clasă pentru a suprascrie stilurile implicite și pentru a personaliza elementele pentru pagini specifice.

De exemplu, să spunem că doriți să stilizați widgeturile din bara laterală, dar numai pe o pagină care are slug-ul „education”. În acest caz, ați putea adăuga CSS de genul acesta:

#sidebar .widgets{background: #fff; color: #000;}
.page-education #sidebar .widgets{background: #000; color: #fff;}

Pentru mai multe detalii, poți consulta ghidul nostru despre cum să adaugi CSS personalizat în WordPress.

Adăugarea codului personalizat manual

Dacă preferi să adaugi codul personalizat de mai sus manual, iată cum poți face acest lucru.

Mai întâi, navigați la pagina Fragmente de cod » Adăugare fragment din tabloul de bord WordPress.

De acolo, mergi la opțiunea „Adaugă codul tău personalizat (Fragment nou)” și apasă pe butonul „+ Adaugă fragment personalizat”.

Apoi, trebuie să selectați un tip de cod din lista de opțiuni care apar pe ecran. Pentru acest tutorial, alegeți „Fragment PHP”.

Acum, dă un titlu pentru fragmentul tău de cod, care este doar pentru referința ta și poate fi orice pentru a te ajuta să identifici codul.

După aceea, pur și simplu copiază și lipește codul de mai sus în caseta „Previzualizare cod”.

Apoi, derulați în jos la secțiunea „Inserare”. Aici, puteți alege metoda „Inserare automată” pentru a insera și executa automat codul într-o locație specifică WordPress, cum ar fi administratorul, frontend-ul și altele.

Dacă nu sunteți sigur, păstrați opțiunea implicită „Rulează peste tot”.

Sau, puteți alege metoda „Shortcode”. Cu această metodă, fragmentul nu este inserat automat. Veți obține un shortcode pe care îl puteți insera manual oriunde pe site-ul dvs.

Când sunteți gata, comutați comutatorul de la „Inactiv” la „Activ” și faceți clic pe butonul „Save Snippet” din colțul din dreapta sus.

Pentru mai multe detalii, puteți consulta ghidul nostru despre cum să adăugați cod personalizat în WordPress.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați un slug de pagină în clasa body a temei dvs. WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre clasa body WordPress și cum să alegi cel mai bun software de design.

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.