Body Class im Theme ergänzen
Der Body-Tag ist ein Container, der alle sichtbaren Elemente deiner Website umgibt. Auch er kann mit CSS-Klassen ausgestattet werden, die ein wertvolles Werkzeug für das Design und Layout deiner Seiten sind. Wir zeigen hier, wie du eigene Body-Classes in dein Theme einfügst, um seitenabhängige Klassen ansprechen zu können.
Inhaltsverzeichnis
Vorbereitungen für das Einfügen eigener Body-Klassen
Bevor du dein aktives WordPress Theme bearbeitest, sichere es um schnell wieder auf die zuletzt funktionierende Version zurückgreifen zu können. Das ist sehr hilfreich und kaputt ist schneller etwas, als man denkt.
Theme Backup per FTP durchführen
Dazu benutze ich ein FTP-Programm wie FileZilla, begebe mich in das Themeverzeichnis unter /wp-content/themes/ und kopiere das zu meinem Theme zugehörigen Theme-Verzeichnis (z.B. /wp-content/themes/pressengers/).
Child Theme im Einsatz?
Hast du dein Theme selbst geschrieben und gehörst eher zu den Minimalisten, hast du evlt. kein Child Theme und brauchst auch keines. Sinnvoll ist ein solches vor allem bei gekauften Premium Themes, die von den Entwicklern aktualisiert werden. Denn alle Änderungen würden dann überschrieben werden, wenn du diese nicht mit einem Child Theme umgesetzt hättest.
Daher empfehle ich dir grundsätzlich – sofern noch nicht geschehen – mit Child Themes zu arbeiten. In diesem neuen Theme Ordner legst du Kopien der Originaldateien deines Themes ab, die du dann beliebig abändern und individualisieren kannst.
So ergänzt du die Body Class in deinem Theme
Du benötigst den Teil deines Themes, in dem der </head> geschlossen und der <body> Tag geöffnet werden. Meistens ist das die header.php, manchmal auch die index.php.
Hast du die besagte Stelle gefunden, überprüfst du zunächst ob die Funktion für das Einfügen der Body-Klassen bereits vorhanden ist. Das würde dann so aussehen:
<body <?php body_class(); ?>>Das ist eine Hook-Funktion von WordPress, die du über eigene Funktionen erweitern kannst.
Die einfachste Methode, um eine eigene Klasse einzufügen
… ist auch gleichzeitig die nutzloseste:
<body <?php body_class('pressengers'); ?>>Mit einem Array kannst du mehrere Klassen einfügen
<body <?php body_class(array('pressengers', 'wordpress-news', 'toll')); ?>>So bekommst du deine eigenen Klassen direkt über die body_class() Funktion integriert. Das dürfte in den meisten Anwendungsfällen aber nicht viel bringen, da sich der besondere Nutzen der body classes durch Abhängigkeiten ergibt. Zum Beispiel, um den Post-Slug des aktuellen Beitrags zu integrieren und für diesen ein abweichendes CSS-Layout einzuspielen.
Hierfür müssen wir einen anderen Weg, nämlich den über eine eigene Funktion gehen, die den obigen Hook anspricht. Natürlich könntest du das über eine simple IF-Bedingung auch im header.php Template umsetzen, das ist aber nicht die saubere Art ein WordPress Theme zu bauen.
Body-Classes per Filter ergänzen
Die saubere Methode, um dein Theme zu erweitern ohne die Haupt-Templatedateien (wie die header.php) anzufassen.
Öffne hierfür die functions.php oder erstelle eine neue Datei, die du in der functions.php inkludierst. Dieser fügst du nachfolgenden Inhalt hinzu.
add_filter('body_class', 'pressengers_body_classes');
function pressengers_body_classes($classes) {
$classes[] = 'dein-klassen-name';
return $classes;
}Body Class mit Postname erweitern
Diese Grundfunktion bauen wir nun aus, damit sie einen echten Nutzen erfüllen kann. In meinem Beispiel möchte ich allen meinen Seiten den jeweiligen Post-Type und Slug anfügen.
add_filter('body_class', 'pressengers_body_classes');
function pressengers_body_classes($classes) {
global $post;
if(isset($post)) {
$classes[] = $post->post_type .'-'. $post->post_name;
}
return $classes;
}Das Resultat im Quelltext eines Blogposts würde dann zum Beispiel so aussehen:
<body class="single-post postid-1234 post-body-class"> Im CSS kann ich nun die Klasse .post-body-class anlegen und damit alle Elemente innerhalb des Body-Containers ansteuern und abweichend gestalten. Das kann zum beispielsweise eine abweichende Content-Breite, größere h2-Überschriften oder das Ausblenden der Navigation sein, deiner Kreativität sind kaum Grenzen gesetzt. Auch sehr gut geeignet für Landingpages, die vom Standard-Layout deiner Website abweichen sollen.
Mehrere Body-Klassen hinzufügen
Um weitere Klassen in deinen Body einzufügen, ergänzt du deinen Code einfach mit beliebig vielen Zeilen im folgenden Format.
$classes[] = 'erste-klasse';
$classes[] = 'zweite-klasse';Bedingungen für Body-Klassen
Auch die IF-Bedingungen kannst du nach deinen Vorstellungen ergänzen.
if(is_author()) {
$autorname = get_the_author();
$classes[] = $autorname .'ist-der-beste';
} elseif(is_search()) {
$suchbegriff = get_search_query();
$classes[] = 'suche-nach-'. $suchbegriff;
}Body-Klassen entfernen
Du kannst natürlich auch Begriffe aus der Body Class entfernen. Das geht wie folgt.
foreach ( $classes as $key => $value ) {
if($value == 'post-template-default') unset($classes[$key]);
}So einfach geht das
Als angehender Theme-Entwickler wirst du immer wieder den Bedarf haben, bestimmte Elemente mit einer übergeordneten Klasse sauber in deinem CSS ansprechen zu können. Gerade, wenn sich deine Unterseiten gelegentlich unterscheiden sollen, ist dafür die Body Class ein geeignetes und sauberes Mittel.
Nutzt du eigene Body Classes? Welche Raffinessen hast du dir dabei einfallen lassen? Schreib es uns in den Kommentaren!