Individuelle CSS Klassen für einzelne WordPress Seiten
Mit dem WordPress Plugin Custom Classes lassen sich individuelle CSS Klassen für einzelne WordPress Seiten, Kategorien und Beiträge festlegen. Damit kannst du bestimmte Seiten deiner WordPress Website gezielt mit CSS ansprechen, um diese anders zu gestalten.
WordPress fügt standardmäßig bereits eine Vielzahl an Klassen im <body> Tag und auch in einzelnen Posts hinzu. Als Erstes solltest du deshalb überprüfen, ob die bestehenden Klassen bereits ausreichend für dein individuelles Styling sind.
Falls nicht, lassen sich zusätzliche CSS Klassen sehr leicht mit Plugins oder auch eigenen Code Schnipseln hinzufügen. Beide Möglichkeiten stelle ich nun vor.
Custom Classes Plugin
Das Plugin kann kostenlos vom WordPress Plugin Verzeichnis heruntergeladen oder direkt im WordPress Backend von dort installiert werden.
Ermöglicht Benutzern das Hinzufügen eigener Klassen für bestimmte Beiträge/Schlagwörter.
Nach Aktivierung des Plugins steht eine neue Metabox Classes im WordPress Backend bereit, mit dem eine Body Class und Post Class festgelegt werden können.
Neben statischen Seiten unterstützt das Plugin auch individuelle CSS Klassen für Beiträge und alle öffentlichen Custom Post Types. Mit Version 1.0.0 können inzwischen auch CSS Klassen für Kategorien, Schlagwörter und Custom Taxonomies festgelegt werden.
Etwas schade ist, dass das Plugin nicht multiple CSS Klassen beherrscht.
Aus Sicherheitsgründen werden eingebene Klassen mit der Funktion sanitize_html_class() validiert. Die Funktion ist aber auf eine Klasse beschränkt, wodurch Leerzeichen als ungültige Charakter entfernt werden. Für mehrere Klassen müsste das Plugin umgestaltet werden.
Unterschied zwischen Body Class und Post Class
Wo werden diese Klassen nun genutzt?
Body Classes werden wie bereits erwähnt im <body> Tag des Themes ausgegeben. Ein sauber programmiertes WordPress Theme führt dazu die body_class() Funktion aus.
<body <?php body_class(); ?>>Dadurch lassen sich alle Elemente der Seite ansprechen – falls du Header, Sidebar oder Footer für eine bestimmte Seite oder Beitrag anders gestalten möchtest, ist eine individiuelle Body Class die richtige Wahl.
Die Post Classes hingegen werden nur für das einzelne Post-Element, d.h. die Seite oder den Beitrag definiert. WordPress Posts sind meistens von einem <article> Tag umschlossen, in welchem die post_class() Funktion aufgerufen wird.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>Post Classes eignen sich also, um Elemente innerhalb der statischen Seite anzusprechen.
Eigene CSS Klassen ohne Plugin hinzufügen
Wer kein Plugin verwenden möchte, kann mit wenigen Zeilen Code die gleichen Filter wie das Plugin nutzen, um eigene CSS Klassen hinzuzufügen. Die folgenden Code Beispiele können in die functions.php eines Child Themes kopiert werden (Alternative: Code Snippets Plugin).
Mit diesem Schnipsel kannst du eine eigene CSS Klasse für die Kontaktseite generieren:
function theme_slug_custom_css_class( $classes ) {
if ( is_page( 'kontakt' ) ) {
$classes[] = 'eigene-klasse';
}
return $classes;
}
add_filter( 'body_class', 'theme_slug_custom_css_class' );Wichtig zu beachten bei der Verwendung des body_class Filters ist, dass bestehende CSS Klassen nicht aus Versehen überschrieben werden. Das Array $classes sollte deshalb mit einem neuen Eintrag erweitert, nicht aber neu deklariert werden.
Damit die CSS Klasse nur auf unserer gewünschten Seite hinzugefügt wird, verwenden wir eine if-Abfrage mit der WordPress Funktion is_page(). Dieser kann sowohl ID als auch Slug / URL der Seite übergeben werden.
Zum Hinzufügen der gleichen CSS Klasse für mehrere statische Seiten kann der Funktion auch ein Array mit Slugs übergeben werden:
if( is_page( array( 'ueber-uns', 'kontakt', 'impressum' ) ) ) {
$classes[] = 'eigene-klasse';
}Für Post Classes kann die gleiche Funktion verwendet werden, hier ändert sich nur der Filter:
add_filter( 'post_class', 'theme_slug_custom_css_class' );Natürlich können die Code Beispiele nach Belieben angepasst werden, um eigene Klassen neben statischen Seiten auch für bestimmte Beiträge, Kategorien oder Schlagwörter festzulegen. Hier hilft der Einsatz der richtigen Conditional Tags in WordPress.
Hallo.
Ich verstehe den Nutzen nicht. Kategorien und Seiten werden von Haus aus mit extra Klassen im body Tag versehen.
Z.B.:
Seiten: page-id-2865
Kategorie-Seite: category-allgemein oder sogar category-1, Kategorien selbst sogar mit archive category etc.
Daher ist das Plugin und eine zusätzliche Funktion in der functions.php aus meiner Sicht nicht notwendig.
Gruss
Hallo Marc,
Du hast natürlich Recht. WordPress fügt standardmäßig bereits eine Menge an Klassen hinzu, welche verwendet werden können. Deshalb habe ich am Anfang des des Beitrags auch erwähnt, dass man überprüfen sollte, ob die bestehenden Klassen bereits ausreichen.
Es gibt aber auch Fälle, in denen die bestehenden Klassen nicht ausreichen.
Ein Beispiel: Für Beiträge in der Einzelansicht soll der Header unterschiedlich gestaltet werden, basierend auf der Kategorie des Beitrags. WordPress fügt die Klasse .category-allgemein zwar als Post Class hinzu, nicht aber im body. Als Body Class steht sie nur direkt auf der Kategorie-Seite zur Verfügung, nicht aber in einem einzelnen Beitrag.
Das Hinzufügen von eigenen CSS Klassen macht ebenfalls Sinn, falls man das Styling nicht an bestimmte Kategorien, Schlagworte oder Page Slugs knüpfen möchte. Werden hier (versehentlich) Änderungen gemacht, ändert sich das Styling, obwohl es vllt gar nicht erwünscht ist.
Viele Grüße,
Thomas