WordPress Body Class 101 Tips och tricks för temat designers

Genom vår erfarenhet av att använda WordPress har vi funnit att temat designers ofta tänker på en viss funktionalitet. De letar efter galna WordPress-filter och krokar för att uppnå en uppgift när allt de behöver är en enkel CSS. WordPress som standard genererar många CSS-klasser. (WordPress CSS Cheat Sheet). Ett av dessa CSS-klasser är ia kroppsklassstilarna. I den här artikeln kommer vi att förklara WordPress-klassen 101 tillsammans med att dela några användbara tips och tricks för början temat designers.

Vad är WordPress Body Class?

Body Class (body_class) är en WordPress-funktion som ger kroppselementet olika klasser, så temaförfattare kan utforma sina webbplatser effektivt med CSS. HTML-koden är närvarande i mestadels din header.php-fil som laddar på varje sida. När du kodar ett tema kan du fästa body_class-funktionen till ditt kroppselement som så:

Genom att lägga till det här lilla elementet ger du dig själv flexibiliteten att enkelt ändra utseendet på varje sida med hjälp av CSS. Beroende på vilken typ av sida som laddas lägger WordPress automatiskt till den lämpliga klassen. Om du till exempel är på en arkivsida, lägger WordPress automatiskt arkivklassen till kroppsdelen om du väljer att använda den. Det gör det för nästan varje sida. Här är några exempel på gemensamma klasser som WordPress kan lägga till:

 .rtl  .home  .blog  .archive  .date  .search  .paged  .attachment  .error404  .single postid- (id)  ​​.attachmentid- (id)  .attachment- (mime-typ)  .author  .author- (user_nicename)  .category  .category- (slug)  .tag  .tag- (slug)  .page -parent  .sida-barn parent-pageid- (id)  ​​.sida-mall sida-mall- (mallfilnamn)  .search-results  .search-no-results  .loggad  .paged- (sidnummer)  .single-paged- (sidnummer)  .page-paged- (sidnummer)  .category-paged- (sidnummer)  .tag-paged- ( sidnummer)  .date-paged- (sidnummer)  .author-paged- (sidnummer)  .search-paged- (sidnummer)  

Som du kan se, genom att ha en så kraftfull resurs till hands, kan du helt enkelt anpassa din WordPress-sida med bara CSS. Du kan anpassa specifika författarprofilsidor, datumbaserade arkiv etc. Så hur och när skulle du använda det här?

Hur man använder WordPress Body Class

I de flesta fall är WordPress-klassen den enkla lösningen som temadesigners ofta ignorerar. Ja, det här inkluderar oss också. För ungefär ett år sedan behövde vi ställa in ett WordPress menyalternativ som endast var på en viss sida. Vi bestämde oss för att gräva djupt för att hitta ett filter för att lägga till en särskild navigeringsklass i menyalternativen som skulle läggas till med villkorligt uttalande. Om det till exempel är en enda sida, lägg sedan till klassen "Blog" i menyalternativen. Efter att ha spenderat hela tiden på att ta reda på allt och skriva ett inlägg om det, påpekade en av våra användare att vi lätt kunde gjort det med befintlig kroppsklass som:

.singel #navigation .leftmenublog div display: inline-block! viktigt;

Observera: hur det använder den enda kroppsklassen som läggs till på alla enskilda inläggssidor.

Pojke kände vi inte dumma efter det. Helt sedan dess har vi noterat för att se om saker kan göras med kroppsklassen först innan de gräver djupare.

För att ge dig ett annat exempel. När en användare kontaktade oss ber om ett sätt att ändra logotypen på deras hemsida baserat på kategorisidan. De flesta tematyper, inklusive hans, lade in logotypen med hjälp av en CSS (#header .logo). Vi föreslog hur med att använda .category-slug body class för att ändra sin logotyp som så:

 .kategori-råd #header .logo bakgrund: url (images / logo-advice.png) no-repeat! important; .kategori-hälsa #header .logo background: url (images / logo-health.png) no- upprepa! viktigt; 

Den här nya temdesignern hade samma ah-hah-ögonblick som vi hade. Förhoppningsvis nu får du en hänga av hur du kan använda kroppsklass i dina tematyper. Men vänta, det blir ännu kraftigare eftersom det finns ett sätt för dig att lägga till egna kroppsklasser med hjälp av ett filter. Låt oss ta en titt på hur man gör det.

Så här lägger du till anpassade kroppsklasser

WordPress har ett filter som du kan använda för att lägga till egna kroppsklasser vid behov. Vi kommer att visa dig hur du lägger till en kroppsklass med hjälp av filtret innan du visar det specifika användningsscenariot så att alla kan vara på samma sida.

Eftersom kroppsklasser är temspecifika, skulle du behöva skriva en anpassad funktion i din functions.php-fil som så:

 funktion my_class_names ($ classes) // lägg till 'klassnamn' i $ klasserna array $ classes [] = 'test-class-name'; // returnera $ klasserna array return $ classes;  // Lägg nu provklass till filter add_filter ('body_class', 'my_class_names'); 

Ovanstående kod lägger till en klass "test-klass-namn" till kroppslabeln på varje sida på din webbplats. Det är inte så illa rätt? Den verkliga effekten av denna funktion finns i de villkorliga taggarna. Du kan säga att du bara lägger till XYZ-klass på enstaka sidor etc. Låt oss ta detta exempel och tillämpa det i realt användarfallsscenario.

Lägg till kategori klass till enskilda inläggssidor

Låt oss säga att du vill anpassa de enskilda inläggssidorna i varje kategori. Beroende på vilken typ av anpassning du kan använda kroppsklasser för den. För att hålla sakerna enkla kan vi säga att du vill ändra bakgrundsfärgen på sidan baserat på kategorin enskilda inlägg. Du kan göra det genom att lägga till kategoriklasser i dina enskilda inläggssidor. Klistra in följande funktion i ditt temas funktioner.php-fil:

 // lägg till kategori nicenames i kroppsklassfunktion category_id_class ($ classes) global $ post; foreach ((get_the_category ($ post-> ID)) som $ kategori) $ klasser [] = $ kategori-> category_nicename; returnera $ klasser;  add_filter ('body_class', 'category_id_class'); 

Koden ovan kommer att lägga till kategoriklassen i din kroppsklass för enskilda inläggssidor. Du kan sedan använda css klasser för att stile det som du vill.

Lägg till sidovägg i kroppsklass av dina WordPress-teman

Klistra in följande kod i ditt temas funktioner.php-fil:

 // Page Slug Body Class funktion add_slug_body_class ($ klasser) global $ post; om (isset ($ post)) $ classes [] = $ post-> post_type. '-'. $ Post-> POST_NAME;  returnera $ klasser;  add_filter ('body_class', 'add_slug_body_class'); 

Läs vår artikel om sidoslag i kroppsklass som förklarar varför vi behövde detta.

Webbläsardetektering och webbläsarspecifika kroppsklasser

Ibland behöver du ha speciella CSS-stilar för att allt ska fungera rätt i vissa webbläsare (HINT: Internet Explorer). Tja Nathan Rice föreslog en väldigt cool lösning som lägger till webbläsarspecifika klasser till kroppsklass baserat på webbläsaren som användaren besöker webbplatsen från.

Allt du behöver göra är att klistra in följande kod i din functions.php-fil:

Du kan sedan använda klasser som:

.dvs. navigering något objekt går här

Om det är en liten padding eller marginal fråga, det här är ett ganska snabbt sätt att fixa det.

Fler användningsfall:

Vi kan förmodligen lista mycket fler användarfall, men vi kommer inte annars att den här artikeln kommer att gå ur hand. Hela meningen med det var att hjälpa nya temaproducenter att förstå grunderna i WordPress-klassen och dess fördelar. Användningsärenden är begränsade till din fantasi. Vi har sett kommersiella tematillverkare (Genesis) använder kroppsklasser för att erbjuda olika layoutalternativ. Till exempel Hel sida Layout, Sidpanelinnehåll, Innehåll Sidpanel etc. Genom att göra det kan användaren enkelt byta layout på sidan utan att oroa sig för utseendet eftersom det redan har tagits hand om med CSS.0

Vi har sett några utvecklare som lägger till HTTP-förfrågningar för att ladda CSS-filer för olika färgscheman som de erbjuder. I många fall är förändringarna också mycket små. Det är ingen mening att ha 3 stylesheets som laddas när man kan göra jobbet. Använd bara kroppsklass för det.

Förhoppningsvis fann du den här artikeln användbar. Vi skulle gärna höra dina tankar om Body Class och hur du använt det tidigare eller planerar att göra det i framtiden.