Ergänzen der WordPress-Body-Klasse

German (Deutsch) translation by Roland Dietz (you can also view the original English article)

In diesem kurzen Tutorial werde ich die Body-Klasse von WordPress vorstellen und zeigen, wie wir sie mit Aufrufen der WordPress-Core-API manipulieren können.

Wir sehen uns an, wie wir der Body-Klasse weitere Klassennamen hinzufügen oder solche von ihr entfernen können und wie wir das Ergänzen der body-Klasse an eine Bedinung knüpfen können. Ergänzend findest du einige Anwendungsbeispiele.

Die Body-Klasse: Wozu kann sie verwendet werden?

Die body-Klasse von WordPress ist eine Klasse - oder eine Folge von Klassen -, die dem HTML-Body-Element zugewiesen werden. Dadurch wird es möglich, unterschiedlichen Bereichen der WordPress-Installation eigene Stile zuzuweisen. Denn die Zuweisung von Klassennamen zum body-Element kann auch in Abhängigkeit vom Zutreffen bestimmter Bedingungen erfolgen.

WordPress kennt einige Standard-Body-Klassen, die in diesem Beitrag vorgestellt werden.

Die Body-Klasse ergänzen

In WordPress stehen uns gleich mehrere Möglichkeiten zur Verfügung, um den Body um weitere Klassennamen zu ergänzen. In diesem Tutorial behandeln wir zunächst die Klassenergänzung innerhalb eines WordPress-Themes (oftmals wird das body-Element in der Datei header.php definiert) mittels der Funktion body_class und anschließend das Hinzufügen von Klassennamen mittels eines Filters.

Theme bearbeiten: einen Wert an die Body-Klasse übergeben

Das ist ein sehr einfacher Weg um die Body-Klasse zu ergänzen und inbesonders dann sinnvoll, wenn Du ohnehin ein eigenes Theme erstellst. Die Body-Klasse wird oftmals mit folgendem Code im Theme eingefügt:

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

Um deinen eigenen Klassennamen hinzuzufügen, übergibst Du der Funktion ein Argument:

<body <?php body_class( 'meine-klasse' ); ?>>

Damit hast du jeder Seite deiner WordPress-Installation die Body-Klasse meine-klasse hinzugefügt.

Dem Body-Element mehrere Klassennamen hinzufügen

Es kann vorkommen, dass du dem Body-Element gleich mehrere Klassennamen hinzufügen möchtest. Das erzielst du durch die Verwendung eines einfachen Arrays:

1	<body <?php body_class( array( "klasse-eins", "klasse-zwei", "klasse-drei" ) ); ?>>

Das Array wird an die Funktion body_class übergeben, die daraufhin jedes einzelne Array-Element zur Body-Klasse hinzufügt.

Bedingtes Hinzufügen eines Body-Klassennamens

Es kann auch vorkommen, dass du das Hinzufügen eines Body-Klassennamens an eine Bedingung knüpfen möchtest. Das ist mit etwas einfachem PHP-Code schnell erledigt. Dieses Beispiel verwendet die bedingte Methode von WooCommerce, is_shop():

<?php if ( is_shop() ) { body_class( 'is-woocommerce-shop' ); } else { body_class(); } ?>

Anmerkung: WooCommerce fügt auf diese Weise bereits selbst eine Klasse hinzu, der Code dient also lediglich als Beispiel.

Zuerst überprüft der obenstehende Code, ob die Funktion "true" zurückgibt. Trifft dies zu, wird der Body-Klasse is-woocommerce-shop hinzugefügt, andernfalls, wenn die Funktion also "false" zurückgibt, wird lediglich die Standard-Body-Klasse ausgegeben.

Einen Body-Klassennamen per Filter hinzufügen

Eine weitere Möglichkeit, die Body-Klasse zu ergänzen, ist die Verwendung eines WordPress-Filters. Die Verwendung dieser Methode hält den Code des Themes sauber und ist vor allem dann praktisch, wenn du die Body-Klasse aus einem Plugin heraus ergänzen willst. Den Code kannst du entweder in der functions.php deines Themes oder direkt innerhalb eines Plugins verwenden.

add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {

    $classes[] = 'klassen-name';

    return $classes;

}

Die Funktion, die hier dem Filter

1	body_class

zugewiesen wird, gibt ein Array zurück, dem zuvor ein Klassenname (oder mehrere Klassennamen, je nach Implementierung) hinzugefügt wurden.

Mehrere Body-Klassennamen per Filter hinzufügen

Um mehrere Klassennamen zum Filter hinzuzufügen, setzt du einfach eine weitere Zeile ein, die das Array um den neuen Wert ergänzt:

add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {

    $classes[] = 'klassen-name';
    $classes[] = 'klassen-name-zwei';

    return $classes;

}

Das Hinzufügen des Body-Klassennamens an eine Bedingung knüpfen

Auch in Filtern können Bedigungen verwendet werden. Wir nutzen das schon zuvor verwendete Beispiel und erzielen den gleichen Effekt:

add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {

    if ( is_shop() ) {

        $classes[] = 'class-name';
        $classes[] = 'class-name-two';

    }

    return $classes;

}

Hinzufügen eines Body-Klassennamens auf Grundlage der Seitenvorlage

Standardmäßig fügt WordPress deiner Seitenvorlage bereits eine Body-Klasse hinzu. Wenn du aber ein Front-End-Entwickler bist und Namenskonvention für dein CSS verwendest, möchtest du die Klassennamen eventuell anpassen.

Beispielsweise würde WordPress einer Seitenvorlage namens „beispiel“ die Body-Klasse page-template-page-beispiel-php zuweisen - nicht gerade schön.

Fügen wir also einen neuen Klassennamen hinzu, indem wir einen Filter und eine Bedingungsabfrage (conditional tag) verwenden, die uns von WordPress zur Verfügung gestellt wird:

add_filter( 'body_class','beispiel_body_class' );
function beispiel_body_class( $classes ) {

    if ( is_page_template( 'page-beispiel.php' ) ) {
        $classes[] = 'beispiel-page';
    }

    return $classes;

}

Dies fügt dem Body den Klassennamen beispiel-page hinzu, wenn die Seitenvorlage page-beispiel.php ausführt wird.

Einen Body-Klassennmamen entfernen

Es ist eher unüblich, einen Body-Klassennamen zu entfernen. Schließlich bist du ja nicht gezwungen, ihn zu verwenden, und er erhöht die Datenmenge nur unwesentlich. Dennoch, auch dies lässt sich durch Verwenden des body_class-Filters erreichen.

add_filter( 'body_class', 'adjust_body_class' );
function adjust_body_class( $classes ) {

    foreach ( $classes as $key => $value ) {
        if ( $value == 'woocommerce-page' ) unset( $classes[ $key ] );
    }

    return $classes;

}

Quellenhinweis: Dieser Code wurde, entsprechend modifiziert, von diesem Artikel übernommen.

In diesem Beispiel durchsuchen wir in einer Schleife ein Array mit Klassennamen und entfernen dabei den Klassennamen woocommerce-page, sofern er im Array existiert. Anschließend geben wir das Array mit den verbliebenen Klassennamen zurück.

Das war's schon!

In diesem kleinen Tutorial haben wir uns zwei Methoden angesehen, mit denen wir der WordPress-Body-Klasse weitere Klassennamen hinzufügen können:

unter der Verwendung der body_class-Funktion innerhalb eines Themes und
unter Verwendung eines Filters.

Wir haben ebenso erfahren, wie das Hinzufügen von Klassennamen mit einer Bedingung verknüpft werden kann und wie wir Klassennamen von der Body-Klasse entfernen können für den Fall, dass du diese Funktionalität tatsächlich benötigst.