WordPress: extra CSS-Regeln pro Seite oder Artikel

Vor ein paar Tagen habe ich von einer Leserin die Frage bekommen, wie man einer Website, wo WordPress als “klassisches” CMS eingesetzt wird, auf bestimmten Unterseiten zusätzliche bzw. abweichende CSS-Regeln unterbringen kann? Hier gibt es glücklicher Weise mittlerweile mehrere Lösungsansätze.

Den Artikel-Bereich (Loop) ansprechen

Dank des Template-Tags the_ID(); konnte man schon vor WordPress 2.7 die einzelnen Artikel bzw. Seiten gezielt ansprechen, weil z. B. id="post-1711" zur Verfügung stand. Daher konnte man hier in der CSS-Datei mit Hilfe des ID-Selektors #post-1711 {...} zusätzliche CSS-Deklarationen anbringen.

Mit WordPress 2.7 kam noch post_class(); hinzu. Folgendes konnte man dann im Loop unterbringen:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Anschließend bekam man dann bei der Ausgabe im Quelltext eine Tüte voll Klassen-Werte, zum Beispiel:

<div id="post-9" class="post-9 page hentry category-wordpress">

Jetzt konnte man sich den einzelnen Klassen-Wert herauspicken und diesen mit Extra-CSS beglücken. Wobei ich mich hier ernsthaft frage was der Attributs-Wert category-wordpress bei einer Seite (Page) soll? Hier besteht die Gefahr, dass sich die einzelnen CSS-Regeln in die Quere kommen wenn man z. B. für Pages und für Archive zusätzliche Regeln definiert.

Deswegen würde ich, wenn es darum geht einen einzelnen Artikel oder eine bestimmte Seite anzusprechen eher auf die ID zurückzugreifen.

Die komplette Seite ansprechen

Will man außerhalb von Loop arbeiten, dann kann man leider nicht einfach auf the_ID(); zurückgreifen. Aber auch früher gab es Möglichkeiten um abweichende CSS-Regeln unterzubringen. Man konnte einfach sich mit if-Konstrukten im Kopfberech behelfen:

<?php if (is_page()) { echo "<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"...\" />"; } ?>
<?php if (is_page('77')) { echo "..."; } ?>
<?php if (is_page()) { echo "..."; } ?>

Ich weiß, nicht elegant, aber es hat seine Schuldigkeit getan. Eine weitere Möglichkeit, war der Einsatz von Seiten-Templates, siehe auch “1.8 Seiten-Templates” im Artikel WordPress-Themes verstehen 1.

[adrotate group=”4″]

Seit WordPress 2.8 gibt es einen weiteren Template-Tag der hier Abhilfe verspricht: body_class. Einsatz sieht dann folgendermaßen aus: <body <?php body_class(); ?>>. Und auch hier erhält man so ziemliche alle Klassen-Werte, die bei drei nicht auf den Bäumen sind:

<body class="page page-id-1222 page-template page-template-default logged-in">

Wem das zu viel des Guten ist und die Möglichkeit vermisst die ID eines einzelnen Beitrages (egal ob Artikel oder Seite) auch außerhalb des Loops, z. B. im body-Tag der kann auf folgende Lösung zurückgreifen, welche ich auf dieser Website gefunden habe:

// ID außerhalb des Loops
function function_name() {
global $wp_query;
$thePostID = $wp_query->post->ID;
}

das obere Code-Fragment in die functions.php einsetzen und dann folgendes in die passende Template-Datei eintragen:

<body class="seite-<?php echo $post->ID ?>">

Anschließend hat man dann in der Ausgabe folgendes im Quelltext:

<body class="seite-1222">

Wie man sieht führen viele Wege nach ~~Rom~~ Köln. 🙂 Auf welche Lösung man zurückgreift ist nicht zuletzt eine Frage des eigenen Arbeitsstils. Aber besser man hat viele als gar keine Möglichkeit.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.