Einzelne Seiten in WordPress per CSS ansprechen via „body_class“
Um einzelne Seiten in WordPress individuell gestalten und per CSS ansprechen zu können, steht eine praktische Funktion zur Verfügung. Die Funktion nennt sich "body_class" und erlaubt das Hinzufügen von Klassen in den Body-Tag. Besonders praktisch ist die Funktion wenn man Eltern-Elemente notiert, um gezielt per CSS Formatierungen an Unterseiten vererben zu lassen.
Mit ein paar Zeilen Code lassen wir nun den aktuellen „Slug“ in das Body-Element schreiben. Wir gehen allerdings einen Schritt weiter und schreiben nicht nur den Slug der aktuellen Seite ins HTML, sondern wir notieren zusätzlich den Slug der Eltern-Seite. Standardmäßig schreibt WordPress eh schon die einzigartige ID einer Seite in den Body-Tag, doch Eltern-Elemente werden nicht notiert. Hier kommt unser Snippet ins Spiel. Das ist praktisch, wenn Seiten in WordPress verschachtelt werden. Sollen später via CSS alle Unterseiten von „Kontakt“ rot eingefärbt werden, reicht es via CSS die Parent-Klasse „kontakt“ anzusprechen. Alle Unterseiten erben die CSS-Informationen anschließend.
Was ist der „Slug“? Der Slug, bzw. die Titelform ist eine abgewandelte Form des Seitentitels und kommt auch ins Spiel wenn WordPress saubere Permalinks auf Basis des Seitentitels generiert. WordPress entfernt aus dem Seitentitel Umlaute, Sonderzeichen und Leerstellen. Übrig bleibt der „Slug“.
Folgendes Code-Snippet gehört in die functions.php-Datei und „wirkt sofort“:
add_filter('body_class','body_class_section');
function body_class_section($classes) {
global $wpdb, $post;
if (is_page()) {
if ($post->post_parent) {
$parent = end(get_post_ancestors($current_page_id));
} else {
$parent = $post->ID;
}
$post_data = get_post($parent, ARRAY_A);
$classes[] = 'parent-' . $post_data['post_name'];
}
return $classes;
}Um einzelne Seiten in WordPress individuell gestalten und per CSS ansprechen zu können, steht eine praktische Funktion zur Verfügung. Die Funktion nennt sich „body_class“ und erlaubt das Hinzufügen von Klassen in den Body-Tag. Besonders praktisch ist die Funktion wenn man Eltern-Elemente notiert, um gezielt per CSS Formatierungen an Unterseiten vererben zu lassen.
Hm, bei mir funktioniert es nicht. Wenn ich im CSS über die post-id etwas deklariere (z.B. #post-11 {background-color:#ededed;} ), wird das nicht für die child-seiten übernommen.
Oder habe ich die Funktion falsch verstanden?
Hallo Andrea, zeichne deine Anweisung mal mit „!important“ aus. Nur um zu schauen ob es dann greift. Wenn ja, ist dein Problem CSS-technischer-Natur. Wenn nein, scheint bei dir das PHP-Schnippsel nicht zu greifen. Prüf auf jeden Fall nach dass du auch den im CSS notierten Selektor (z.B. #post-11) in genau dieser Form im HTML-Quellcode wieder findest. Unterscheiden sich die Schreibweise, funktioniert es natürlich nicht. Klingt banal, passiert einem aber schnell.
So müsste zum Testen die Anweisung dann aussehen: #post-11 { background-color: #ededed !important;}
Also, bei mir funktioniert es auch nicht. Auch mit der important-Auszeichnung nicht…
Schade – genau sowas hätte ich gebrauchen können
Hallo Andrea,erscheint die Klasse denn im html/Quelltext?Wenn ja hat es ja funktioniert. Der Rest ist CSS. Erscheint die Klasse nicht im html hilft auch kein „important“
Ja, ich denke schon. Da steht „menu-item-has-children“. Und auch „current-page-parent“ und -ancestor und und und
Im CSS habe ich den Post mit
„#post-11 {
padding-top: 40px!important;
padding-left:100px!important;
background-color:#99aa33!important;
}“ deklariert.
Aber für die posts, die Unterseiten wären, wird die Deklaration nicht übernommen. Schätze, ich muss jede einzelne Unterseite dann auch über die post-ID deklarieren…?!
Schade
Hallo Andrea, „denke schon“ ist leider was zu mager ;-) Prüf mal nach ob wie im Tutorial beschrieben die Klasse im HTML ist.
Am besten mal einen Link posten.
Kämpfe im Moment mit einer Schulaufgabe. (Vermisse es echt, mein eigenes HTML und CSS zu schreiben.) Und bin sehr froh dieses Snippet gefunden zu haben, funktioniert prima, erleichtert mir die Arbeit. Danke! :)
Hi.
Ist ja schon älter, aber just in case: Wenn es nicht klappt (siehe oben), hilft es, sowohl die Klasse der Haupt-ID als auch die der Unterseiten ins CSS zu schreiben. Beispielsweise:
.page-id-1 {
background-color: #000;
}
.parent-pageid-1 {
background-color: #000;
}
Schöne Grüße
Hallo,
jetz weiß ich wie ich es für einen Beitrag anwenden kann.
Hast Du auch einen Rat für mich wie ich das ausschlißlich für die Seite category-archives einsetzten kann?
Die hat ja keine page-id sondern der permalink zeigt mir nur die id der gewählten Kategorie an.
Wäre sehr dankbar, denn ich habe jetzt stundenlan recherchiert und noch nichts finden können.
Vielen Dank.
Charlie
Hallo Rolf, versuch es mal mit folgendem Snippet: https://gist.github.com/svizion/5722276 – Es ist aber sehr umfassend, da es allen Fällen Rechnung trägt. Habe es soweit nicht testen können, aber kommt auf einen Versuch ja mal an.