Die Funktionen “body_class( )” und “post_class( )” fügen automatisch CSS-Klassen in Wordpress ein. Mit den Template Tags lassen sich CSS-Dateien wesentlich effektiver gestalten. Eine nützliche Funktion, man muss nicht mehr überall im Code CSS Klassen vergeben. Dennoch lassen sich weitere Klassen hinzufügen. Beispiele und eine Liste mit allen CSS-Klassen die von Wordpress vergeben werden.
Die Funktion “body_class( )”für die Seitengestaltung, die mit Wordpress Version 2.8 eingeführt wurde, gibt den Elementen automatisch unterschiedliche CSS-Klassen für die Gestaltung der Seite.
Mit “post_class”, die es seit Version 2.7 gibt, werden einzelne Artikel gestaltet, dazu gibt es hier einen gesonderten Beitrag: Post-Class für die CSS-Datei.
“body_class( )” wird in die “header.php” in den HTML-Tag “<body>” eingefügt.
<body <?php body_class(); ?>>
Es werden ein oder mehrere CSS Klassen-Attribute je nach Seiteaufruf automatisch vergeben.
Beispiel einer HTML-Ausgabe:
<body class="page page-id-2 page-template page-template-default logged-in">
In der Wordpress “style.css” kann das entsprechende Design eingefügt werden.
.page {
/* styles für alle posts in der page class */
}
.page-id-2 {
/* style nur für page ID Nummer 2 */
}
.logged-in {
/* styles für alle Seiten wenn ein user angemeldet ist */
Die Standard CSS Klassen
- rtl
- home
- blog
- archive
- date
- search
- paged
- attachment
- error404
- single postid-(id)
- page-id-(page_id)
- attachmentid-(id)
- attachment-(mime-type)
- author
- author-(user_nicename)
- category
- category-(slug)
- tag
- tag-(slug)
- page-parent
- page-child parent-pageid-(id)
- page-template page-template-(template file name)
- search-results
- search-no-results
- logged-in
- paged-(page number)
- single-paged-(page number)
- page-paged-(page number)
- category-paged-(page number)
- tag-paged-(page number)
- date-paged-(page number)
- author-paged-(page number)
- search-paged-(page number)
- tax-(taxonomy name) (seit Version 3.1)
- term-(term name) (seit Version 3.1)
- admin-bar (seit Version 3.1)
Hinzufügen weiterer Klassen
Für weitere Klassen kann der Template Tag erweitert werden.
<body <?php body_class($class); ?>>
Mit dem optionalen Argument “$class” können ein oder mehrere CSS-Klassen zur Klassen-Liste hinzugefügt werden.
Beispiel eine Klasse für eine beliebige Template-Datei:
<body <?php body_class('class-name'); ?>>
Die HTML-Ausgabe:
<body class="class-name post post-id-24">
functions.php
Zusätzliche Klassen können auch über einen Filter in der functions.php definiert werden.
add_filter('body_class','my_class_names');
function my_class_names($classes) {
// add 'class-name' to the $classes array
$classes[] = 'class-name';
return $classes;
}
Beispiel: Hinzufügen der Kategorie-Namen für einzelne Artikel(single post) in der body_class und post_class über die functions.php.
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');
Weitere Informationen:
Wordpress Formatvorlagen Post Formats.