Om du är en blivande WordPress-temadesigner är det avgörande att behärska CSS för att låsa upp större kontroll, anpassning och effektivitet i ditt arbetsflöde.
Lyckligtvis lägger WordPress automatiskt till CSS-klasser som du kan använda i dina teman. Flera av dessa CSS-klasser läggs automatiskt till i <body>-avsnittet på varje sida på en WordPress-webbplats.
I den här artikeln kommer vi att förklara WordPress body class. Vi kommer också att dela med oss av tips och tricks för att använda WordPress body classes, från års erfarenhet av temautveckling, för att hjälpa dig att förbättra dina projekt.
Here is a quick overview of what you’ll learn in this article.
- Vad är WordPress Body Class?
- När du ska använda WordPress Body Class
- Hur man lägger till anpassade body-klasser
- Lägga till kroppsklass med ett WordPress-plugin
- Använda villkorliga taggar med kroppsklassen
- Andra exempel på dynamiskt tillägg av anpassade kroppsklasser
- Webbläsardetektering och webbläsarspecifika kroppsklasser
- Experthandledningar om WordPress-temadesign
Vad är WordPress Body Class?
Kroppsklass (body_class) är en WordPress-funktion som låter dig tilldela CSS-klasser till kroppselementet.
HTML-taggen body börjar normalt i en temas header.php-fil, som laddas på varje sida. Detta gör att du dynamiskt kan ta reda på vilken sida en användare tittar på och sedan lägga till CSS-klasserna därefter.
Normalt inkluderar de flesta startteman och ramverk redan body class-funktionen inuti HTML body-taggen. Men om ditt tema inte har det, kan du lägga till det genom att modifiera body-taggen så här:
<body <?php body_class($class); ?>>
Beroende på vilken typ av sida som visas lägger WordPress automatiskt till lämpliga klasser.
Till exempel, om du befinner dig på en arkivsida, kommer WordPress automatiskt att lägga till arkivklassen till body-elementet. Det gör den för nästan alla sidor.
Relaterat: Se hur WordPress fungerar bakom kulisserna (infografik).
Här är några exempel på vanliga klasser som WordPress kan lägga till, beroende på vilken sida som visas:
.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) {}
Som du kan se, genom att ha en så kraftfull resurs till hands, kan du helt anpassa din WordPress-sida genom att bara använda CSS. Du kan anpassa specifika författarprofilsidor, datum-baserade arkiv, etc.
Med det sagt, låt oss nu titta på hur och när du skulle använda body-klassen.
När du ska använda WordPress Body Class
Först måste du se till att ditt temas body-element innehåller body_class-funktionen som visas ovan. Om det gör det, kommer det automatiskt att inkludera alla WordPress-genererade CSS-klasser som nämns ovan.
Efter det kommer du också att kunna lägga till dina egna anpassade CSS-klasser till kroppselementet. Du kan lägga till dessa klasser när du behöver dem.
Om du till exempel vill ändra utseendet på artiklar av en specifik författare som är arkiverade under en specifik kategori.
Hur man lägger till anpassade body-klasser
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 vi visar dig det specifika användningsscenariot, bara så att alla är på samma sida.
Eftersom body-klasser är temaspecifika, skulle du behöva lägga till följande kod i ditt temas functions.php-fil eller i ett kodavsnitt-plugin.
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');
Ovanstående kod lägger till klassen “wpb-class” till body-taggen på varje sida på din webbplats.
Vi rekommenderar att du lägger till denna kod med WPCode, den bästa pluginen för kodavsnitt på marknaden. Det gör det säkert och enkelt att lägga till anpassad kod i WordPress utan att redigera din temas functions.php-fil.
Först måste du installera och aktivera den kostnadsfria WPCode-pluginen. Om du behöver instruktioner, se vår guide om hur man installerar en WordPress-plugin.
När pluginet är aktiverat, gå till Kodavsnitt » + Lägg till avsnitt från din WordPress-instrumentpanel.
Hitta sedan alternativet "Lägg till din anpassade kod (nytt avsnitt)" och klicka på knappen "+ Lägg till anpassat avsnitt" under det.
Därifrån måste du välja en kodtyp från listan med alternativ som visas på skärmen.
För den här handledningen, välj 'PHP Snippet'.
Lägg sedan till en titel för ditt kodavsnitt, vilket kan vara vad som helst för att hjälpa dig att komma ihåg vad koden är till för.
Klistra sedan in koden ovan i rutan "Code Preview".
Därefter växlar du helt enkelt omkopplaren från 'Inaktiv' till 'Aktiv' och klickar på knappen 'Spara avsnitt'.
Nu kan du använda denna CSS-klass direkt i din temas stilmall.
Om du arbetar på din egen webbplats kan du också lägga till CSS med funktionen för anpassad CSS i WordPress temaanpassare.
För mer information, se vår guide om hur man enkelt lägger till anpassad CSS på din WordPress-webbplats.
Lägga till kroppsklass med ett WordPress-plugin
Om du inte arbetar med ett klientprojekt och inte vill skriva kod, då skulle den här metoden vara enklare för dig.
Det första du behöver göra är att installera och aktivera pluginet Custom Body Class. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Efter aktivering måste du besöka sidan Inställningar » Anpassad kroppsklass. Härifrån kan du konfigurera plugin-inställningarna.
Du kan välja inläggstyper där du vill aktivera body class-funktionen och vem som kan komma åt den. Glöm inte att klicka på knappen 'Spara ändringar' för att lagra dina inställningar.
Sedan kan du gå vidare till att redigera ett inlägg eller en sida på din WordPress-webbplats. På skärmen för redigering av inlägg hittar du en ny metaruta i den högra kolumnen märkt 'Post Classes'.
Klicka för att lägga till dina egna CSS-klasser. Du kan lägga till flera klasser åtskilda av ett mellanslag.
När du är klar kan du helt enkelt spara eller publicera ditt inlägg. Pluginet kommer nu att lägga till dina anpassade CSS-klasser till kroppsklassen för det specifika inlägget eller sidan.
Använda villkorliga taggar med kroppsklassen
Den verkliga kraften i body_class-funktionen kommer fram när den används med de villkorliga taggarna.
Dessa villkorliga taggar är datatyper som är sanna eller falska och som kontrollerar om ett villkor är sant eller falskt i WordPress. Till exempel kontrollerar den villkorliga taggen is_home om sidan som för närvarande visas är startsidan eller inte.
Detta gör det möjligt för temautvecklare att kontrollera om ett villkor är sant eller falskt innan de lägger till en anpassad CSS-klass till body_class-funktionen.
Låt oss titta på några exempel på hur man använder villkorliga taggar för att lägga till anpassade klasser till body-klassen.
Låt oss säga att du vill styla din startsida annorlunda för inloggade användare med användarrollen för författaren. Medan WordPress automatiskt genererar en .home- och .logged-in-klass, upptäcker den inte användarrollen eller lägger till den som en klass.
Nu är detta ett scenario där du kan använda de villkorliga taggarna med lite anpassad kod för att dynamiskt lägga till en anpassad klass till body-klassen.
För att uppnå detta kommer du att lägga till följande kod i din temas functions.php-fil eller kodavsnitt-plugin.
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');
Nu ska vi titta på ett annat användbart exempel. Den här gången ska vi kontrollera om sidan som visas är en förhandsgranskning av ett WordPress-utkast.
För att göra det kommer vi att använda den villkorliga taggen is_preview och sedan lägga till vår anpassade CSS-klass.
function add_preview_class($classes) {
if ( is_preview() ) {
$classes[] = 'preview-mode';
return $classes;
}
return $classes;
}
add_filter('body_class','add_preview_class');
Nu kommer vi att lägga till följande CSS till vårt temas stilmall för att utnyttja den nya anpassade CSS-klassen vi just lade till.
.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}
Så här såg det ut på vår demosida:
Du kanske vill kolla in hela listan över villkorliga taggar som du kan använda i WordPress. Detta ger dig en praktisk uppsättning färdiga taggar för din kod.
Andra exempel på dynamiskt tillägg av anpassade kroppsklasser
Förutom villkorliga taggar kan du även använda andra tekniker för att hämta information från WordPress-databasen och skapa anpassade CSS-klasser för body-klassen.
Lägga till kategorinamn till body-klassen på en enskild inläggssida
Låt oss säga att du vill anpassa utseendet på enskilda inlägg baserat på den kategori de tillhör. Du kan använda body-klassen för att uppnå detta
Först måste du lägga till kategorinamn som CSS-klass på enskilda inläggssidor. För att göra det, lägg till följande kod i din themes functions.php-fil eller ett kodsnutt-plugin som 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');
Koden ovan lägger till kategoriklassen i din kroppsklass för enskilda inläggssidor. Du kan sedan använda CSS-klasser för att styla den som du vill.
Lägga till sidans slug till body-klassen
Klistra in följande kod i din temas functions.php-fil eller i ett kodsnutt-plugin:
//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' );
Vi rekommenderar igen att lägga till denna kod i WordPress med hjälp av ett plugin för kodavsnitt som WPCode. På så sätt behöver du inte oroa dig för att skada din webbplats.
Börja med att installera och aktivera den kostnadsfria WPCode-pluginen. Om du behöver hjälp, följ den här guiden om hur man installerar en WordPress-plugin.
När pluginet är aktiverat, gå till Kodavsnitt » Lägg till avsnitt från WordPress-instrumentpanelen.
Klicka sedan på knappen ‘Använd kodavsnitt’ under alternativet ‘Lägg till din anpassade kod (nytt kodavsnitt)’.
Välj sedan "PHP Snippet" som kodtyp.
Lägg sedan helt enkelt till en titel för ditt kodavsnitt och klistra in koden ovan i rutan 'Code Preview'.
Slutligen, växla omkopplaren från 'Inaktiv' till 'Aktiv' och klicka på knappen 'Spara avsnitt'.
Webbläsardetektering och webbläsarspecifika kroppsklasser
Ibland kan du stöta på problem där ditt tema kan behöva ytterligare CSS för en viss webbläsare.
Nu är den goda nyheten att WordPress automatiskt upptäcker webbläsaren vid laddning och sedan tillfälligt lagrar denna information som en global variabel.
Du behöver bara kontrollera om WordPress har upptäckt en specifik webbläsare och sedan lägga till den som en anpassad CSS-klass.
Kopiera och klistra helt enkelt in följande kod i din themes functions.php-fil eller kodavsnittsprogrammet:
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');
Du kan sedan använda klasser som:
.ms-edge .navigation {some item goes here}
Om det är ett litet problem med marginal eller utfyllnad, då är detta ett ganska enkelt sätt att lösa det.
Det finns definitivt många fler scenarier där användning av body_class-funktionen kan rädda dig från att skriva långa kodrader. Om du till exempel använder ett temaramverk som Genesis, kan du använda det för att lägga till anpassade klasser i ditt barn-tema.
Du kan använda funktionen body_class för att lägga till CSS-klasser för sidlayouter i full bredd, sidofältsinnehåll, rubriker och sidfötter, etc.
Experthandledningar om WordPress-temadesign
Letar du efter fler handledningar? Kolla in våra andra guider om temadesign i WordPress:
- Hur man lägger till en parallaxeffekt till vilket WordPress-tema som helst
- Hur man redigerar sidfoten i WordPress (4 sätt)
- Hur man lägger till fallande snöflingor i din WordPress-blogg
- Hur man uppdaterar ett WordPress-tema utan att förlora anpassningar
- Hur man får feedback på webbplatsdesign i WordPress
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du använder WordPress kroppsklass i dina teman. Du kanske också vill se vår artikel om hur man stylar varje WordPress-inlägg olika, och vår jämförelse av bästa WordPress sidbyggarplugins.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Mrteesurez
Tack för att du delade dessa tips och koder om WordPress body class, jag lär mig just denna klass här eftersom jag håller på med WordPress-utveckling så detta inlägg är fördelaktigt för mig att förstå mer om WordPress-klasser och funktioner.
jenny
plsss ge mig exempel på hur man överlistar en krokodil, tema plsssssssss
Corrinda
Tack efter att ha läst ett antal artiklar angående kroppsklassen, det här är den som äntligen sjönk in.
Fick det att fungera på enskilda sidor och på kategorisidor, detta är jättebra. Användningsfallen var det som gjorde skillnaden för mig.
Redaktionell personal
Sött. Glad att kunna hjälpa till.
Admin
Yolanda
Bra tips! Jag försöker lista ut hur jag lägger till menyklassen (den du kan ange i admin) till body_class:
[pre]
/** Lägg till nav-meny css-klass till body-klass */
function add_nav_menu_css( $classes ) {
$classes[] = ‘menu-class-from-admin’;
return $classes;
}
add_filter( ‘body_class’, ‘add_nav_menu_css’ );
[/pre]
Seth Burleigh
Bra tips. Jag försöker göra detta, och när jag infogar "page-template page-template-(mallfilens namn)" i min header-fil så att jag har:
<body >
Och jag modifierar sedan min CSS för att inkludera: .page-template-home_corechella
Jag har bara en helt blank sida. Ingenting. Vad gör jag fel? Tack!
Redaktionell personal
Sidmallarna läggs till på startsidan automatiskt så länge du har body_class-taggarna. Jag skulle behöva se filen för att se vad du gör fel. Använd en tredjepartstjänst som pastebin och klistra sedan in länken här.
Admin
Seth
Ok, tack så mycket!
Jag har ändrat tillvägagångssättet något sedan mitt inlägg (använder nu istället för sidmall), men ett liknande problem uppstår – korrekt kropps-CSS (body.corechella) visas inte. Den ursprungliga kroppsklassen prioriteras.
Corechella sidmall (http://dev.corebaby.org/corechella-home/) – http://pastebin.com/embed_js.php?i=8L6rhESr
Corechella header.php-fil – http://pastebin.com/embed_js.php?i=n2Sn4jUJ
CSS (den nya body-klassen finns längst ner) – http://pastebin.com/embed_js.php?i=4U6d09cQ”
Seth
Redaktionell personal
I din header.php måste du behålla body-klassen så här:
1-click Use in WordPress
I din CSS, använd bara .corchella istället för body.corchella
Michael
Bra skrivet, tack
Redaktionell personal
Glad you found it helpful
Admin
Rasha
jag har en nyhetssida som hämtar inlägg med hjälp av category.php, jag vill ge den en specifik klass så att jag kan göra innehållet brett och utan sidofältet, hur kan jag göra det?
Vajrasar
Verkligen en bra text och mycket informativ. Bara en fråga – Till exempel om jag lägger till webbläsarspecifik kroppsklass idag och efter några dagar behöver jag tillämpa sidklass i kroppssluggen. Kommer då inställningarna/CSS som jag gjorde med webbläsarspecifik kroppsklass att förstöras eller inte?
Redaktionell personal
Nej, det kommer inte att förstöras. Det kan åsidosättas beroende på hur din CSS är skriven.
Admin