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

Så här addar du page slug till body class i WordPress

Vi har arbetat med många WordPress-webbplatser genom åren, och ett anpassningstrick som vi alltid återkommer till är att lägga till sidans slug i body-klassen. Det är en så enkel sak, men det gör en värld av skillnad när det gäller designflexibilitet.

Genom att lägga till en page slug i WordPress-temat kan du göra alla anpassningar du vill utan några komplikationer. Du kan enkelt ändra färger, teckensnitt och andra objekt på enskilda sidor utan att påverka resten av din webbplats.

I den här artikeln visar vi dig hur du lägger till en sid-slug i body-klassen i dina WordPress-teman.

How to Add the Page Slug to Body Class in WordPress

Varför add to a Page Slug in Body Class in Your Theme?

Om du vill customize specifika sidor på din site och vill korrekt identifiera sidan, är det verkligen användbart att lägga till en page slug i body-klassen i ditt theme.

Som standard visar din WordPress site bara postens ID:n, vilket kan vara svårt när det gäller att känna igen korrekt page. En page slug visar URL:en till ditt blogginlägg, vilket gör det enklare att customize sidan.

Dessutom kan du göra olika anpassningar av dina sidor med hjälp av en body class för page slug. Du kan till exempel ändra teckensnitt och färger för ett visst inlägg eller markera en call to action-knapp på en viss landningssida.

Med detta sagt, låt oss titta på hur du kan add to page slug i body-klassen i your WordPress theme.

Lägga till en Page Slug i ditt WordPress Theme

För att hjälpa dig att add to URL:en till din page i body-klassen i ditt WordPress-tema kan du enter följande kod i ditt temas functions.php-fil.

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

Du kan komma åt ditt temas functions.php-filer genom att gå till WordPress Theme Editor (Code Editor). Att direkt editera theme-filerna är dock mycket riskabelt.

Det beror på att alla misstag när du lägger till koden kan förstöra din site och blockera dig från att logga in på din WordPress dashboard.

Ett mycket enklare sätt att add to koden till body-klassen i ditt theme är att använda ett WordPress plugin som gillar WPCode.

WPCode

Med WPCode kan du enkelt add to code till din site inom några minuter och utan några error. Dessutom säkerställer det också att din kod inte tas bort om du uppdaterar eller ändrar ditt theme i framtiden.

Det kommer också med ett bibliotek med expertgjorda code snippets som du kan installera med 1 click. Så du behöver inte några kodningskunskaper för att göra avancerade WordPress customizes.

Först måste du installera och aktivera det gratis WPCode plugin på din site. För steg-för-steg-instruktioner kan du läsa vår guide om hur du installerar ett plugin för WordPress.

När pluginet är aktiverat kommer ett nytt menu item som heter ”Code Snippets” att add to din WordPress admin bar. Om du klickar på det kommer du till sidan där du hanterar alla dina code snippets.

Om du vill lägga till ditt första custom code snippet klickar du på knappen ”Add New”.

Go to Code Snippets and click on Add New

Då kommer du till sidan ”Add Snippet”, där du kan välja ett kodavsnitt från det färdiga biblioteket eller lägga till din egen kod.

För att add din custom kod, navigera till alternativet ”Add Your Custom Code (New Snippet)” och click på knappen ”Use snippet”.

Add custom code in WPCode with new snippet

Ge nu en rubrik för ditt code snippet och enter koden i ”Code Preview” boxen. Du måste också välja ”PHP Snippet” som code type från dropdown-listan till höger.

Enter code snippet and choose code type

Därefter rullar du ner till avsnittet ”Insertion”. Här kan du välja metoden ”Auto Insert” för att automatiskt infoga och exekvera koden på en specifik WordPress-plats som admin, frontend med mera. Om du är osäker kan du behålla standardalternativet ”Kör överallt”.

Edit insertion method for code

Eller så kan du välja ”Shortcode”-metoden. Med den här metoden infogas snippet inte automatiskt. Du får en shortcode som du kan infoga manuellt var som helst på din site.

När du är klar togglar du om från ”Inaktiverad” till ”Aktiv” och klickar på knappen ”Save Snippet” högst upp till höger.

Save and activate code snippet WPCode

För mer details kan du läsa vår guide om hur du lägger till custom code i WordPress.

You will now start seeing a new body class being outputted like this: page-{slug}. Använd den klassen för att åsidosätta dina standardstilar och customize element för specifika pages.

Låt oss till exempel säga att du vill utforma dina widgetar i sidebar, men bara på en page som har sluggen ”education”. I så fall kan du add to CSS som gillar detta:

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

För mer detaljer kan du se vår guide om hur du lägger till customize CSS i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en page slug i body-klassen i ditt WordPress theme. Du kanske också vill ta en titt på vår guide om WordPress body class och hur du väljer den bästa designprogramvaran.

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

27 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. David

    Thanks! Simple and effective.

    • WPBeginner Support

      You’re welcome!

      Administratör

  3. jeba

    Thanks. Its working

    • WPBeginner Support

      Glad our method worked for you :)

      Administratör

  4. Bradley

    Many thanks! Literally copied & pasted this code into my functions.php. Worked perfectly.

  5. Alds

    How about using global $wp_query instead of $post? I’ve noticed that $post gets overwritten if you’ve run a wp_query before the functions.php gets executed.

  6. Pete

    This needs a conditional statement to only apply it to single.php, not archive.php etc.

  7. Chris

    How can I put the post-id in the body class?

  8. Aaron McGraw

    Awesome! Just what I needed. Thank you so much!

  9. Daneil

    Thank you for putting it out there, simple bit of code, but useful and allows you to write more human friendly css files, rather than classes based on ID. Cheers

  10. Austin

    Thank you so much for this! I found out the hard way that page-id can change given different circumstances. This allows me to style individual pages without as much worry. :)

  11. Kevin

    Many thanks for this. Had some problems initially due to the position of code in my stylesheet CSS but once moved to the bottom worked great. Just wish this was standard for WP as others have said and that i had known about this a long time ago

  12. Tom McGinnis

    This code works quite well. I was finding, however, that search results would end up with the body class including the slug from the first item listed. Sometimes the first item would have styles that would override the styles for the search results page. Strange, huh!

    I figured out that if you put !is_search() inside the if statement, then this problem is eliminated. If anybody else runs into this problem, the fix is simple.

    • Did you use &&?

      When you put in !is_search() –How did you write the code?

  13. Murhaf Sousli

    This’s exactly what I’m looking for, I pasted the code in function.php, but unfortunately there is no class added to body! any ideas?

    • Asaf

      I have the exactly same issue

      • Ahir Hemant

        Hello, it working for me. send me your link so i can check.

        Thank you

  14. WPBeginner Staff

    It is bundled with WordPress. However the front-end of your site is handled by themes that’s why it is left for theme authors to decide whether or not to use it.

  15. MJ

    Awesome! I wish this functionality was bundled with WP though

  16. Suat

    It’s great way for editing css.
    Thank you

  17. Weerayut Teja

    You save my work time.
    Thanks Syed :)

  18. Todd M.

    This is a great snippet for all WordPress devs. Comes as standard in my theme setup now.

  19. Gaurav Ramesh

    Thanks for this. Such small tips and tricks help a lot to beginners like me.

  20. Randy Caruso

    Thanks for this – been stuck hacking myself to bits with the page-id and suffering the consequences.

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.