Neue Funktion body_class() in WordPress 2.8

23. Juni 2009 - WordPress Funktionen - kein Kommentar

Neue Funktion body_class() in WordPress 2.8

Ab der WordPress-Version 2.8 haben wir die Möglichkeit, die Funktion body_class zu nutzen. Diese gibt dem Body-Tag eine Reihe von CSS-Klassen mit, die ziemlich genau bestimmen, wer sich wo und wie auf einer Website befindet. Damit öffnet sich der inhaltsabhänigen CSS-Formatierung Tür und Tor.

Ähnlich der Funktion post_class(), die in WordPress 2.7 hinzugekommen ist, bestimmt die Funktion body_class(), ob man sich gerade in einer Kategorie und wenn in welcher befindet, ob es sich um eine Post-Einzelansicht handelt, ob ein User eingeloggt ist oder auf welcher Seitennummer man sich bewegt und vieles mehr.

body_class() anwenden

Der Einsatz der Funktion ist denkbar einfach. Wir müssen diese lediglich dem Body-Tag hinzufügen, der sich bei den meisten Themes in der header.php befindet:

<body <?php body_class(); ?>>

Möchten wir die Kompatibilität unseres Themes auch auf Installationen unter WordPress 2.8 sichern, müssen wir zunächst abfragen, ob die Funktion überhaupt existiert. Wenn ja, kann diese zum Einsatz kommen:

<body <?php if(function_exists('body_class')) body_class(); ?>>

Haben wir unser Theme auf diese Art erweitert, sind wir auch schon fertig und können uns an die Formatierung mit CSS machen.

Ausgabe von body_class()

Wie schon angeprochen, generiert diese Funktion body_class() eine Reihe von CSS-Klassen, die uns möglichst viele Informationen darüber liefert, wo man sich auf einer Website befindet.

Beispiele:

Wir befinden uns auf der Startseite, die auch gleichzeitig unsere Blog-Startseite ist.

<body class='home blog'>

Wir befinden uns auf einer Kategorie-Archivseite der Kategorie ‘Uncategorized’.

<body class='archive category category-uncategorized'>

Wie befinden uns auf der Seite mit der ID 2.

<body class='page page-id-2'>

Wir befinden uns in der Post-Einzelansicht des Posts mit der ID 11.

<body class='single postid-11'>

Wir befinden uns im Autorenarchiv des Autors ‘Admin’.

<body class='archive author author-admin'>

Eine komplette Liste der möglichen Klassen hat das Team von WP Engineer zusammengestellt:

  • rtl
  • home
  • blog
  • archive
  • date
  • search
  • paged
  • attachment
  • error404
  • single postid-(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)

Formatierung der Body-Klassen in CSS

Im HTML-Gerüst einer jeden Website umschließt der Body-Tag immer alle Elemente unseres Layouts. Vor ihm findet keine Ausgabe im Quelltext für das Frontend statt. Das heißt, dass wir mit verschachtelten CSS-Klassen jedes Element auf unserer Website ansprechen und mit den Body-Klassen formatieren können.

Beispiele:

Wir möchten NUR auf der Startseite eine andere Hintergrundfarbe.

body {
        color: #fff;
}
body.home {
        color: #eee;
}

Wir möchten die Überschriften der Kategorie ‘Uncategorized’ nicht in Schwarz sondern in Rot anzeigen.

h2.post-title {
        color: #101010;
}
body.category-uncategorized h2.post-title {
        color: #ff0000;
}

Ich habe hier jetzt relativ einfache Beispiele gewählt. Die Möglichkeiten, die wir mit der body_class-Funktion bekommen, sind jedoch sehr vielfältig. So können wir mit CSS das Layout beeinflussen und bspw. für eine bestimmte Kategorie den Inhaltsbereich größer darstellen und die Sidebar verschwinden lassen. Oder man kann it der Klasse logged-in einem eingeloggten Benutzer eine andere Formatierung anzeigen lassen als nicht eingeloggten. U.v.m.

Ihr seht, mit etwas Kreativität kann man einen sehr umfangreichen Gebrauch dieser Funktion machen.

Fazit

Diese unscheinbare Funktion body_class() hat es also faustdick hinter den Ohren und macht einen weiteren wichtigen Schritt von WordPress in Richtung vollwertiges CMS. WordPress Theme-Entwickler und -Nutzer haben nun auf einfache Weise weitaus mehr Möglichkeiten, verschiedene Bereiche individuell zu formatieren und gestalten.

Relevante Links

Autor

Moin, ich bin Simon und ehemaliger Betreiber dieses Blogs.

RSS abonnieren

und so weiter...

Deine Meinung