CSS Klassen mit “body_class” in Wordpress

wp_logoDie 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:

Post Class für die CSS-Datei.

Wordpress Formatvorlagen Post Formats.

Index.php erstellen.

Sidebar oder Footer Widget in Wordpress erstellen.

Favicon erstellen und in Wordpress einfügen.