So fügen Sie mit Astra Pro eine benutzerdefinierte Body-Klasse zu bestimmten Seiten hinzu

Möchten Sie bestimmten Seiten Ihrer WordPress-Website einzigartige CSS-Stile zuweisen?
Die sauberste Methode ist, eine benutzerdefinierte Klasse zum <body>-Tag hinzuzufügen — so können Sie diese Seiten mit CSS gezielt ansprechen.
Mit den folgenden Schritten können Sie mithilfe der Funktion Custom Layouts von Astra Pro einer beliebigen Seite (oder Gruppe von Seiten) eine benutzerdefinierte Body-Klasse hinzufügen — ganz ohne Programmierkenntnisse.

Überblick

WordPress fügt dem Body bereits automatisch einige Klassen hinzu (wie page-id-42), aber manchmal benötigen Sie eine
saubere, aussagekräftige Klasse wie special-page, die Sie selbst kontrollieren.
Die Custom Layouts-Funktion von Astra Pro ermöglicht es Ihnen, ein kleines JavaScript-Snippet in bestimmte Seiten einzufügen,
das Ihre benutzerdefinierte Klasse beim Laden der Seite zum Body hinzufügt.

Arbeitsablauf:

[Astra Pro → Custom Layouts] → [JavaScript-Snippet] → [Eingebettet via wp_head-Hook] → [Body-Klasse beim DOMContentLoaded hinzugefügt]

Schritt 1. Custom Layouts in Astra Pro öffnen

1. Melden Sie sich im WordPress-Administrations-Dashboard an.
2. Gehen Sie zu Design → Astra Options.
3. Finden Sie das Modul Custom Layouts und klicken Sie auf Settings.
4. Klicken Sie auf Add New.

Wenn Sie Custom Layouts nicht sehen, muss es möglicherweise zuerst aktiviert werden.
Gehen Sie zu Design → Astra Options → Astra Addons und aktivieren Sie den Schalter für Custom Layouts.

Schritt 2. Das Custom Layout konfigurieren

Sie sehen nun einen neuen Editor-Bildschirm. Füllen Sie Folgendes aus:

1. Fügen Sie einen Titel als eigene Referenz hinzu (z. B. Body Class - Spezielle Seiten).
2. Klicken Sie im Editor auf die Registerkarte Code und fügen Sie folgendes Snippet ein:

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.body.classList.add('special-page');
});
</script>

Ersetzen Sie special-page durch den gewünschten Klassennamen.

Schritt 3. Den Hook konfigurieren

Scrollen Sie nach unten, um das Panel Layout Settings zu finden, und konfigurieren Sie:

Layout → Hook
Action → wp_head
Priority → 10

Wichtig: Obwohl das Script in den <head> eingefügt wird,
wird es erst ausgeführt, wenn das DOM vollständig geparst wurde — weil wir es in
document.addEventListener('DOMContentLoaded', ...) eingebettet haben.
Das stellt sicher, dass document.body beim Hinzufügen der Klasse bereits existiert,
und es wird früher als wp_footer ausgeführt, wodurch ein ungestyltes Aufblitzen des Inhalts vermieden wird.

Schritt 4. Anzeigebedingungen festlegen

Suchen Sie im Panel Layout Settings nach Display On und wählen Sie die Seiten aus,
auf denen die Body-Klasse erscheinen soll.

Sie können aus folgenden Bedingungen wählen:

Specific Page — zielt auf eine oder mehrere einzelne Seiten nach Name ab
All Pages — gilt für alle Seiten der Website
Front Page — nur die Startseite
Page Template — alle Seiten, die ein bestimmtes Template verwenden

Sie können mehrere Seiten auf einmal in einem einzigen Custom Layout hinzufügen,
was viel effizienter ist als ein Layout pro Seite zu erstellen.

Schritt 5. Veröffentlichen

Sobald Hook und Anzeigebedingungen eingestellt sind, klicken Sie auf Publish in der oberen rechten Ecke.

Schritt 6. Überprüfen ob es funktioniert

Besuchen Sie eine der Seiten, die Sie unter Display On ausgewählt haben.
Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie Untersuchen (oder drücken Sie F12).
Suchen Sie im Tab Elements das <body>-Tag.
Bestätigen Sie, dass Ihre benutzerdefinierte Klasse in der Klassenliste erscheint:

<body class="home page-template-default ... special-page">

Hinweis: Verwenden Sie nicht Seitenquelltext anzeigen zur Überprüfung —
das zeigt das rohe HTML bevor JavaScript ausgeführt wird, daher erscheint die Klasse dort nicht.
Verwenden Sie immer Element untersuchen, um das Live-DOM nach der JavaScript-Ausführung zu sehen.

Im CSS verwenden

Sie können diese Seiten nun gezielt in Ihrem CSS ansprechen:

/* Gilt nur für Seiten mit der Body-Klasse special-page */
body.special-page .site-header {
    background-color: #f0f4ff;
}

body.special-page h1 {
    font-size: 2.5rem;
    color: #1a1a2e;
}

Fügen Sie dies unter Design → Anpassen → Zusätzliches CSS oder im Stylesheet Ihres Child-Themes ein.

Fehlerbehebung

Klasse erscheint nicht? Stellen Sie sicher, dass Sie mit Element untersuchen prüfen, nicht mit Seitenquelltext anzeigen.
Funktioniert immer noch nicht? Leeren Sie den Browser-Cache und den Cache aller Caching-Plugins, dann neu laden.
Verwenden Sie Cloudflare? Leeren Sie auch den Cloudflare-Cache für diese Seite.
Klasse erscheint auf falschen Seiten? Überprüfen Sie nochmals die Display On-Bedingungen im Custom Layout.

Fazit

Sie haben jetzt eine einfache und zuverlässige Methode, um bestimmten WordPress-Seiten mit Astra Pro eine
benutzerdefinierte Body-Klasse hinzuzufügen — ohne functions.php anzufassen oder benutzerdefinierte Seitenvorlagen zu erstellen.

Prozesszusammenfassung:
Custom Layouts → JavaScript-Snippet → wp_head-Hook → Anzeigebedingungen → Benutzerdefinierte Body-Klasse ✅

Dieser Ansatz ist besonders nützlich, wenn Sie einer Gruppe von Seiten einzigartige Stile zuweisen möchten,
ohne den Rest Ihrer Website zu beeinflussen. Sauber, gezielt und einfach zu verwalten.