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

Suchen Sie nach einer Möglichkeit, einen WordPress-Seiten-Slug in der Body-Klasse Ihres Themes hinzuzufügen?

Durch Hinzufügen eines Seiten-Slugs im WordPress-Theme können Sie alle gewünschten Anpassungen ohne Komplikationen vornehmen. Sie können ganz einfach die Farben, Schriftarten und andere bestimmte Elemente für bestimmte Seiten ändern.

In diesem Artikel zeigen wir Ihnen, wie Sie einen Seitenslug in der Body-Klasse Ihres WordPress-Themes hinzufügen können.

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.

Darüber hinaus können Sie Ihre Seiten mithilfe einer Body-Klasse für den Seitenslug auf verschiedene Weise anpassen. So können Sie beispielsweise die Schriftart und die Farben eines bestimmten Beitrags ändern oder eine Schaltfläche für eine Aufforderung zum Handeln auf einer bestimmten Landing Page 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.

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

Daraufhin wird die Seite „Snippet hinzufügen“ angezeigt, auf der Sie ein Code-Snippet aus der vorgefertigten Bibliothek auswählen oder Ihren eigenen 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“.

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.

Blättern Sie dann nach unten zum Abschnitt „Einfügen“. Hier können Sie die Methode „Automatisch einfügen“ wählen, um den Code automatisch an einer bestimmten Stelle in WordPress einzufügen und auszuführen, z. B. im Adminbereich, im Frontend usw. Wenn Sie sich unsicher sind, behalten Sie die Standardoption „Überall ausführen“ bei.

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.

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.