WordPress Body Class 101: Tipps und Tricks für Theme-Designer

Sind Sie ein aufstrebender WordPress-Theme-Designer und suchen nach neuen Möglichkeiten, CSS in Ihren Themes einzusetzen?

Glücklicherweise fügt WordPress automatisch CSS-Klassen hinzu, die Sie in Ihren Themes verwenden können. Mehrere dieser CSS-Klassen werden automatisch zum Abschnitt jeder Seite auf einer WordPress-Site hinzugefügt.

In diesem Artikel werden wir die WordPress-Körperklassen mit Tipps und Tricks für angehende Theme-Designer erklären, um sie in ihren Projekten zu verwenden.

Hier ist ein kurzer Überblick darüber, was Sie in diesem Artikel lernen werden.

Was ist die WordPress-Body-Klasse?

Body-Klasse (body_class) ist eine WordPress-Funktion, mit der Sie dem Body-Element CSS-Klassen zuweisen können.

Das HTML-Body-Tag beginnt normalerweise in der Datei header.php eines Themes, die auf jeder Seite geladen wird. So können Sie dynamisch herausfinden, welche Seite ein Benutzer gerade anschaut und dann die CSS-Klassen entsprechend hinzufügen.

Normalerweise enthalten die meisten Einsteiger-Themes und -Frameworks bereits die Funktion body class innerhalb des HTML-Body-Tags. Wenn Ihr Theme sie jedoch nicht hat, können Sie sie hinzufügen, indem Sie den body-Tag wie folgt ändern:

>

Abhängig von der Art der angezeigten Seite fügt WordPress automatisch die entsprechenden Klassen hinzu.

Wenn Sie sich z. B. auf einer Archiv-Seite befinden, fügt WordPress dem body-Element automatisch die Archiv-Klasse hinzu. Das macht es für so ziemlich jede Seite.

Verwandt: Sehen Sie , wie WordPress hinter den Kulissen arbeitet (Infografik)

Hier sind einige Beispiele für gängige Klassen, die WordPress je nach Seite hinzufügen kann:

.rtl {}
.home {}
.blog {}
.archiv {}
.date {}
.suche {}
.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-(Name der Vorlagendatei) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(Seitenzahl) {}
.single-paged-(Seitennummer) {}
.page-paged-(Seitennummer) {}
.category-paged-(Seitenzahl) {}
.tag-paged-(Seitenzahl) {}
.date-paged-(Seitenzahl) {}
.author-paged-(Seitenzahl) {}
.search-paged-(Seitenzahl) {}

Wie Sie sehen, können Sie mit dieser mächtigen Ressource Ihre WordPress-Seite vollständig anpassen, indem Sie nur CSS verwenden. Sie können spezielle Autorenprofilseiten, datumsbasierte Archive usw. anpassen.

Lassen Sie uns nun einen Blick darauf werfen, wie und wann Sie die Body-Klasse verwenden sollten.

Wann Sie die WordPress-Body-Klasse verwenden sollten

Zunächst müssen Sie sicherstellen, dass das body-Element Ihres Themes die Funktion body class wie oben gezeigt enthält. Wenn dies der Fall ist, wird es automatisch alle oben erwähnten von WordPress generierten CSS-Klassen enthalten.

Danach können Sie auch Ihre eigenen benutzerdefinierten CSS-Klassen zum body-Element hinzufügen. Sie können diese Klassen hinzufügen, wann immer Sie sie benötigen.

Zum Beispiel, wenn Sie das Aussehen von Artikeln eines bestimmten Autors, die unter einer bestimmten Kategorie abgelegt sind, ändern möchten.

So fügen Sie benutzerdefinierte Body-Klassen hinzu

WordPress verfügt über einen Filter, den Sie verwenden können, um bei Bedarf benutzerdefinierte Body-Klassen hinzuzufügen. Wir zeigen Ihnen, wie Sie eine Body-Klasse mithilfe des Filters hinzufügen, bevor wir Ihnen das spezifische Anwendungsszenario zeigen, damit alle auf der gleichen Seite sind.

Da Body-Klassen themenspezifisch sind, müssen Sie den folgenden Code in die Datei functions.php Ihres Themes einfügen.

function my_class_names($classes) {
        // Hinzufügen von 'class-name' zum $classes-Array
        $classes[] = 'wpm-class';
        // Rückgabe des $classes-Arrays
        return $classes;
}

//Nun die Testklasse zum Filter hinzufügen
add_filter('body_class','my_class_names');

Der obige Code fügt dem body-Tag auf jeder Seite Ihrer Website eine Klasse „wpm-class“ hinzu. Das ist doch gar nicht so schlecht, oder?

Nun können Sie diese CSS-Klasse direkt im Stylesheet Ihres Themes verwenden. Wenn Sie an Ihrer eigenen Website arbeiten, können Sie das CSS auch über die benutzerdefinierte CSS-Funktion im Theme-Customizer hinzufügen.

Hinzufügen der Body-Klasse mit einem WordPress-Plugin

Wenn Sie nicht an einem Kundenprojekt arbeiten und keinen Code schreiben wollen, dann ist diese Methode einfacher für Sie.

Als erstes müssen Sie das Plugin “ Custom Body Class “ installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite Einstellungen “ Custom Body Class besuchen. Von hier aus können Sie die Plugin-Einstellungen konfigurieren.

Sie können Beitragstypen auswählen, für die Sie die Body Class-Funktion aktivieren möchten und wer darauf zugreifen kann. Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Als nächstes können Sie einen beliebigen Beitrag oder eine Seite auf Ihrer WordPress-Website bearbeiten. Auf dem Bearbeitungsbildschirm für Beiträge finden Sie in der rechten Spalte ein neues Metafeld mit der Bezeichnung „Beitragsklassen“.

Klicken Sie darauf, um Ihre benutzerdefinierten CSS-Klassen hinzuzufügen. Sie können mehrere Klassen durch ein Leerzeichen getrennt hinzufügen.

Sobald Sie fertig sind, können Sie Ihren Beitrag einfach speichern oder veröffentlichen. Das Plugin fügt nun Ihre benutzerdefinierten CSS-Klassen zur Body-Klasse für diesen bestimmten Beitrag oder diese Seite hinzu.

Verwendung von bedingten Tags mit der Body-Klasse

Die wahre Stärke der body_class-Funktion kommt zum Tragen, wenn sie mit den bedingten Tags verwendet wird.

Diese bedingten Tags sind wahr oder falsch Datentypen, die prüfen, ob eine Bedingung in WordPress wahr oder falsch ist. Zum Beispiel prüft das bedingte Tag is_home, ob die aktuell angezeigte Seite die Homepage ist oder nicht.

Dadurch können Theme-Entwickler prüfen, ob eine Bedingung wahr oder falsch ist, bevor sie eine benutzerdefinierte CSS-Klasse zur body_class-Funktion hinzufügen.

Sehen wir uns einige Beispiele für die Verwendung von bedingten Tags zum Hinzufügen von benutzerdefinierten Klassen zur body-Klasse an.

Nehmen wir an, Sie möchten Ihre Homepage für eingeloggte Benutzer mit der Benutzerrolle“Autor“ anders gestalten. Während WordPress automatisch eine .home- und .logged-in-Klasse generiert, erkennt es die Benutzerrolle nicht und fügt sie nicht als Klasse hinzu.

Dies ist nun ein Szenario, in dem Sie die bedingten Tags mit etwas benutzerdefiniertem Code verwenden können, um der Body-Klasse dynamisch eine benutzerdefinierte Klasse hinzuzufügen.

Um dies zu erreichen, fügen Sie den folgenden Code in die Datei functions.php Ihres Themes ein.

function wpm_loggedin_user_role_class($classes) { 

// prüfen wir, ob es sich um eine Homepage handelt
if ( is_home() ) {

// Prüfen wir nun, ob der eingeloggte Benutzer die Benutzerrolle Autor hat.  
$user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) {
    //Der Benutzer hat die Rolle "Autor"
    // Benutzerrolle zur Body-Klasse hinzufügen
    $classes[] = 'author';
    // Rückgabe des Klassen-Arrays
    return $classes      
} 
} else { 
// wenn es keine Homepage ist, dann einfach Standardklassen zurückgeben
return $classes 
}
} 

add_filter('body_class', 'wpm_loggedin_user_role_class');

Schauen wir uns nun ein weiteres nützliches Beispiel an. Diesmal werden wir prüfen, ob die angezeigte Seite eine Vorschau eines WordPress-Entwurfs ist.

Dazu verwenden wir das bedingte Tag is_preview und fügen dann unsere eigene CSS-Klasse hinzu.

function add_preview_class($classes) { 
if ( is_preview() )  {
$classes[] = 'preview-mode';
return $classes;
}
return $classes 
}
add_filter('body_class','add_preview_class');

Jetzt fügen wir das folgende CSS in das Stylesheet unseres Themes ein, um die neue benutzerdefinierte CSS-Klasse zu verwenden, die wir gerade hinzugefügt haben.

.preview-mode .site-header:before { 
content:'vorschau-modus';
color:#FFF;
background-color:#ff0000;
}

So sah es auf unserer Demo-Seite aus:

Vielleicht möchten Sie sich die vollständige Liste der bedingten Tags ansehen, die Sie in WordPress verwenden können. So erhalten Sie einen praktischen Satz an gebrauchsfertigen Tags für Ihren Code.

Andere Beispiele für das dynamische Hinzufügen von benutzerdefinierten Body-Klassen

Abgesehen von bedingten Tags können Sie auch andere Techniken verwenden, um Informationen aus der WordPress-Datenbank zu holen und benutzerdefinierte CSS-Klassen für die Body-Klasse zu erstellen.

Hinzufügen von Kategorienamen zur Body-Klasse einer einzelnen Beitragsseite

Nehmen wir an, Sie möchten das Erscheinungsbild von einzelnen Beiträgen basierend auf der Kategorie, in der sie abgelegt sind, anpassen. Sie können die Body-Klasse verwenden, um dies zu erreichen

Zuerst müssen Sie die Kategorienamen als CSS-Klasse auf den Seiten mit einzelnen Beiträgen hinzufügen. Fügen Sie dazu den folgenden Code in die Datei functions.php Ihres Themes ein:

// Kategorie-Namen in body-Klasse hinzufügen
function category_id_class($classes) {
    global $post;
    foreach((get_the_category($post->ID)) as $category)
        $classes[] = $category->category_nicename;
    return $classes;
}
 
add_filter('body_class', 'category_id_class');

Der obige Code fügt die Kategorieklasse in Ihre Body-Klasse für einzelne Beitragsseiten ein. Sie können dann CSS-Klassen verwenden, um sie nach Belieben zu gestalten.

Hinzufügen des Seiten-Slugs zur Body-Klasse

Fügen Sie den folgenden Code in die Datei functions.php Ihres Themes ein:

//Seiten-Slug-Body-Klasse
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

Browser-Erkennung und Browser-spezifische Body-Klassen

Manchmal können Sie auf Probleme stoßen, bei denen Ihr Theme zusätzliches CSS für einen bestimmten Browser benötigt.

Die gute Nachricht ist, dass WordPress den Browser beim Laden automatisch erkennt und diese Information dann als globale Variable zwischenspeichert.

Sie müssen nur überprüfen, ob WordPress einen bestimmten Browser erkannt hat, und ihn dann als benutzerdefinierte CSS-Klasse hinzufügen.

Kopieren Sie einfach den folgenden Code und fügen Sie ihn in die Datei „functions.php“ Ihres Themes ein:

function wpm_browser_body_class($classes) { 
        global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;

if ($is_iphone) $classes[] ='iphone-safari';
elseif ($is_chrome) $classes[] ='google-chrome';
elseif ($is_safari) $classes[] ='safari';;
elseif ($is_NS4) $classes[] ='netscape';;
elseif ($is_opera) $classes[] ='opera';;
elseif ($is_macIE) $classes[] ='mac-ie';;
elseif ($is_winIE) $classes[] ='windows-ie';;
elseif ($is_gecko) $classes[] ='firefox';;
elseif ($is_lynx) $classes[] ='lynx';;
elseif ($is_IE) $classes[] ='internet-explorer';;
elseif ($is_edge) $classes[] ='ms-edge';
else $classes[] = 'unbekannt';
        
return $classes;
}
add_filter('body_class','wpm_browser_body_class');

Sie können dann Klassen verwenden wie:

.ms-edge .navigation {some item goes here}

Wenn es sich um ein kleines Padding- oder Margin-Problem handelt, dann ist dies ein ziemlich einfacher Weg, es zu beheben.

Es gibt definitiv noch viele weitere Szenarien, in denen die Verwendung der body_class-Funktion Sie vor dem Schreiben langer Codezeilen bewahren kann. Wenn Sie zum Beispiel ein Theme-Framework wie Genesis verwenden, können Sie damit benutzerdefinierte Klassen in Ihrem Child-Theme hinzufügen.

Sie können die body_class-Funktion verwenden, um CSS-Klassen für Seitenlayouts in voller Breite, Seitenleisteninhalte, Kopf- und Fußzeilen usw. hinzuzufügen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie die WordPress body-Klasse in Ihren Themes verwenden können.