Frisch notiert!
Die neusten Artikel aus unserem Blog.

Einzelne Seiten in WordPress per CSS ansprechen via „body_class“

von Gino Cremer / Zuletzt aktualisiert am 06/07/2017 / Wordpress / 11
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.

 

 


Gino Cremer

Ich bin Geschäftsführer der auf Weblösungen spezialisierten Agentur Pixelbar aus dem belgischen Eupen.

Ich habe langjährige Erfahrung mit CMS-basierten Kundenprojekten, vornehmlich auf WordPress-Basis und bin ein Webdesigner der ersten Stunde.

Daneben arbeite ich auch als Dozent und Berater am WIFI Wien im Bereich Social Media und Webdesign.

Weitere Beiträge von gino anzeigen

11 Kommentare

  1. andrea

    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;}

      • 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

  2. Antarasis

    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! :)

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

  4. Rolf Charlier

    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

Hinterlasse eine Antwort

Contact us!