Slug als CSS-Klasse zu BODY hinzufügen

Manchmal möchte man in WordPress CSS-Anweisungen nur für eine bestimmte Seite oder einen bestimmten Beitrag gelten lassen. Üblicherweise ist man dann aber an die von WordPress vergebene ID des Posts gebunden. Es gibt aber eine recht elegante Möglichkeit, wie man das unabhängig von der ID in nahezu jedem Theme verwirklichen kann. Voraussetzung: ein Child-Theme ist installiert!

Serienmäßig fügt WordPress jedem Inhalt eine CSS-Klasse zum BODY-Tag hinzu, in der die ID des Beitrags oder der Seite drinsteht. Somit kann man etwa ins CSS schreiben:

.page-id-1234 p {
        font-size: 1.5em;
}

Somit wird z.b. NUR auf der Seite mit Post-ID 1234 die Schriftgröße auf 1.5em angehoben.

Die Schwäche dieser Variante: wenn man die Seite austauscht (etwa weil man die Kontaktseite überarbeitet hat und unter demselben Link wieder veröffentlicht), ändert sich auch deren ID, somit gelten die vorab festgelegten CSS-Regeln für diese Seite nicht mehr. Abhilfe schafft dieser Code, den man in die Datei functions.php des (Child!)-Themes hinzufügt:

// Slug als CSS-Klasse zu BODY-Tag hinzufügen
function add_slug_body_class( $classes ) {
	global $post;
	if ( isset( $post ) ) {
		$classes[] = $post->post_type . '-' . $post->post_name;
	}
	return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

Damit wird dem BODY-Tag jedes Beitrags, jeder Seite und auch jedem benutzerdefinierten Beitragstyp eine neue Klasse hinzugefügt, die den Beitragstyp und den Slug, also die Kurz-URL des Inhalts enthält. Meine Kontaktseite bekommt also als BODY-Klasse den Wert page-kontakt hinzugefügt. Somit kann man das oben angeführte CSS-Beispiel nun so schreiben:

.page-kontakt p {
        font-size: 1.5em;
}

Die Anweisung gilt nun immer für die Seite (page) mit dem Permalink kontakt, völlig unabhängig davon welche ID diese hat. Das macht die Anweisung stabiler gegen Änderungen auf der Website!

• Über
• Letzte Artikel

Folgen:

Ernst Michalek

Webworker & Panoramafotograf bei Michalek.at

Seit 25 Jahren als Webworker selbständig, seit 2006 auf WordPress spezialisiert. Fotografiert 360°-Panoramen von faszinierenden Orten. Hat 10 Jahre am WIFI Wien unterrichtet und gibt sein Wissen in individuellen Workshops weiter. Interessiert an Wissenschaft, Technik und Forschung und deren Einfluss auf das Zusammenleben von Menschen. Schreibt gern und viel.

Folgen:

Letzte Artikel von Ernst Michalek (Alle anzeigen)

• Slug als CSS-Klasse zu BODY hinzufügen - So. 24.11.2024
• SSL-Erneuerung erforderlich – Spam oder nicht? - Mo. 4.11.2024
• Google Place ID herausfinden – oder: wie man direkt auf die Rezensionen-Eingabemaske verlinken kann! - Sa. 30.3.2024