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.

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.

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”.

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”.

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.

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”.

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.

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.