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

So fügen Sie den Seitenslogan zur Body-Klasse in WordPress hinzu

Wir haben im Laufe der Jahre an vielen WordPress Websites gearbeitet, und ein Trick zur individuellen Anpassung, auf den wir immer wieder zurückkommen, ist das Hinzufügen der Titelform der Seite zur Body-Klasse. Es ist so einfach, aber es macht einen großen Unterschied, wenn es um die Flexibilität des Designs geht.

Durch Hinzufügen einer Titelform im WordPress-Theme können Sie alle individuellen Anpassungen vornehmen, die Sie wünschen, ohne dass es zu Komplikationen kommt. Sie können ganz einfach die Farben, Schriften und andere Elemente auf einzelnen Seiten ändern, ohne den Rest Ihrer Website zu beeinträchtigen.

In diesem Artikel zeigen wir Ihnen, wie Sie eine Titelform in die Body-Klasse Ihrer WordPress-Themes einfügen können.

How to Add the Page Slug to Body Class in WordPress

Warum einen Seiten-Slug in der Body-Klasse in Ihrem Theme hinzufügen?

Wenn Sie bestimmte Seiten auf Ihrer Website anpassen und die Seite korrekt identifizieren möchten, ist das Hinzufügen eines Seiten-Slugs in der Body-Klasse Ihres Themes sehr nützlich.

Standardmäßig zeigt Ihre WordPress-Website nur die Post-ID-Klassen an, was schwierig sein kann, wenn es darum geht, die richtige Seite zu erkennen. Ein Seiten-Slug zeigt die URL Ihres Blogbeitrags an, was die Anpassung der Seite erleichtert.

Außerdem können Sie verschiedene individuelle Anpassungen an Ihren Seiten vornehmen, indem Sie eine Titelform-Körperklasse verwenden. So können Sie beispielsweise die Schrift und die Farben eines bestimmten Beitrags ändern oder einen Call-to-Action Button auf einer bestimmten Seite hervorheben.

Schauen wir uns also an, wie Sie den Seitenslug in der Body-Klasse Ihres WordPress-Themes einfügen können.

Hinzufügen eines Seiten-Slugs in Ihrem WordPress-Theme

Um Ihnen zu helfen, die URL Ihrer Seite in die body-Klasse Ihres WordPress-Themes einzufügen, können Sie den folgenden Code in die functions.php-Datei Ihres Themes eingeben.

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

Sie können auf die functions.php-Dateien Ihres Themes zugreifen, indem Sie den WordPress-Theme-Editor (Code-Editor) aufrufen. Die direkte Bearbeitung der Theme-Dateien ist jedoch sehr riskant.

Das liegt daran, dass jeder Fehler beim Hinzufügen des Codes Ihre Website zerstören und Sie daran hindern kann, sich in Ihr WordPress-Dashboard einzuloggen.

Eine viel einfachere Möglichkeit, den Code in die Body-Klasse Ihres Themes einzufügen, ist die Verwendung eines WordPress-Plugins wie WPCode.

WPCode

Mit WPCode können Sie innerhalb weniger Minuten und ohne Fehler Code zu Ihrer Website hinzufügen. Außerdem stellt es sicher, dass Ihr Code nicht entfernt wird, wenn Sie Ihr Theme in Zukunft aktualisieren oder ändern.

Außerdem enthält es eine Bibliothek mit von Experten erstellten Code-Snippets, die Sie mit nur einem Klick installieren können. Sie brauchen also keine Programmierkenntnisse, um erweiterte WordPress-Anpassungen vorzunehmen.

Zunächst müssen Sie das kostenlose WPCode-Plugin auf Ihrer Website installieren und aktivieren. Eine Schritt-für-Schritt-Anleitung finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Sobald das Plugin aktiviert ist, wird Ihrer WordPress-Verwaltungsleiste ein neuer Menüpunkt namens „Code Snippets“ hinzugefügt. Wenn Sie darauf klicken, gelangen Sie auf die Seite, auf der Sie alle Ihre Code-Snippets verwalten können.

Um Ihr erstes benutzerdefiniertes Codefragment hinzuzufügen, klicken Sie auf die Schaltfläche „Neu hinzufügen“.

Go to Code Snippets and click on Add New

Daraufhin wird die Seite „Snippet hinzufügen“ angezeigt, auf der Sie ein Code-Snippet aus der vorgefertigten Bibliothek auswählen oder Ihren individuellen Code hinzufügen können.

Um Ihren benutzerdefinierten Code hinzuzufügen, navigieren Sie zur Option „Benutzerdefinierten Code hinzufügen (neues Snippet)“ und klicken Sie auf die Schaltfläche „Snippet verwenden“.

Add custom code in WPCode with new snippet

Geben Sie nun einen Titel für Ihr Code-Snippet ein und geben Sie den Code in das Feld „Codevorschau“ ein. Außerdem müssen Sie in der Dropdown-Liste auf der rechten Seite „PHP Snippet“ als Codetyp auswählen.

Enter code snippet and choose code type

Blättern Sie dann zum Abschnitt „Einfügen“. Hier können Sie die Methode „Auto Insert“ wählen, um den Code automatisch an einer bestimmten Position in WordPress einzufügen und auszuführen, z. B. im Adminbereich, im Frontend usw. Wenn Sie unsicher sind, behalten Sie die Standard-Option „Überall ausführen“ bei.

Edit insertion method for code

Sie können auch die Methode „Shortcode“ wählen. Bei dieser Methode wird das Snippet nicht automatisch eingefügt. Sie erhalten einen Shortcode, den Sie manuell an einer beliebigen Stelle Ihrer Website einfügen können.

Wenn Sie fertig sind, schalten Sie den Schalter von „Inaktiv“ auf „Aktiv“ um und klicken Sie auf die Schaltfläche „Snippet speichern“ in der oberen rechten Ecke.

Save and activate code snippet WPCode

Weitere Einzelheiten finden Sie in unserer Anleitung zum Hinzufügen von benutzerdefiniertem Code in WordPress.

Sie werden nun eine neue Body-Klasse sehen, die wie folgt ausgegeben wird: page-{slug}. Verwenden Sie diese Klasse, um Ihre Standardstile außer Kraft zu setzen und Elemente für bestimmte Seiten anzupassen.

Nehmen wir zum Beispiel an, Sie möchten Ihre Seitenleisten-Widgets gestalten, aber nur auf einer Seite mit dem Slug „Bildung“. In diesem Fall könnten Sie CSS wie folgt hinzufügen:

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

Weitere Einzelheiten finden Sie in unserer Anleitung zum Hinzufügen von benutzerdefiniertem CSS zu WordPress.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie einen Seitenslug in der Body-Klasse Ihres WordPress-Themes hinzufügen können. Vielleicht möchten Sie auch einen Blick auf unseren Leitfaden zur WordPress-Body-Klasse werfen und wie Sie die beste Design-Software auswählen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

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.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

27 KommentareEine Antwort hinterlassen

  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!

      Admin

    • WPBeginner Support

      Glad our method worked for you :)

      Admin

  3. Bradley

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

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

  5. Pete

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

  6. Chris

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

  7. Aaron McGraw

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

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

  9. 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. :)

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

  11. 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?

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

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

  14. MJ

    Awesome! I wish this functionality was bundled with WP though

  15. Suat

    It’s great way for editing css.
    Thank you

  16. Weerayut Teja

    You save my work time.
    Thanks Syed :)

  17. Todd M.

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

  18. Randy Caruso

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

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.