Wenn Sie ein aufstrebender Designer von WordPress-Themes sind, ist die Beherrschung von CSS der Schlüssel zu mehr Kontrolle, individueller Anpassung und Effizienz in Ihrem Arbeitsablauf.
Glücklicherweise fügt WordPress automatisch CSS-Klassen hinzu, die Sie in Ihren Themes verwenden können. Mehrere dieser CSS-Klassen werden automatisch in den <body>-Abschnitt jeder Seite einer WordPress-Website eingefügt.
In diesem Artikel erklären wir die WordPress-Body-Klasse. Außerdem verraten wir Ihnen Tipps und Tricks zur Verwendung von WordPress Body-Klassen, die auf jahrelanger Erfahrung in der Entwicklung von Themes basieren und Ihnen helfen, Ihre Projekte zu verbessern.
Hier ein kurzer Überblick über das, was Sie in diesem Artikel lernen werden.
- What is WordPress Body Class?
- When to Use the WordPress Body Class
- How to Add Custom Body Classes
- Adding Body Class Using a WordPress Plugin
- Using Conditional Tags with the Body Class
- Other Examples of Dynamically Adding Custom Body Classes
- Browser Detection and Browser Specific Body Classes
- Expert Guides on WordPress Theme Design
Was ist WordPress Body Class?
Body class (body_class) ist eine WordPress-Funktion, mit der Sie dem body-Element CSS-Klassen zuweisen können.
Der 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 Nutzer gerade anschaut, und dann die CSS-Klassen entsprechend hinzufügen.
Normalerweise enthalten die meisten Themes und Frameworks die Funktion body class bereits im HTML-Schlagwort body. Wenn Ihr Theme jedoch nicht über diese Funktion verfügt, können Sie sie hinzufügen, indem Sie das Schlagwort body wie folgt ändern:
<body <?php body_class($class); ?>>
Je nach Art der Seite, die angezeigt wird, fügt WordPress automatisch die entsprechenden Klassen hinzu.
Wenn Sie sich beispielsweise auf einer Seite mit einem Archiv befinden, fügt WordPress dem Body-Element automatisch die Klasse Archiv hinzu. Das macht es für so ziemlich jede Seite.
Verwandt: 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-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) {}
Wie Sie sehen, können Sie mit dieser leistungsstarken Ressource Ihre WordPress-Seite allein mit CSS vollständig anpassen. Sie können spezielle Autorenprofilseiten, datumsbasierte Archive usw. anpassen.
Schauen wir uns nun an, wie und wann Sie die Körperklasse verwenden können.
Wann wird die WordPress Body-Klasse verwendet?
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, werden alle oben genannten, von WordPress generierten CSS-Klassen automatisch einbezogen.
Danach können Sie dem body-Element auch Ihre eigenen CSS-Klassen hinzufügen. Sie können diese Klassen hinzufügen, wann immer Sie sie benötigen.
Zum Beispiel, wenn Sie das Erscheinungsbild von Artikeln eines bestimmten Autors, die unter einer bestimmten Kategorie abgelegt sind, ändern möchten.
Hinzufügen von benutzerdefinierten Body-Klassen
WordPress verfügt über einen Filter, mit dem Sie bei Bedarf benutzerdefinierte Body-Klassen hinzufügen können. 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 oder in ein Code-Snippets-Plugin einfügen.
function my_class_names($classes) {
// add 'class-name' to the $classes array
$classes[] = 'wpb-class';
// return the $classes array
return $classes;
}
//Now add test class to the filter
add_filter('body_class','my_class_names');
Der obige Code fügt dem Body-Tag auf jeder Seite Ihrer Website die Klasse „wpb-class“ hinzu.
Wir empfehlen das Hinzufügen dieses Codes mit WPCode, dem besten Code Snippets Plugin auf dem Markt. Es macht es sicher und einfach, benutzerdefinierten Code in WordPress hinzuzufügen, ohne die functions.php-Datei Ihres Themes zu bearbeiten.
Zunächst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Wenn Sie eine Anleitung benötigen, lesen Sie unseren Leitfaden zur Installation eines WordPress-Plugins.
Sobald das Plugin aktiviert ist, gehen Sie in Ihrem WordPress-Dashboard auf Code Snippets „ Snippet hinzufügen. Suchen Sie dann die Option „Eigenen Code hinzufügen (neues Snippet)“ und klicken Sie auf die Schaltfläche „Snippet verwenden“ darunter.
Dort müssen Sie aus der Liste der Optionen, die auf der Ansicht erscheint, „PHP Snippet“ als Codetyp auswählen.
Fügen Sie dann einen Titel für Ihr Snippet hinzu und fügen Sie den Code von oben in die Box „Codevorschau“ ein.
Danach schalten Sie einfach den Schalter von „Inaktiv“ auf „Aktiv“ um und klicken auf die Schaltfläche „Snippet speichern“.
Jetzt 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 WordPress-Theme-Customizer hinzufügen.
Weitere Einzelheiten finden Sie in unserer Anleitung zum einfachen Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Website.
Hinzufügen der Körperklasse mit einem WordPress-Plugin
Wenn Sie nicht an einem Kundenprojekt arbeiten und keinen Code schreiben wollen, dann ist diese Methode für Sie einfacher.
Als Erstes müssen Sie das Plugin Custom Body Class installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Seite Einstellungen “ Benutzerdefinierte Körperklasse aufrufen. Von hier aus können Sie die Plugin-Einstellungen konfigurieren.
Sie können die Beitragstypen auswählen, für die Sie die Körperklassenfunktion aktivieren möchten, und festlegen, wer darauf zugreifen darf. 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 den Beitrag finden Sie in der rechten Spalte ein neues Metafeld mit der Bezeichnung „Beitragsklassen“.
Klicken Sie auf , 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 eigentliche Stärke der Funktion body_class kommt zum Tragen, wenn sie mit den bedingten Tags verwendet wird.
Bei diesen bedingten Tags handelt es sich um true- oder false-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 Homepage ist oder nicht.
So 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 an, um der Body-Klasse benutzerdefinierte Klassen hinzuzufügen.
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 erzeugt, wird die Benutzerrolle nicht erkannt und nicht als Klasse hinzugefügt.
Dies ist 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 oder in das Code Snippets Plugin ein.
function wpb_loggedin_user_role_class($classes) {
// let's check if it is homepage
if ( is_home() ) {
// Now let's check if the logged in user has author user role.
$user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) {
//The user has the "author" role
// Add user role to the body class
$classes[] = 'author';
// Return the classes array
return $classes;
}
} else {
// if it is not homepage, then just return default classes
return $classes;
}
}
add_filter('body_class', 'wpb_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 benutzerdefinierte 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');
Nun 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:'preview mode';
color:#FFF;
background-color:#ff0000;
}
So sah es auf unserer Demo-Website aus:
Sie sollten sich die vollständige Liste der bedingten Tags ansehen, die Sie in WordPress verwenden können. So erhalten Sie einen praktischen Satz gebrauchsfertiger Tags für Ihren Code.
Andere Beispiele für das dynamische Hinzufügen benutzerdefinierter Body-Klassen
Abgesehen von 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 Beitragsseite
Nehmen wir an, Sie möchten das Erscheinungsbild einzelner Beiträge an die Kategorie anpassen, in der sie abgelegt sind. Dazu können Sie die Klasse body verwenden
Zunächst müssen Sie die Kategorienamen als CSS-Klassen auf den Seiten der einzelnen Beiträge hinzufügen. Fügen Sie dazu den folgenden Code in die Datei functions.php Ihres Themes oder in ein Code-Snippets-Plugin wie WPCode ein:
// add category nicenames in body class
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 eines Seiten-Slugs zur Body-Klasse
Fügen Sie den folgenden Code in die Datei functions.php Ihres Themes oder in ein Code Snippets Plugin ein:
//Page Slug Body Class
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' );
Auch hier empfehlen wir, diesen Code in WordPress mit einem Code-Snippets-Plugin wie WPCode einzufügen. Auf diese Weise müssen Sie nicht befürchten, dass Ihre Website kaputt geht.
Installieren und aktivieren Sie zunächst das kostenlose WPCode-Plugin. Wenn Sie Hilfe benötigen, folgen Sie dieser Anleitung zur Installation eines WordPress-Plugins.
Sobald das Plugin aktiviert ist, gehen Sie im WordPress-Dashboard zu Code Snippets „ Snippet hinzufügen. Klicken Sie dann auf die Schaltfläche „Snippet verwenden“ unterhalb der Option „Eigenen Code hinzufügen (neues Snippet)“.
Wählen Sie dann als Codetyp „PHP Snippet“ aus.
Fügen Sie dann einfach einen Titel für Ihr Codeschnipsel hinzu und fügen Sie den Code von oben in die Box „Codevorschau“ ein.
Schalten Sie abschließend den Schalter von „Inaktiv“ auf „Aktiv“ um und klicken Sie auf die Schaltfläche „Snippet speichern“.
Browser-Erkennung und Browser-spezifische Body-Klassen
Manchmal kann es vorkommen, dass Ihr Thema zusätzliche CSS für einen bestimmten Browser benötigt.
Die gute Nachricht ist, dass WordPress den Browser beim Laden automatisch erkennt und diese Information als globale Variable zwischenlagert.
Sie müssen nur prü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 oder in das Code Snippets Plugin ein:
function wpb_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[] = 'unknown';
return $classes;
}
add_filter('body_class','wpb_browser_body_class');
Sie können dann Klassen wie verwenden:
.ms-edge .navigation {some item goes here}
Wenn es sich um ein kleines Problem mit der Auffüllung oder dem Rand handelt, lässt es sich auf diese Weise recht einfach beheben.
Es gibt sicherlich 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 Ihr Child-Theme einfügen.
Mit der Funktion body_class können Sie CSS-Klassen für Seitenlayouts über die gesamte Breite, Seitenleisteninhalte, Kopf- und Fußzeilen usw. hinzufügen.
Experten-Leitfäden für WordPress Theme-Design
Suchen Sie nach weiteren Anleitungen? Sehen Sie sich unsere anderen Leitfäden zum Thema Theme-Design in WordPress an:
- Hinzufügen eines Parallaxen-Effekts zu einem beliebigen WordPress Theme
- Wie man den Footer in WordPress bearbeitet (4 Möglichkeiten)
- Hinzufügen von fallenden Schneeflocken in Ihrem WordPress Blog
- Wie man ein WordPress Theme aktualisiert, ohne die individuelle Anpassung zu verlieren
- Wie man Feedback zum Website-Design in WordPress erhält
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie die WordPress Body-Klasse in Ihren Themes verwenden können. Vielleicht interessiert Sie auch unser Artikel darüber, wie Sie jeden WordPress-Beitrag anders gestalten können, und unser Vergleich der besten WordPress-Page-Builder-Plugins.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
jenny
plsss give me example outwitting a crocodile theme plsssssssss
Corrinda
Thank you after reading a number of articles regarding the body-class this is the one the finally sunk in.
Got it working on individual pages and on category pages this is great. The use cases are what made the difference for me.
Editorial Staff
Sweet. Glad to be able to help.
Admin
Yolanda
Great tips! I’m trying to figure out how to add the menu class (the one you can enter in the admin) to body_class:
[pre]
/** Add nav menu css class to body class */
function add_nav_menu_css( $classes ) {
$classes[] = ‚menu-class-from-admin‘;
return $classes;
}
add_filter( ‚body_class‘, ‚add_nav_menu_css‘ );
[/pre]
Seth Burleigh
Great tips. I“m trying to do this, and when inserting „page-template page-template-(template file name)“ into my header file such that I have:
<body >
And I then modify my CSS to include: .page-template-home_corechella
I am left with a completely blank page. Nothing. What am I doing wrong? Thanks!
Editorial Staff
The page-templates are added in the homepage automatically as long as you have the body_class tags. Would have to see the file to see what you are doing wrong. Use a third party service like pastebin, and then paste the link here.
Admin
Seth
Ok, thank you very much!
I’ve changed the approach slightly since my post (now using instead of page template), but a similar problem is happening – the correct body CSS (body.corechella) is not showing. The original body class is taking priority.
Corechella Page template (http://dev.corebaby.org/corechella-home/) – http://pastebin.com/embed_js.php?i=8L6rhESr
Corechella header.php file – http://pastebin.com/embed_js.php?i=n2Sn4jUJ
CSS (the new body class is at the very bottom) – http://pastebin.com/embed_js.php?i=4U6d09cQ“
Seth
Editorial Staff
In your header.php, you have to keep the body class like this:
1-click Use in WordPress
In your CSS, just use .corchella instead of body.corchella
Michael
Great write up, thanks
Editorial Staff
Glad you found it helpful
Admin
Rasha
i have news page that get posts using category.php , i want to give it specific class so i can make the content wide and without the sidebar , how i can do that ?
Vajrasar
Indeed a good writeup and very informative. Just a question – For example if I add Browser Specific Body Class today and after few days I need to apply Page Class in Body Slug. Then will the settings/css that I did with Browser Specific Body class will get ruined or not?
Editorial Staff
No it will not get ruined. It can be overridden depending on how your CSS is written.
Admin