WordPress Custom Body Class hinzufügen [mit Beispielen]

WordPress: Klasse zum Body hinzufügen

In vielen Fällen sind die automatisch generierten Klassen nicht ausreichend und wir müssen einige benutzerdefinierte Klassen hinzufügen.

Um benutzerdefinierte Klassen hinzuzufügen, verwenden wir den WordPress-Filter:

body_class

Im Folgenden zeigen wir Ihnen Snippets der am häufigsten nachgefragten Beispiele.

Aber zuerst eine kurze Einführung, um Einsteigern mehr über Body Classes zu erklären.

WordPress Custom Body Classes sind etwas, womit sich früher oder später jeder WordPress-Entwickler auseinandersetzen muss.

Ein Plugin dafür zu verwenden, wäre übertrieben, denn in den meisten Fällen brauchen wir nur ein paar Zeilen Code.

Wie fügen wir also WordPress Custom Body Classes hinzu?

WordPress verfügt sowohl über eine body_class-Funktion als auch über einen body_class-Filter (Hook).

Die body_class-Funktion wird in Themes verwendet, um die von WordPress automatisch generierten Klassen zum body-Tag Ihrer Website hinzuzufügen.

So wird sie zur header.php-Datei Ihres Themes hinzugefügt:

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

Je nachdem, welche Seite besucht wird, gibt WordPress bestimmte Klassen aus.

1) Für den standardmäßigen „Hello World

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

2) Die Body-Klassen der Beispielseite sind:

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

3) Die Body-Klassen der Kategorie-Archivseiten sind:

<body class="archive category category-uncategorized category-1 logged-in admin-bar no-sidebar hfeed customize-support">

4) Die Body-Klassen der Autoren-Archivseite sind:

<body class="archive author author-admin author-1 logged-in admin-bar no-sidebar hfeed customize-support">

5) Die Body-Klasse der Startseite (vorausgesetzt, Sie haben eine)

<body class="home blog logged-in admin-bar no-sidebar hfeed customize-support">

Die 5 oben genannten Beispiele sind bei den meisten Standard-Themes üblich, wenn der Admin-Benutzer eingeloggt ist.

Wenn Sie ausgeloggt sind, werden die Klassen leicht abweichen.

Klassen in HTML werden verwendet, um eine Webseite per CSS zu gestalten.

Wenn Sie die folgenden Code-Schnipsel in Ihre functions.php-Datei einfügen, werden neue benutzerdefinierte Body-Klassen im Markup Ihrer Website erscheinen.

Wir werden den body_class-Filter verwenden.

Eine benutzerdefinierte WordPress-Body-Klasse hinzufügen

function my_custom_body_class($classes) {<br />
// add 'my-class' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class');

Dadurch wird die neue Klasse: „my-class

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class customize-support">

Was ist, wenn ich mehr als 1 Klasse hinzufügen muss?

2 oder mehr benutzerdefinierte WordPress-Body-Klassen hinzufügen

function my_custom_body_classes($classes) {<br />
// add 'my-class' and 'my-class-2' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
$classes[] = 'my-class-2';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom classes via body_class filter<br />
add_filter('body_class','my_custom_body_classes');

Dies wird das Ergebnis sein:

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class my-class-2 customize-support">

Was ist, wenn ich eine Body-Klasse nur auf einer bestimmten Seite hinzufügen möchte, auf der wir einen benutzerdefinierten Stil über CSS hinzufügen möchten?

Eine benutzerdefinierte WordPress-Body-Klasse zu einer bestimmten Seite hinzufügen

Dies kann auf verschiedene Arten erfolgen:

1) Eine benutzerdefinierte Body-Klasse mithilfe der Seiten-ID hinzufügen

function my_custom_body_class_id($classes) {<br />
// add 'my-class' only to page with ID 1.<br />
if ( is_page( '1' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_id');

Dies wird das Ergebnis auf der Seite mit der ID 2 sein, während alle anderen Seiten die benutzerdefinierte Klasse nicht haben werden.

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar my-class customize-support">

2) Eine benutzerdefinierte Body-Klasse mithilfe des Seiten-Slugs hinzufügen

function my_custom_body_class_slug($classes) {<br />
// add 'my-class' only to page with slug contact-form.<br />
if ( is_page( 'contact-form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_slug');

Dadurch wird die benutzerdefinierte Klasse „my-class

3) Füge eine benutzerdefinierte Body-Klasse anhand des Seitentitels hinzu

function my_custom_body_class_title($classes) {<br />
// add 'my-class' only to page with title Contact Form.<br />
if ( is_page( 'Contact Form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_title');

Dadurch wird die benutzerdefinierte Klasse „my-class

4) Add a custom body class using the page template

function my_custom_body_class_template($classes) {<br />
// add 'my-class' only to pages using my custom template.<br />
if ( is_page_template( 'my-custom-page-template' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_template');

This will add the custom class “my-class” on the page using the template my-custom-page-template. All other pages will not have the custom class.

We can also add the custom class to a category or tag page, both via ID or category/tag slug.

Adding a WordPress custom body class to a category or tag archive

1) Categories

function my_custom_body_class_category($classes) {<br />
// add 'my-class' only to the my-category archive.<br />
if ( is_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_category');

2) Tags

function my_custom_body_class_tag($classes) {<br />
// add 'my-class' only to the my-tag archive.<br />
if ( is_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_tag');

This will only add the custom body class in the archive page of the category my-category and tag my-tag.

We can also add a custom body class to the single page of every post in the category my-category or with the tag my-tag.

Wir werden die Funktionen in_catgeory und has_tag verwenden.

1) Kategorien (sowohl Archiv- als auch Einzelseite)

function my_custom_body_class_in_category($classes) {<br />
// add 'my-class' to the my-category archive and single posts of the category.<br />
if ( in_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_in_category');

2) Tags (sowohl Archiv- als auch Einzelseite)

function my_custom_body_class_has_tag($classes) {<br />
// add 'my-class' to the my-tag archive and single posts with that tag.<br />
if ( has_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_has_tag');

Diese letzten 2 Beispiele fügen die benutzerdefinierte Klasse sowohl auf der Archivseite als auch auf der Einzelseite hinzu.

Den Kategorienamen als benutzerdefinierte WordPress-Body-Klasse in jedem Beitrag hinzufügen

Wenn Sie den sauberen Kategorienamen als benutzerdefinierte Body-Klasse zu jedem Beitrag hinzufügen möchten, benötigen Sie den folgenden Code-Schnipsel:

function my_custom_body_class_category_in_single($classes) {<br />
     if (is_single() || is_category()) {<br />
       global $post;<br />
       foreach((get_the_category($post->ID)) as $category) {<br />
         $classes[] = $category->category_nicename;<br />
       }<br />
     }<br />
     return $classes;<br />
   }<br />
add_filter('body_class','my_custom_body_class_category_in_single');

Wenn Sie zum Beispiel einen Beitrag der Kategorie „Travel

Eine benutzerdefinierte WordPress-Body-Klasse beim Besuch von einem mobilen Gerät hinzufügen

Dies lässt sich ganz einfach mithilfe der wp_is_mobile Funktion.

function my_custom_body_class_mobile( $classes ) {<br />
    if ( wp_is_mobile() ) {<br />
        $classes[] = 'mobile';<br />
    }<br />
    return $classes;<br />
}<br />
add_filter( 'body_class', 'my_custom_body_class_mobile' );

Benutzerdefinierte Body-Klassen können auch zu 1 oder allen Seiten hinzugefügt werden, die von einem Plugin erstellt wurden (abhängig vom Plugin).

GeoDirectory

GeoDirectory fügt seine benutzerdefinierten Body-Klassen hinzu. Jede GeoDirectory-Seite hat zum Beispiel die Body-Klasse: geodir-page.

Wenn das Erweiterte-Suche- und/oder das Custom-Post-Type-Add-on installiert sind, werden die Klassen: geodir_advance_search und geodir_custom_posts entsprechend hinzugefügt.

Beispiel einer GD-Startseite:

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

Auf Listings-Seiten (Custom Post Type oder Kategorie-Archiv) finden Sie eine andere Klasse für jeden Custom Post Type.

Zum Beispiel wird es bei Places geben post-type-archive-gd_place.

Auf der Detailseite eines Eintrags findest du auch eine andere Klasse für jeden verwendeten Custom Post Type, zum Beispiel bei Orten: single-gd_place.

Es kann jedoch Situationen geben, in denen weitere benutzerdefinierte Body-Klassen benötigt werden. Hier sind einige Beispiele:

1) Eine benutzerdefinierte Body-Klasse zur Standortseite hinzufügen

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_location_custom_body_class');</p>
<p>function gd_location_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('location')) {<br />
$classes[] = 'gd-location';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

dasselbe bedingte Tag

geodir_is_page()

kann für jede GeoDirectory-Seite verwendet werden, zum Beispiel für die Vorschauseite:

2) Eine benutzerdefinierte Body-Klasse zur Eintrags-Vorschauseite hinzufügen

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_preview_custom_body_class');</p>
<p>function gd_preview_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('preview')) {<br />
$classes[] = 'gd-preview';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

3) Eine benutzerdefinierte Body-Klasse hinzufügen für Detailseite für verschiedene Preispakete

 // add extra custom class via body_class filter<br />
add_filter('body_class','gd_price_custom_body_class');<br />
function gd_price_custom_body_class($classes) {<br />
global $post;<br />
if ( $post->package_id == 1) {<br />
$classes[] = 'price-1';<br />
}<br />
elseif ( $post->package_id == 2) {<br />
$classes[] = 'price-2';<br />
}<br />
else {}<br />
// return the modified $classes array<br />
return $classes;<br />
}

4) Füge eine benutzerdefinierte Body-Klasse auf der Suchseite für verschiedene gesuchte CPTs hinzu

add_filter('body_class','gd_search_cpt_custom_body_class');</p>
<p>function gd_search_cpt_custom_body_class($classes) {<br />
if (isset($_GET['stype']) == 'gd_place') {<br />
$classes[] = 'search_gd_place';<br />
}<br />
return $classes;<br />
}

WooCommerce

1) Füge allen WooCommerce-Seiten eine benutzerdefinierte Body-Klasse hinzu

function my_custom_body_class_woo($classes) {<br />
// add 'my-class' to all woocom pages.<br />
if ( is_woocommerce() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo');

2) Füge nur der Shop-Seite eine benutzerdefinierte Body-Klasse hinzu

function my_custom_body_class_woo_shop($classes) {<br />
// add 'my-class' only to the shop page.<br />
if ( is_shop() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_shop');

3) Füge der Produktkategorie-Seite eine benutzerdefinierte Body-Klasse hinzu

function my_custom_body_class_woo_cat($classes) {<br />
// add 'my-class' only to the product category archives.<br />
if ( is_product_category() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat');

4) Füge einer bestimmten Produktkategorie-Seite eine benutzerdefinierte Body-Klasse hinzu

function my_custom_body_class_woo_cat_a($classes) {<br />
// add 'my-class' only to a specific product category archive.<br />
if ( is_product_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat_a');

5) Füge der Produktseite eine benutzerdefinierte Body-Klasse hinzu

function my_custom_body_class_woo_prod($classes) {<br />
// add 'my-class' to product pages.<br />
if ( is_product() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod');

6) Eine benutzerdefinierte Body-Klasse zu einer bestimmten Produktseite hinzufügen

function my_custom_body_class_woo_prod_a($classes) {<br />
// add 'my-class' only to the my-product single page.<br />
if ( is_product( 'my-product' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod_a');

Es gibt zahlreiche weitere WooCommerce-Conditional-Tags, wie z. B.

is_product_tag() für Tag-Archive
is_cart() für die Warenkorbseite
is_checkout() für die Kassenseite
is_account_page() für die Kundenkontoseiten

Alle findest du hier: https://docs.woothemes.com/document/conditional-tags/

WordPress-eigene Body-Klassen zu Seiten hinzufügen, die von anderen Plugins generiert werden

Das Gleiche lässt sich für jedes Plugin tun, das Conditional-Tags anbietet.

Die Conditional-Tags von bbPress findest du zum Beispiel hier: https://codex.bbpress.org/bbpress-conditional-tags/

ein Beispiel?

1) Um ein benutzerdefiniertes Body-Tag zu allen bbPress-Seiten hinzuzufügen, benötigst du Folgendes:

function my_custom_body_class_bbpress($classes) {<br />
// add 'my-class' only to bbpress page.<br />
if ( is_bbpress() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_bbpress');

Conditional-Tags für BuddyPress und die meisten der besten Plugins da draußen findest du ebenfalls.

Body-Klassen entfernen

Während du per Filter etwas hinzufügen kannst, lässt sich auf diese Weise auch etwas entfernen:

function remove_body_class( $classes ) {</p>
<p>foreach ( $classes as $key =&amp;amp;gt; $value ) {<br />
if ( $value == 'my-class' ) unset( $classes[ $key ] );<br />
}</p>
<p>return $classes;</p>
<p>}<br />
add_filter( 'body_class', 'remove_body_class' );

Hast du Probleme damit, Body-Klassen auf deiner WordPress-Website hinzuzufügen oder zu entfernen? Fordere in einem Kommentar unten ein konkretes Beispiel an – ich werde mein Bestes tun, es bereitzustellen!

WordPress Custom Body Class hinzufügen