Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress Body Class 101: Tips och tricks för temadesigners

Är du en blivande WordPress-temadesigner som letar efter new sätt att använda CSS i dina themes?

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> -sektionen på varje page på en WordPress-webbplats.

I den här artikeln kommer vi att förklara WordPress body class med tips och tricks för blivande theme designers att använda dem i sina projekt.

Using WordPress body class for theme development
Här är en snabb översikt över vad du kommer att lära dig i den här artikeln.

Vad är WordPress Body Class?

Body class (body_class) är en WordPress-funktion som tillåter dig att tilldela CSS-klasser till body-elementet.

HTML body taggen börjar normalt i ett temas header.php-fil, som hämtas på varje page. This allows you to dynamically figure out which page a user is viewing and then add the CSS classes accordingly.

Normalt sett innehåller de flesta startteman och ramverk redan body-klassfunktionen i HTML body taggen. Men om ditt theme inte har det, kan du add to det genom att ändra body tagged så här:

<body <?php body_class($class); ?>>

Beroende på vilken typ av page som visas lägger WordPress automatiskt till lämpliga klasser.

Om du till exempel befinner dig på en page archive kommer WordPress automatiskt att add to archive-klassen till body-elementet. Det gör det för nästan alla pages.

Related to: 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 page 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 customize din WordPress page genom att bara använda CSS. Du kan customize specifika författares profil pages, date-based archives, etc.

Med detta sagt, låt oss nu ta en titt på hur och när du skulle använda body-klassen.

När ska du 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 den gör det kommer den automatiskt att inkludera alla de WordPress-genererade CSS-klasser som nämns ovan.

Efter det kommer du också att kunna lägga till dina egna custom CSS-klasser till body-elementet. Du kan add to dessa klasser när du behöver dem.

Till exempel om du vill ändra appearance för artiklar av en viss författare som arkiveras under en viss kategori.

Så här addar du custom body-klasser

WordPress har ett filter som du kan använda för att add to custom body classes när det behövs. Vi kommer att visa dig hur du addar en body class med hjälp av filtret innan vi visar dig det specifika användningsscenariot så att alla kan vara på samma page.

Eftersom body classes är temaspecifika måste du add to följande kod till ditt temas functions.php-fil eller i ett code snippets 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 kommer att add a class ”wpb-class” to the body tagged on every page on your website.

Vi rekommenderar att du lägger till den här koden med WPCode, det bästa code snippets pluginet på marknaden. Det gör det säkert och enkelt att add to custom code i WordPress utan att editera functions.php-filen i your theme.

Först måste du installera och aktivera det gratis pluginet WPCode. Om du behöver instruktioner kan du läsa vår guide om hur du installerar ett plugin för WordPress.

När pluginet är aktiverat går du till Code Sn ippets Add Sn ippet från din WordPress dashboard. Hitta sedan alternativet ”Add Your Custom Code (New Snippet)” och klicka på knappen ”Use snippet” under den.

Add a new custom code snippet in WPCode

Lägg sedan till en rubrik för ditt snippet och klistra in koden ovan i boxen ”Code Preview”. Du måste också välja ”PHP Snippet” som code type från dropdown-menyn till höger.

Paste code into WPCode and select PHP snippet as code type

Därefter är det bara att toggla omkopplaren från ”Activate” till ”Inaktiverad” och klicka på knappen ”Save Snippet”.

Activate and save your custom code snippet

Nu kan du använda denna CSS-klass i ditt temas stylesheet direkt. Om du arbetar på din egen website kan du också lägga till CSS med hjälp av den utvalda CSS-funktionen i WordPress tema customizer.

Adding custom CSS in theme customizer

För mer details, se vår guide om hur du enkelt lägger till custom CSS på din WordPress site.

Lägga till Body Class med hjälp av ett plugin för WordPress

Om du ej arbetar med ett kundprojekt och inte vill skriva kod, då är den här metoden enklare för dig.

Det första du behöver göra är att installera och aktivera pluginet Custom Body Class. För mer detaljer, se vår steg-för-steg guide om hur du installerar ett WordPress plugin.

Vid aktivering måste du besöka Settings ” Custom Body Class page. Härifrån kan du konfigurera inställningar för plugin.

Custom Body Class settings

Du kan välja post typer där du vill aktivera funktionen för kroppsklass och vem som kan komma åt den. Glöm inte att klicka på knappen ”Save Changes” för att spara dina inställningar.

Därefter kan du heada över för att editera valfritt post eller page på din WordPress site. På vyn för redigering av inlägg hittar du en new metadata för inlägg i den högra colonnen med etiketten ”Post Classes”.

Adding body classes to a post in WordPress

Click för att add to dina custom CSS-klasser. Du kan add to flera klasser separerade med ett mellanslag.

När du är klar kan du helt enkelt save eller publicera din post. Pluginet kommer nu att lägga till dina custom CSS-klasser till body-klassen för det vissa inlägget eller sidan.

Använda villkorsstyrda taggar med Body-klassen

Den verkliga kraften i body_class-funktionen kommer när den används med de villkorsstyrda taggarna.

Dessa villkorsstyrda taggar är sant eller falskt-datatyper som kontrollerar om ett villkor är sant eller falskt i WordPress. Till exempel kontrollerar den villkorsstyrda taggen is_home om den sida som visas är homepage eller ej.

Detta allow utvecklare av teman att kontrollera om ett villkor är sant eller falskt innan de lägger till en customize CSS-klass i body_class-funktionen.

Låt oss ta en titt på några exempel på hur man använder villkorsstyrda taggar för att add to customize-klasser till body-klassen.

Låt oss säga att du vill utforma din homepage på ett annat sätt för inloggade användare med användarrollen author. WordPress genererar automatiskt en .home- och .inloggad -klass, men detekterar inte rollen som användare eller add to den som en klass.

Nu är detta ett scenario där du kan använda de villkorsstyrda taggarna med lite anpassad kod för att dynamiskt lägga till en anpassad klass till body-klassen.

För att uppnå detta ska du add to följande kod till ditt temas functions.php-fil eller code snippets 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');

Låt oss nu ta en titt på ett annat användbart exempel. Den här gången ska vi kontrollera om den page som visas är en preview av ett draft i WordPress.

För att göra det kommer vi att använda den villkorsstyrda taggen is_preview och sedan add to vår customize 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 ska vi lägga till följande CSS i vårt temas stylesheet för att använda den nya customizer CSS-klassen som vi just har lagt till.

.preview-mode .site-header:before { 
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}

Så här såg det ut på vår demo site:

Custom preview mode CSS class added to the body class

Du kanske vill kontrollera den fullständiga listan över villkorsstyrda taggar som du kan använda i WordPress. Detta ger dig en praktisk uppsättning taggar som är redo att användas för din kod.

Andra exempel på dynamiskt tillägg av Custom Body-klasser

Förutom villkorsstyrda taggar kan du även använda andra tekniker för att hämta information från WordPress-databasen och skapa custom CSS-klasser för body-klassen.

Lägga till kategorinamn i body-klassen på en page med ett enskilt inlägg

Låt oss säga att du vill customize utseendet på enskilda inlägg baserat på den kategori de är arkiverade i. Du kan använda body-klassen för att uppnå detta

Först måste du lägga till kategorinamn som CSS-klass på sidor med enskilda inlägg. För att göra det, add följande kod till ditt temas functions.php-fil eller ett code snippets 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 kommer att add to kategoriklassen i din body-klass för sidor med enskilda inlägg. Du kan sedan använda CSS-klasser för att utforma den som du vill.

Lägga till page slug i body-klassen

Klistra in följande kod i ditt temas functions.php-fil eller i ett code snippets 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' );

Återigen rekommenderar vi att du lägger till den här koden i WordPress med hjälp av ett code snippets plugin som WPCode. På så sätt behöver du inte oroa dig för att förstöra din site.

Börja med att installera och aktivera det gratis pluginet WPCode. Om du behöver hjälp kan du följa den här guiden om hur du installerar ett plugin för WordPress.

När pluginet är aktiverat går du till Code Sn ippets Add Snippet från WordPress dashboard. Klicka sedan på knappen ”Use snippet” under alternativet ”Add Your Custom Code (New Snippet)”.

Add a new custom code snippet in WPCode

Därefter klistrar du bara in koden ovan i boxen ”Code Preview” och väljer ”PHP Snippet” som code type i dropdown-menyn.

Paste code snippet into WPCode

Till sist togglar du omkopplaren från ”Activate” till ”Inaktiverad” och klickar på knappen ”Save Snippet”.

Activate and save your custom code snippet

Detektering av webbläsare och webbläsarspecifika Body Classes

Ibland kan du stöta på issues där ditt theme kan behöva ytterligare CSS för en viss webbläsare.

Nu är den goda nyheten att WordPress automatiskt upptäcker webbläsaren vid hämtar och sedan tillfälligt lagrar denna information som en global variabel.

Du behöver bara kontrollera om WordPress har upptäckt en viss webbläsare och sedan add to den som en custom CSS-klass.

Helt enkelt, copy and paste följande kod i ditt temas functions.php-fil eller code snippets plugin:

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 gillar:

.ms-edge .navigation {some item goes here}

Om det är ett litet problem med padding eller marginal är det här ett ganska enkelt sätt att fixa det.

Det finns definitivt många fler scenarier där du med hjälp av body_class-funktionen kan save you från att skriva långa rader med kod. Om du till exempel använder ett temaramverk som Genesis, kan du använda det för att add to custom klasser i ditt barntema.

You can use the body_class function to add CSS classes for full-width page layouts, sidebar content, header and footers etc.

Expertguider om design av teman för WordPress

Letar du efter fler tutorials? Kontrollera våra andra guider om temadesign i WordPress:

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du använder body-klassen i WordPress i dina themes. Du kanske också vill läsa vår artikel om hur du utformar varje WordPress-post på olika sätt, och vår jämförelse av de bästa tilläggen för page builders i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

15 kommentarerLämna ett svar

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mrteesurez

    Thanks for sharing this tips and codes on WordPress body class, I am just learning this class here as I am into WordPress development so this post is beneficial to me to understand more WordPress class and functions.

  3. jenny

    plsss give me example outwitting a crocodile theme plsssssssss

  4. Corrinda

    Thank you after reading a number of articles regarding the body-class this is the one the finally sunk in.

    Got it working on individual pages and on category pages this is great. The use cases are what made the difference for me.

  5. Yolanda

    Great tips! I’m trying to figure out how to add the menu class (the one you can enter in the admin) to body_class:

    [pre]
    /** Add nav menu css class to body class */
    function add_nav_menu_css( $classes ) {
    $classes[] = ’menu-class-from-admin’;
    return $classes;
    }
    add_filter( ’body_class’, ’add_nav_menu_css’ );
    [/pre]

  6. Seth Burleigh

    Great tips. I”m trying to do this, and when inserting ”page-template page-template-(template file name)” into my header file such that I have:

    <body >

    And I then modify my CSS to include: .page-template-home_corechella

    I am left with a completely blank page. Nothing. What am I doing wrong? Thanks!

  7. Michael

    Great write up, thanks

  8. Rasha

    i have news page that get posts using category.php , i want to give it specific class so i can make the content wide and without the sidebar , how i can do that ?

  9. Vajrasar

    Indeed a good writeup and very informative. Just a question – For example if I add Browser Specific Body Class today and after few days I need to apply Page Class in Body Slug. Then will the settings/css that I did with Browser Specific Body class will get ruined or not?

    • Editorial Staff

      No it will not get ruined. It can be overridden depending on how your CSS is written.

      Administratör

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.