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

Wir haben im Laufe der Jahre an vielen WordPress-Websites gearbeitet, und ein Anpassungstrick, zu dem wir immer wieder zurückkehren, ist das Hinzufügen des Seiten-Slugs zur Body-Klasse. Es ist eine so einfache Sache, aber sie macht einen großen Unterschied, wenn es um Designflexibilität geht.

Hier ist, was wir meinen: Sie kennen das wahrscheinlich schon – Sie möchten nur eine Seite anders gestalten als den Rest Ihrer Website. Ohne den Seiten-Slug in Ihrer Body-Klasse ringen Sie mit komplexen CSS-Selektoren oder erstellen separate Stylesheets.

Das Hinzufügen eines Seiten-Slugs im WordPress-Theme ermöglicht Ihnen alle gewünschten Anpassungen ohne Komplikationen. Sie können Farben, Schriftarten und andere Elemente auf einzelnen Seiten einfach ändern, ohne den Rest Ihrer Website zu beeinträchtigen.

In diesem Artikel zeigen wir Ihnen, wie Sie einen Seiten-Slug zur Body-Klasse Ihrer WordPress-Themes hinzufügen. Wir haben diese Methode für alles verwendet, von einfachen Business-Websites bis hin zu komplexen E-Commerce-Shops.

Warum einen Seiten-Slug in der Body-Klasse Ihres Themes hinzufügen?

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

Standardmäßig zeigt Ihre WordPress-Website nur die Post-ID-Klassen an, was bei der Erkennung der richtigen Seite schwierig sein kann. Ein Seiten-Slug zeigt die URL Ihres Blogbeitrags an und erleichtert so die Anpassung der Seite.

Darüber hinaus können Sie verschiedene Anpassungen an Ihren Seiten vornehmen, indem Sie eine Seiten-Slug-Body-Klasse verwenden. Sie können zum Beispiel die Schriftart und Farben eines bestimmten Beitrags ändern oder einen Call-to-Action-Button auf einer bestimmten Landingpage hervorheben.

Das gesagt, schauen wir uns an, wie Sie den Seiten-Slug zur Body-Klasse Ihres WordPress-Themes hinzufügen können.

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

Um Ihnen beim Hinzufügen der URL Ihrer Seite zur Body-Klasse Ihres WordPress-Themes zu helfen, 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 zum WordPress Theme Editor (Code Editor) gehen. Das direkte Bearbeiten von Theme-Dateien ist jedoch sehr riskant.

Das liegt daran, dass jeder Fehler beim Hinzufügen des Codes Ihre Website beschädigen und Sie daran hindern kann, sich in Ihrem WordPress-Dashboard anzumelden.

Eine viel einfachere Möglichkeit, den Code zur Body-Klasse Ihres Themes hinzuzufügen, ist die Verwendung eines WordPress-Plugins wie WPCode. Wir verwenden es auf mehreren Websites, siehe unseren vollständigen WPCode-Testbericht, um mehr zu erfahren.

Mit WPCode können Sie in wenigen Minuten ganz einfach Code zu Ihrer Website hinzufügen, ohne Fehler. Außerdem wird sichergestellt, dass Ihr Code nicht entfernt wird, wenn Sie Ihr Theme in Zukunft aktualisieren oder ändern.

Es kommt auch mit einer Bibliothek von Experten erstellten Code-Snippets, die Sie mit einem Klick installieren können. Sie benötigen also keine Programmierkenntnisse, um fortgeschrittene WordPress-Anpassungen vorzunehmen.

Tatsächlich ist das Hinzufügen eines Seiten-Slugs zur Body-Klasse als fertiger Snippet in der WPCode-Bibliothek verfügbar. Dies ist die einfachste Methode.

Zuerst müssen Sie das kostenlose WPCode-Plugin auf Ihrer Website installieren und aktivieren. Schritt-für-Schritt-Anleitungen finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Nach der Aktivierung des Plugins wird ein neuer Menüpunkt namens 'Code-Snippets' zur Admin-Leiste Ihres WordPress hinzugefügt. Wenn Sie darauf klicken, gelangen Sie zu der Seite, auf der Sie alle Ihre Code-Snippets verwalten.

Um Ihr erstes Code-Snippet hinzuzufügen, klicken Sie auf die Schaltfläche „Neu hinzufügen“.

Dies öffnet die Seite „Snippet hinzufügen“, auf der Sie ein Code-Snippet aus der vorgefertigten Bibliothek auswählen können.

Suchen Sie einfach nach dem Snippet „Add the Page Slug to Body Class“ und klicken Sie, wenn Sie es gefunden haben, auf die Schaltfläche „Snippet verwenden“.

WPCode fügt den Code nun automatisch hinzu und legt die richtige Einfügungsmethode fest.

Sie müssen nur den Schalter von „Inaktiv“ auf „Aktiv“ umlegen. Klicken Sie abschließend oben auf der Seite auf die Schaltfläche „Aktualisieren“.

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

Zum Beispiel, sagen wir, Sie möchten Ihre Seitenleisten-Widgets stylen, aber nur auf einer Seite mit dem Slug „education“. 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 Details finden Sie in unserem Leitfaden zum Thema Hinzufügen von benutzerdefiniertem CSS zu WordPress.

Hinzufügen des benutzerdefinierten Codes manuell

Wenn Sie den obigen benutzerdefinierten Code lieber manuell hinzufügen möchten, erfahren Sie hier, wie das geht.

Navigieren Sie zuerst im WordPress-Dashboard zur Seite Code-Schnipsel » Schnipsel hinzufügen.

Gehen Sie von dort aus zur Option „Benutzerdefinierten Code hinzufügen (Neuer Snippet)“ und klicken Sie auf die Schaltfläche „+ Benutzerdefinierten Snippet hinzufügen“.

Wählen Sie dann aus der Liste der angezeigten Optionen einen Code-Typ aus. Wählen Sie für dieses Tutorial „PHP-Schnipsel“.

Geben Sie nun einen Titel für Ihren Code-Schnipsel an, der nur zu Ihrer Information dient und beliebig gewählt werden kann, um den Code zu identifizieren.

Kopieren und fügen Sie anschließend einfach den obigen Code in das Feld „Code-Vorschau“ ein.

Scrollen Sie als Nächstes zum Abschnitt „Insertion“. Hier können Sie die Methode „Auto Insert“ wählen, um den Code automatisch an einer bestimmten Stelle in WordPress einzufügen und auszuführen, wie z. B. im Adminbereich, Frontend und mehr.

Wenn Sie unsicher sind, behalten Sie die Standardoption „Überall ausführen“ bei.

Oder Sie können die Methode 'Shortcode' wählen. Mit dieser Methode wird das Snippet nicht automatisch eingefügt. Sie erhalten einen Shortcode, den Sie manuell überall auf Ihrer Website einfügen können.

Wenn Sie bereit sind, schalten Sie den Schalter von „Inaktiv“ auf „Aktiv“ und klicken Sie oben rechts auf die Schaltfläche „Snippet speichern“.

Weitere Details finden Sie in unserem Leitfaden zum Thema Hinzufügen von benutzerdefiniertem Code in WordPress.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einen Seiten-Slug zur Body-Klasse Ihres WordPress-Themes hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zu WordPress Body Class und wie Sie die beste Design-Software auswählen lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.