WordPress Body Class 101 Tips og triks for tema designere

Gjennom vår erfaring med å bruke WordPress, har vi funnet ut at tema designere ofte tenker over en viss funksjonalitet. De leter etter sprø WordPress-filtre og kroker for å utføre en oppgave når alt de trenger er noen enkle CSS. WordPress som standard genererer mange CSS-klasser. (WordPress CSS Cheat Sheet). Et av disse CSS-klassene er blant annet kroppsklassens stiler. I denne artikkelen vil vi forklare WordPress kroppsklasse 101 sammen med å dele noen nyttige tips og triks for begynnende tema designere.

Hva er WordPress Body Class?

Body Class (body_class) er en WordPress-funksjon som gir kroppselementet forskjellige klasser, så temaforfattere kan stillegge sine nettsteder effektivt med CSS. HTML body tag er til stede i det meste din header.php fil som laster på hver side. Når du koder et tema, kan du legge til body_class-funksjonen til kroppsdelementet ditt slik:

Ved å legge til dette lille elementet, gir du deg fleksibiliteten til enkelt å endre utseendet på hver side ved hjelp av CSS. Avhengig av hvilken type side som lastes inn, legger WordPress automatisk til riktig klasse. Hvis du for eksempel er på en arkivside, legger WordPress automatisk arkivklasse til kroppselementet hvis du velger å bruke det. Det gjør det for omtrent hver side. Her er noen eksempler på vanlige klasser som WordPress kan legge til:

 .rtl  .home  .blog  .archive  .date  .search  .paged  .attachment  .error404  .single postid- (id)  ​​.attachmentid-  .attachment- (mime-type)  .author  .author- (user_nicename)  .kategori  .kategori- (slug)  .tag  .tag- (slug)  .page -parent  .page-child parent-pageid- (id)  ​​.page-template side-template- (malfilnavn)  .search-results  .search-no-results  .logget  .paged- (sidetall)  .single-paged- (sidetall)  .page-paged- (sidetall)  .category-paged- (sidetall)  .tag-paged- sidetall)  .date-paged- (sidetall)  .author-paged- (sidetall)  .search-paged- (sidetall)  

Som du kan se, ved å ha en så kraftig ressurs for hånden, kan du helt tilpasse WordPress-siden ved å bruke bare CSS. Du kan tilpasse spesifikke forfatterprofil sider, datobaserte arkiver etc. Så hvordan og når vil du bruke dette?

Slik bruker du WordPress Body Class

I de fleste tilfeller er WordPress kroppsklasse den enkle løsningen som tema designere ofte ignorerer. Ja, dette inkluderer oss også. For omtrent et år siden måtte vi style et WordPress menyelement som bare var på en bestemt side. Vi bestemte oss for å grave dypt for å finne et filter for å legge til en spesiell navigasjonsklasse i menyelementene som ville bli lagt til ved bruk av betinget utsagn. Hvis det for eksempel er en enkelt side, legger du til klassen "Blogg" i menyelementene. Etter å ha brukt hele tiden på å finne ut alt det og skrive et innlegg om det, påpekte en av våre brukere at vi kunne ha gjort det lett med eksisterende kroppsklasse slik:

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

Legg merke til: hvordan den bruker den enkle kroppsklassen som legges til i alle enkelt innleggssider.

Gutt følte vi ikke dum etter det. Helt siden da har vi gjort et notat for å se om ting kan gjøres med kroppsklassen først før du graver dypere.

Å gi deg et annet eksempel. Når en bruker nådd oss, ber om en måte å endre logo-bildet på deres nettside basert på kategorisiden. De fleste temaer, inkludert hans, var å laste inn logoen ved hjelp av en CSS (#header .logo). Vi foreslo hva med å bruke .category-slug body class for å endre sin logo slik:

 .kategori-råd #header .logo bakgrunn: url (images / logo-advice.png) no-repeat! viktig; .kategori-helse #header .logo bakgrunn: url (images / logo-health.png) no- gjenta! viktig; 

Denne nye tema designer hadde det samme ah-hah øyeblikket vi hadde. Forhåpentligvis nå får du en henger av hvordan du kan bruke kroppsklasse i temaet design. Men vent, dette blir enda sterkere fordi det er en måte for deg å legge til egendefinerte kroppsklasser ved hjelp av et filter. La oss ta en titt på hvordan du gjør det.

Slik legger du til tilpassede kroppsklasser

WordPress har et filter som du kan bruke til å legge til tilpassede kroppsklasser når det er nødvendig. Vi vil vise deg hvordan du legger til en kroppsklasse ved hjelp av filteret før du viser deg det spesifikke brukssaken, slik at alle kan være på samme side.

Fordi kroppsklasser er temaspesifikke, må du skrive en egendefinert funksjon i din functions.php-fil slik:

 funksjon my_class_names ($ classes) // legg til 'klassenavn' til $ klassene array $ classes [] = 'test-class-name'; // returnere $ klassene array retur $ klasser;  // Nå legg testklassen til filteret add_filter ('body_class', 'my_class_names'); 

Ovennevnte kode vil legge til et klasse "testklasse-navn" til kroppsmerket på hver side på nettstedet ditt. Det er ikke så ille riktig? Den virkelige kraften til denne funksjonen er i de betingede kodene. Du kan si legge til XYZ klasse bare på enkeltsider etc. La oss ta dette eksemplet og bruke det til ekte bruksscenario.

Legg til kategori klasse til enkelt innleggssider

La oss si at du vil tilpasse de enkelte innleggssidene til hver kategori. Avhengig av type tilpasning, kan du bruke kroppsklasser for det. For å holde ting enkelt, kan vi si at du vil endre bakgrunnsfargen på siden basert på kategorien enkeltmeldinger. Du kan gjøre det ved å legge til kategoriklasser i dine enkelt innleggssider. Lim inn følgende funksjon i temaets funksjoner.php-fil:

 // legg til kategori nicenames i kroppsklassefunksjon category_id_class ($ classes) global $ post; foreach ((get_the_category ($ post-> ID)) som $ kategori) $ classes [] = $ category-> category_nicename; returner $ klasser;  add_filter ('body_class', 'category_id_class'); 

Koden ovenfor vil legge til kategoriklassen i din kroppsklasse for enkelt innleggssider. Du kan da bruke css klasser å style det som du ønsker.

Legg til Side Slug i Body Class av WordPress Themes

Lim inn følgende kode i temaets funksjoner.php-fil:

 // Side Slug Body Class funksjon add_slug_body_class ($ klasser) global $ post; hvis (isset ($ post)) $ classes [] = $ post-> post_type. '-'. $ Post-> POST_NAME;  returner $ klasser;  add_filter ('body_class', 'add_slug_body_class'); 

Les vår artikkel på side slug i kroppsklasse som vil forklare hvorfor vi trengte dette.

Nettleserdeteksjon og nettlesersspesifikke kroppsklasser

Noen ganger kan det hende du må ha spesielle CSS-stiler for alt å virke rett i bestemte nettlesere (HINT: Internet Explorer). Vel Nathan Rice foreslo en veldig kul løsning som legger til nettleserspesifikke klasser til kroppsklasse basert på nettleseren brukeren besøker siden fra.

Alt du trenger å gjøre er å lime inn følgende kode i din functions.php-fil:

Du kan da bruke klasser som:

.dvs. navigering noe gjenstander går her

Hvis det er et lite utfyllings- eller marginproblem, er dette en ganske rask måte å fikse på.

Flere bruk sager:

Vi kan sannsynligvis oppgi mange flere bruksområder, men vi vil ikke ellers denne artikkelen kommer ut av hånden. Hele poenget med det var å hjelpe nye temautviklere å forstå grunnleggende om WordPress kroppsklasse og det er fordeler. Brukstilfeller er begrenset til fantasien din. Vi har sett kommersielle temautviklere (Genesis) bruk kroppsklasser for å tilby ulike layoutalternativer. For eksempel Fullsidelayout, Sidebarinnhold, Innhold Sidebar etc. Ved å gjøre det kan brukeren enkelt bytte layoutet til siden uten å bekymre seg for utseendet, fordi det allerede er tatt vare på med CSS.0

Vi har sett noen utviklere legge til HTTP-forespørsler for å laste CSS-filer for ulike fargevalg som de tilbyr. I mange tilfeller er endringene også svært små. Det er ikke noe poeng med å ha 3 stilark som lastes inn når man kan gjøre jobben. Bare bruk kroppsklasse for det.

Forhåpentligvis fant du denne artikkelen nyttig. Vi vil gjerne høre dine tanker om kroppsklasse, og hvordan du har brukt det tidligere eller planlegger å gjøre det i fremtiden.