WordPress Body Class 101 Tipps und Tricks für Themendesigner

Durch unsere Erfahrung mit WordPress haben wir festgestellt, dass Designdesigner oft eine bestimmte Funktionalität in Betracht ziehen. Sie suchen nach verrückten WordPress-Filtern und Hooks, um eine Aufgabe zu erledigen, wenn sie nur ein einfaches CSS benötigen. WordPress erzeugt standardmäßig viele CSS-Klassen. (WordPress-CSS-Spickzettel). Eine dieser CSS-Klassen umfasst die Body-Class-Stile. In diesem Artikel werden wir die WordPress-Body-Klasse 101 sowie nützliche Tipps und Tricks für Anfänger von Designdesignern erläutern.

Was ist WordPress Body Class??

Body Class (body_class) ist eine WordPress-Funktion, die dem body-Element verschiedene Klassen gibt, sodass Designautoren ihre Websites mit CSS effektiv gestalten können. HTML-Body-Tag ist meistens in Ihrer header.php-Datei vorhanden, die auf jeder Seite geladen wird. Beim Codieren eines Designs können Sie die body_class-Funktion wie folgt an Ihr body-Element anfügen:

Indem Sie dieses kleine Element hinzufügen, geben Sie sich die Flexibilität, das Erscheinungsbild jeder Seite mithilfe von CSS zu ändern. Je nach Art der geladenen Seite fügt WordPress automatisch die entsprechende Klasse hinzu. Wenn Sie sich beispielsweise auf einer Archivseite befinden, fügt WordPress dem body-Element automatisch eine Archivklasse hinzu, wenn Sie diese verwenden. Das macht es für fast jede Seite. Hier einige Beispiele allgemeiner Klassen, die WordPress hinzufügen könnte:

 .rtl  .home  .blog  .archive  .date  .search  .paged  .attachment  .error404  .einzige postid- (id)  ​​.attachmentid- (id)  .attachment- (Mime-Typ)  .author  .author- (benutzername)  .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- (Seitennummer)  .single-paged- (Seitennummer)  .page-paged- (Seitennummer)  .category-paged- (Seitennummer)  .tag-paged- ( Seitennummer)  .date-paged- (Seitennummer)  .author-paged- (Seitennummer)  .search-paged- (Seitennummer)  

Wie Sie sehen, können Sie Ihre WordPress-Seite durch die Verwendung einer solchen leistungsstarken Ressource vollständig anpassen, indem Sie nur CSS verwenden. Sie können bestimmte Autorenprofilseiten, datumsbasierte Archive usw. anpassen. Wie und wann würden Sie dies verwenden??

So verwenden Sie die WordPress Body Class

In den meisten Fällen ist die WordPress-Body-Klasse die einfache Lösung, die Designdesigner häufig ignorieren. Ja, das schließt uns auch mit ein. Vor etwa einem Jahr mussten wir ein WordPress-Menüelement formatieren, das sich nur auf einer bestimmten Seite befand. Wir haben uns entschieden, einen Filter zu suchen, um den Menüelementen eine spezielle Navigationsklasse hinzuzufügen, die mit einer bedingten Anweisung hinzugefügt werden würde. Wenn es sich beispielsweise um eine einzelne Seite handelt, fügen Sie den Menüelementen die Klasse "Blog" hinzu. Nachdem wir die ganze Zeit damit verbracht hatten, all das herauszufinden und einen Beitrag darüber zu schreiben, wies ein Benutzer darauf hin, dass wir dies mit der vorhandenen Body-Klasse wie folgt hätten tun können:

.single #navigation .leftmenublog div display: inline-block! important;

Beachten Sie: wie die .single-Body-Klasse verwendet wird, die auf allen einzelnen Postseiten hinzugefügt wird.

Junge, haben wir uns danach nicht blöd gefühlt. Seitdem haben wir uns eine Notiz gemacht, um zu sehen, ob man mit der Körperklasse zuerst etwas anfangen kann, bevor man tiefer greift.

Um Ihnen ein anderes Beispiel zu geben. Sobald ein Nutzer auf uns zukam, fragte er nach einer Möglichkeit, das Logo auf seiner Website auf der Kategorieseite zu ändern. Die meisten Themenentwürfe, einschließlich seines, waren das Laden des Logos mit einem CSS (#header .logo). Wir haben vorgeschlagen, wie man die .category-slug body-Klasse verwendet, um sein Logo so zu ändern:

 .category-advice #header .logo hintergrund: url (images / logo-advice.png) no-repeat! important; .category-health #header .logo hintergrund: url (images / logo-health.png) no- wiederhole! wichtig; 

Dieser neue Theme-Designer hatte den gleichen ah-hah-Moment wie wir. Hoffentlich bekommen Sie jetzt einen Eindruck davon, wie Sie Body Class in Ihren Designentwürfen verwenden können. Aber warten Sie, es wird noch leistungsfähiger, da Sie mithilfe eines Filters benutzerdefinierte Body-Klassen hinzufügen können. Lassen Sie uns einen Blick darauf werfen, wie das geht.

So fügen Sie benutzerdefinierte Körperklassen hinzu

WordPress verfügt über einen Filter, mit dem Sie bei Bedarf benutzerdefinierte Body-Klassen hinzufügen können. Wir zeigen Ihnen, wie Sie mithilfe des Filters eine Körperklasse hinzufügen, bevor Sie das jeweilige Anwendungsszenario anzeigen, damit sich alle auf derselben Seite befinden können.

Da Body-Klassen themenspezifisch sind, müssen Sie eine benutzerdefinierte Funktion wie folgt in Ihre Datei "functions.php" schreiben:

 function my_class_names ($ classes) // füge 'class-name' zum $ classes-Array hinzu $ classes [] = 'test-class-name'; // das Array $ classes zurückgeben return $ classes;  // Fügen Sie dem Filter jetzt add_filter hinzu ('body_class', 'my_class_names'); 

Der obige Code fügt dem body-Tag auf jeder Seite Ihrer Website eine Klasse "test-class-name" hinzu. Das ist nicht so schlimm, richtig? Die wahre Stärke dieser Funktion liegt in den bedingten Tags. Sie können sagen, dass Sie die XYZ-Klasse nur auf einzelnen Seiten hinzufügen. Nehmen wir dieses Beispiel und wenden Sie es auf ein reales Anwendungsszenario an.

Hinzufügen von Kategorieklassen zu einzelnen Postseiten

Angenommen, Sie möchten die einzelnen Postseiten jeder Kategorie anpassen. Je nach Art der Anpassung können Sie dafür Body-Klassen verwenden. Nehmen wir zur Vereinfachung an, dass Sie die Hintergrundfarbe der Seite basierend auf der Kategorie der einzelnen Beiträge ändern möchten. Sie können dies tun, indem Sie Ihren einzelnen Postseiten-Ansichten Kategorien hinzufügen. Fügen Sie die folgende Funktion in die Datei functions.php Ihres Themas ein:

 // füge Kategoriename in Body-Klasse hinzu function category_id_class ($ classes) global $ post; foreach ((get_the_category ($ post-> ID)) als $ category) $ classes [] = $ category-> category_nicename; $ Klassen zurückgeben;  add_filter ('body_class', 'category_id_class'); 

Der obige Code fügt die Kategorieklasse in Ihrer Body-Klasse für einzelne Postseiten hinzu. Sie können dann CSS-Klassen verwenden, um es nach Ihren Wünschen zu gestalten.

Fügen Sie in Body Class Ihrer WordPress-Themes Seiten-Slug hinzu

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;  $ -Klassen zurückgeben;  add_filter ('body_class', 'add_slug_body_class'); 

Lesen Sie unseren Artikel zum Seiten-Slug in body class, in dem erläutert wird, warum wir dies brauchten.

Browsererkennung und browserspezifische Körperklassen

Manchmal benötigen Sie spezielle CSS-Stile, damit in bestimmten Browsern alles richtig funktioniert (HINWEIS: Internet Explorer). Nun, Nathan Rice schlug eine sehr coole Lösung vor, die Browserspezifische Klassen zur Body-Klasse hinzufügt, basierend auf dem Browser, von dem aus der Benutzer die Site besucht.

Sie müssen lediglich folgenden Code in Ihre Datei "functions.php" einfügen:

Sie können dann Klassen verwenden wie:

.dh .navigation irgendetwas geht hier

Wenn es sich um ein kleines Polster- oder Randproblem handelt, können Sie das Problem schnell beheben.

Weitere Anwendungsfälle:

Wir können wahrscheinlich viel mehr Anwendungsfälle auflisten, aber ansonsten wird dieser Artikel außer Kontrolle geraten. Der springende Punkt war, den neuen Theme-Entwicklern zu helfen, die Grundlagen der Bodyklasse von WordPress und ihre Vorteile zu verstehen. Die Anwendungsfälle sind auf Ihre Vorstellungskraft beschränkt. Wir haben gesehen, dass Entwickler von kommerziellen Designs (Genesis) Body-Klassen verwenden, um verschiedene Layout-Optionen anzubieten. Zum Beispiel vollständiges Seitenlayout, Inhalt der Seitenleiste, Inhaltsseitenleiste usw. Auf diese Weise kann der Benutzer das Layout seiner Seite problemlos ändern, ohne sich um das Aussehen zu kümmern, da CSS.0 bereits berücksichtigt wurde

Einige Entwickler haben HTTP-Anforderungen hinzugefügt, um CSS-Dateien für verschiedene Farbschemen zu laden, die sie anbieten. In vielen Fällen sind die Änderungen ebenfalls sehr geringfügig. Es hat keinen Sinn, 3 Stylesheets zu laden, wenn der Job ausgeführt werden kann. Verwenden Sie dazu einfach Body Class.

Hoffentlich fanden Sie diesen Artikel hilfreich. Wir würden uns freuen, Ihre Gedanken zu Body Class zu hören, wie Sie es in der Vergangenheit verwendet haben oder dies in der Zukunft planen.