WordPress: extra CSS-Regeln pro Seite oder Artikel

7 Kommentare

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 Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Schlagwörter: ,

7 Kommentare

  2. […] This post was mentioned on Twitter by Sergej Müller, Vladimir Simovic, Marc P., Michael Davis, topsy_top20k and others. topsy_top20k said: #WordPress: extra CSS-Regeln pro Seite oder Artikel http://goo.gl/fb/mLJK #wordpressfaq #wordpresstipps […]

  3. […] WordPress: extra CSS-Regeln pro Seite oder Artikel | Peruns Weblog – 08.01.2010 "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." […]

  5. Social comments and analytics for this post…

    This post was mentioned on Twitter by webanhalter: RT @vlad_perun: #WordPress: extra CSS-Regeln pro Seite oder Artikel #wordpressfaq #wordpresstipps http://icio.us/tknjl4…

  6. Also ich ziehe es vor, den loop zu wiederholen. Hat den Vorteil, dass man das innerhalb eines Themes einsetzen kann.

    <body id="style-<?php if (have_posts()) : while (have_posts()) : the_post(); ?><?php the_id(); ?><?php endwhile; endif; ?>">

Kommentare sind geschlossen.