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

Sind Sie ein aufstrebender WordPress-Theme-Designer, der nach neuen Möglichkeiten sucht, CSS in Ihren Themes zu verwenden?

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

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

Hier ist eine kurze Übersicht über das, was Sie in diesem Artikel lernen werden.

Was ist WordPress Body Class?

Body class (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 Themas, die auf jeder Seite geladen wird. Auf diese Weise können Sie dynamisch herausfinden, welche Seite ein Benutzer anzeigt, und dann die CSS-Klassen entsprechend hinzufügen.

Normalerweise enthalten die meisten Starterthemen und Frameworks bereits die Body-Class-Funktion im HTML-Body-Tag. Wenn Ihr Thema es jedoch nicht hat, können Sie es hinzufügen, indem Sie das Body-Tag wie folgt ändern:

>

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

Wenn Sie sich beispielsweise auf einer Archivseite befinden, fügt WordPress dem body-Element automatisch eine Archivklasse hinzu. Das macht es für fast jede Seite.

Verbunden: Sehen Sie, wie WordPress hinter den Kulissen funktioniert (Infografik)

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

.rtl {} .home {} .blog {} .archive {} .date {} .search {} .paged {} .attachment {} .error404 {} .single postid- (id) {} ​​.attachmentid- (id ) {} .attachment- (MIME-Typ) {} .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- (Seitenzahl) {} .page-paged- (Seitenzahl) {} .category-paged- (Seitenzahl) {} .tag-paged- (Seitenzahl) {} .date-paged- (Seitenzahl) {} .author-paged- (Seitenzahl) {} .search-paged- (Seitenzahl) {}

Wie Sie sehen, können Sie mit einer so leistungsstarken Ressource Ihre WordPress-Seite vollständig anpassen, indem Sie nur CSS verwenden. Sie können bestimmte Autorenprofilseiten, datumsbasierte Archive usw. anpassen.

Lassen Sie uns nun einen Blick darauf werfen, wie und wann Sie die Körperklasse verwenden würden.

Wann wird die WordPress Body Class verwendet?

Zunächst müssen Sie sicherstellen, dass das Body-Element Ihres Themas die oben gezeigte Body-Class-Funktion enthält. Wenn dies der Fall ist, werden automatisch alle oben genannten von WordPress generierten CSS-Klassen eingeschlossen.

Danach können Sie dem body-Element auch Ihre eigenen benutzerdefinierten CSS-Klassen hinzufügen. Sie können diese Klassen jederzeit hinzufügen.

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

So fügen Sie benutzerdefinierte Körperklassen hinzu

WordPress verfügt über einen Filter, mit dem Sie bei Bedarf benutzerdefinierte Körperklassen hinzufügen können. Wir zeigen Ihnen, wie Sie mithilfe des Filters eine Körperklasse hinzufügen, bevor wir Ihnen das spezifische Anwendungsfallszenario zeigen, damit sich alle auf derselben Seite befinden können.

Da Body-Klassen themenspezifisch sind, müssen Sie der Datei functions.php Ihres Themas den folgenden Code hinzufügen.

Funktion my_class_names ($ classes) {// füge ‘class-name’ zum $ classes-Array $ classes hinzu[] = ‘wpb-Klasse’; // das Array $ classes zurückgeben return $ classes; } // Füge nun eine Testklasse zum Filter hinzu add_filter (‘body_class’, ‘my_class_names’);

Mit dem obigen Code wird dem Body-Tag auf jeder Seite Ihrer Website eine Klasse “wpb-class” hinzugefügt. Das ist doch nicht so schlimm, oder?

Jetzt können Sie diese CSS-Klasse direkt im Stylesheet Ihres Themas verwenden. Wenn Sie an Ihrer eigenen Website arbeiten, können Sie das CSS auch mithilfe der benutzerdefinierten CSS-Funktion im Design-Customizer hinzufügen.

Hinzufügen von benutzerdefiniertem CSS im Theme Customizer

Hinzufügen einer Körperklasse mit einem WordPress-Plugin

Wenn Sie nicht an einem Client-Projekt arbeiten und keinen Code schreiben möchten, ist diese Methode für Sie einfacher.

Als erstes müssen Sie das Custom Body Class Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung müssen Sie besuchen Einstellungen »Benutzerdefinierte Körperklasse Seite. Von hier aus können Sie die Plugin-Einstellungen konfigurieren.

Benutzerdefinierte Einstellungen für die Körperklasse

Sie können Beitragstypen auswählen, bei denen 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 Beitrag oder eine Seite auf Ihrer WordPress-Site bearbeiten. Auf dem Post-Bearbeitungsbildschirm finden Sie in der rechten Spalte ein neues Meta-Feld mit der Bezeichnung “Post-Klassen”.

Hinzufügen von Körperklassen zu einem Beitrag in WordPress

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

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

Verwenden von bedingten Tags mit der Body-Klasse

Die wahre Kraft der body_class-Funktion kommt, wenn sie mit den bedingten Tags verwendet wird.

Diese bedingten Tags sind wahre oder falsche Datentypen, die prüfen, ob eine Bedingung in WordPress wahr oder falsch ist. Das bedingte Tag is_home prüft beispielsweise, ob die aktuell angezeigte Seite die Startseite ist oder nicht.

Auf diese Weise können Theme-Entwickler überprüfen, ob eine Bedingung wahr oder falsch ist, bevor sie der Funktion body_class eine benutzerdefinierte CSS-Klasse hinzufügen.

Schauen wir uns einige Beispiele für die Verwendung von bedingten Tags an, um der Body-Klasse benutzerdefinierte Klassen hinzuzufügen.

Angenommen, Sie möchten Ihre Homepage für angemeldete Benutzer mit der Benutzerrolle des Autors anders gestalten. Während WordPress automatisch eine .home- und eine .logged-in-Klasse generiert, erkennt es die Benutzerrolle nicht und fügt sie nicht als Klasse hinzu.

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

Um dies zu erreichen, fügen Sie der Datei functions.php Ihres Themas den folgenden Code hinzu.

Funktion wpb_loggedin_user_role_class ($ classes) {// Überprüfen wir, ob es sich um eine Homepage handelt, wenn (is_home ()) {// Überprüfen wir nun, ob der angemeldete Benutzer eine Autorenbenutzerrolle hat. $ user = wp_get_current_user (); if (in_array (‘author’, (array) $ user-> role)) {// Der Benutzer hat die Rolle “author” // Fügen Sie der Body-Klasse $ classes eine Benutzerrolle hinzu[] = ‘Autor’; // Das Klassenarray zurückgeben return $ classes; }} else {// Wenn es sich nicht um eine Homepage handelt, geben Sie einfach Standardklassen zurück. return $ classes; }} add_filter (‘body_class’, ‘wpb_loggedin_user_role_class’);

Schauen wir uns nun ein weiteres nützliches Beispiel an. Dieses Mal 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 benutzerdefinierte CSS-Klasse hinzu.

Funktion add_preview_class ($ classes) {if (is_preview ()) {$ classes[] = ‘Vorschaumodus’; return $ classes; } return $ classes; } add_filter (‘body_class’, ‘add_preview_class’);

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

.preview-mode .site-header: before {content: ‘Vorschau-Modus’; Farbe: #FFF; Hintergrundfarbe: # ff0000; }}

So sah es auf unserer Demo-Site aus:

Benutzerdefinierte CSS-Klasse im Vorschaumodus zur Body-Klasse hinzugefügt

Möglicherweise möchten Sie die vollständige Liste der bedingten Tags überprüfen, die Sie in WordPress verwenden können. Auf diese Weise erhalten Sie einen praktischen Satz gebrauchsfertiger Tags für Ihren Code.

Weitere Beispiele für das dynamische Hinzufügen benutzerdefinierter Körperklassen

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

Hinzufügen von Kategorienamen zur Body-Klasse einer einzelnen Post-Seite

Angenommen, Sie möchten das Erscheinungsbild einzelner Posts basierend auf der Kategorie anpassen, in der sie abgelegt sind. Sie können die Body-Klasse verwenden, um dies zu erreichen

Zunächst müssen Sie Kategorienamen als CSS-Klasse auf einzelnen Postseiten hinzufügen. Fügen Sie dazu der Datei functions.php Ihres Themas den folgenden Code hinzu:

// füge Kategorienamen in der Body-Klassenfunktion hinzu category_id_class ($ classes) {global $ post; foreach ((get_the_category ($ post-> ID)) als $ category) $ classes[] = $ category-> category_nicename; return $ classes; } add_filter (‘body_class’, ‘category_id_class’);

Mit dem obigen Code wird die Kategorieklasse in Ihrer Körperklasse für einzelne Postseiten hinzugefügt. Sie können dann CSS-Klassen verwenden, um es nach Ihren Wünschen zu gestalten.

Hinzufügen eines Seiten-Slugs zur Body-Klasse

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

// Page Slug Body Class Funktion 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’);

Browsererkennung und browserspezifische Körperklassen

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

Die gute Nachricht ist nun, dass WordPress den Browser beim Laden automatisch erkennt und diese Informationen dann vorübergehend als globale Variable speichert.

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 Themas ein:

Funktion wpb_browser_body_class ($ classes) {globales $ 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) $ Klassen[] = ‘iPhone-Safari’; elseif ($ is_chrome) $ Klassen[] = ‘google-chrome’; elseif ($ is_safari) $ Klassen[] = ‘Safari’; elseif ($ is_NS4) $ Klassen[] = ‘netscape’; elseif ($ is_opera) $ Klassen[] = ‘Oper’; elseif ($ is_macIE) $ Klassen[] = ‘mac-ie’; elseif ($ is_winIE) $ Klassen[] = ‘windows-ie’; elseif ($ is_gecko) $ Klassen[] = ‘Firefox’; elseif ($ is_lynx) $ Klassen[] = ‘Luchs’; elseif ($ is_IE) $ Klassen[] = ‘Internet-Explorer’; elseif ($ is_edge) $ Klassen[] = ‘ms-edge’; sonst $ Klassen[] = ‘unbekannt’; return $ classes; } add_filter (‘body_class’, ‘wpb_browser_body_class’);

Sie können dann Klassen verwenden wie:

.ms-edge .navigation {ein Element geht hier}

Wenn es sich um ein kleines Polsterungs- oder Randproblem handelt, ist dies eine ziemlich einfache Möglichkeit, es zu beheben.

Es gibt definitiv noch viele weitere Szenarien, in denen Sie mit der Funktion body_class keine langen Codezeilen schreiben müssen. Wenn Sie beispielsweise ein Themenframework wie Genesis verwenden, können Sie damit Ihrem untergeordneten Thema benutzerdefinierte Klassen hinzufügen.

Mit der Funktion body_class können Sie CSS-Klassen für Seitenlayouts in voller Breite, Seitenleisteninhalte, Kopf- und Fußzeilen usw. hinzufügen.

Wir hoffen, dieser Artikel hat Ihnen geholfen, die Verwendung der WordPress-Body-Klasse in Ihren Themen zu lernen. Vielleicht möchten Sie auch unseren Artikel darüber lesen, wie jeder WordPress-Beitrag anders gestaltet wird, und unseren Vergleich der besten Plugins für den WordPress-Seitenersteller.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.

Comments are closed.