Inhaltsverzeichnis
Sie sind 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 zur Abschnitt jeder Seite einer WordPress-Website.
In diesem Artikel werden wir die WordPress-Körperklasse mit Tipps und Tricks für angehende Themendesigner erläutern, damit diese sie in ihren Projekten nutzen können.
Hier ein kurzer Überblick ü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.
Der 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 die Funktion body class bereits im HTML-Body-Tag. Wenn Ihr Theme sie jedoch nicht enthält, können Sie sie hinzufügen, indem Sie den Body-Tag wie folgt ändern:
Veranstaltet mit ❤️ von WPCode1-Klick-Verwendung in WordPress
Je nach Art der Seite, die angezeigt wird, fügt WordPress automatisch die entsprechenden Klassen hinzu.
Wenn Sie sich zum Beispiel auf einer Archivseite befinden, fügt WordPress dem body-Element automatisch die Klasse archive hinzu. Das macht es bei fast jeder 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) {} Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress
Wie Sie sehen, können Sie mit dieser leistungsstarken Ressource Ihre WordPress-Seite mit Hilfe von CSS vollständig anpassen, z. B. spezielle Autorenprofilseiten, datumsbasierte Archive usw.
Schauen wir uns nun an, wie und wann Sie die Körperklasse verwenden können.
Wann wird die WordPress Body Class verwendet?
Zunächst müssen Sie sicherstellen, dass das body-Element Ihres Themes die oben gezeigte Funktion body class enthält. Wenn dies der Fall ist, werden alle oben erwähnten, von WordPress generierten CSS-Klassen automatisch einbezogen.
Danach können Sie dem body-Element auch Ihre eigenen CSS-Klassen hinzufügen, die Sie bei Bedarf einfügen können.
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 derselben Seite stehen.
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[] = 'wpb-class'; // Rückgabe des $classes-Arrays return $classes; } //Nun Testklasse zum Filter hinzufügen add_filter('body_class','my_class_names'); Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress
Der obige Code fügt dem Body-Tag auf jeder Seite Ihrer Website die Klasse "wpb-class" hinzu. Das ist doch nicht so schlimm, oder?
Jetzt können Sie diese CSS-Klasse direkt im Stylesheet Ihres Themes verwenden. Wenn Sie an Ihrer eigenen Website arbeiten, können Sie die CSS auch über die benutzerdefinierte CSS-Funktion im Theme-Customizer hinzufügen.
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 Folgendes besuchen Einstellungen " Benutzerdefinierte Körperklasse 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 beliebige 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 auf , um Ihre benutzerdefinierten CSS-Klassen hinzuzufügen. Sie können mehrere Klassen getrennt durch ein Leerzeichen 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.
Diese bedingten Tags sind wahr oder falsch Datentypen, die prüfen, ob eine Bedingung in WordPress wahr oder falsch ist. z.B. das bedingte Tag ist_zuhause prüft, ob die aktuell angezeigte Seite die Startseite 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.
Angenommen, Sie möchten Ihre Homepage für eingeloggte Benutzer mit der Benutzerrolle Autor anders gestalten. Während WordPress automatisch eine .home und .eingeloggt Klasse, wird die Benutzerrolle nicht erkannt oder als Klasse hinzugefügt.
Dies ist ein Szenario, in dem Sie die bedingten Tags mit etwas benutzerdefiniertem Code verwenden können, um dynamisch eine benutzerdefinierte Klasse zur Body-Klasse hinzuzufügen.
Um dies zu erreichen, fügen Sie den folgenden Code in die Datei functions.php Ihres Themes ein.
function wpb_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', 'wpb_loggedin_user_role_class'); Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress
Schauen wir uns nun ein weiteres nützliches Beispiel an: Diesmal wollen 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'); Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress
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; } Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress
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, damit Sie einen praktischen Satz gebrauchsfertiger Tags für Ihren Code haben.
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
Angenommen, Sie möchten das Erscheinungsbild einzelner Beiträge auf der Grundlage der Kategorie, in der sie abgelegt sind, anpassen. 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 ein:
// Kategorie-Nicenames 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'); Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress
Der obige Code fügt die Kategorieklasse in die Body-Klasse für einzelne Beitragsseiten ein. Sie können dann CSS-Klassen verwenden, um sie 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 Themes 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' ); Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress
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 nun, 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 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'); Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress
Sie können dann Klassen wie verwenden:
.ms-edge .navigation {irgendein Element gehört hierher} Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress
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 body_class-Funktion Ihnen das Schreiben langer Codezeilen ersparen 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.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie die WordPress-Body-Klasse in Ihren Themes verwenden können. Vielleicht möchten Sie auch unseren Artikel darüber lesen, wie Sie jeden WordPress-Beitrag anders gestalten können, und unseren 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.
