Zurück zu den Grundlagen mit WordPress CSS: Native Klassen verstehen

Der folgende Beitrag ist ein Gastbeitrag von Karol K. Karol schreibt im Namen von ThemeIsle.com, einem Anbieter von WordPress-Themes. Er hat mir diesen Beitrag angeboten und die Idee gefiel mir. Ich bin die Art von Front-End-Entwickler, die Dinge gerne auf ihre eigene Art machen und das verwendete Tool dazu zwingen. Das hat durchaus Vorteile, aber nur bis zu einem gewissen Punkt. Stundenlanges Streiten über philosophische Unterschiede bei der Namensgebung lohnt sich normalerweise nicht. In WordPress kann man fast alles erzwingen, aber die Standardeinstellungen sind in der Regel ziemlich gut, und wenn man sich auf das System einlässt, wird es einfacher. Das ist es, was Karol hier mit CSS und WordPress vorschlägt.

Das Erstellen einer Website auf WordPress ist eine einzigartige Erfahrung. Einerseits erhalten Sie sofort eine Menge Funktionalität. Andererseits erwartet WordPress oft, dass Sie bestimmte Strukturen für die Anzeige von Inhalten verwenden, um diese Funktionalität zu nutzen.

Einige dieser Strukturen werden von WordPress automatisch verwendet, unabhängig davon, wie Sie Ihr Design erstellt haben (z. B. sind alle Menüs <ul>, ob es Ihnen gefällt oder nicht), während andere dank benutzerdefiniertem PHP, WordPress-Action-Hooks und anderen Tricks, die Sie verwenden können, stärker unter Ihrer Kontrolle sind. Obwohl die Plattform keine vielen Einschränkungen auferlegt, müssen Sie sich dennoch der grundlegendsten Merkmale bewusst sein, wenn Sie möchten, dass Ihre Inhalte korrekt angezeigt werden.

In diesem Leitfaden werfen wir einen kurzen Blick auf die absolut minimale Menge an CSS, die Sie beim Erstellen einer WordPress-Website berücksichtigen müssen.

Das meine ich damit. Wir alle haben unsere bevorzugten HTML- und CSS-Strukturen und generell unsere Art zu codieren. Ich sage Ihnen nicht, was richtig und was falsch ist. Stattdessen möchte ich die Klassen auflisten, die WordPress ausgibt, **unabhängig davon**, was Sie möglicherweise selbst tun. Kurz gesagt, Sie können gerne jede gewünschte Struktur für das Gerüst Ihrer Website verwenden. Achten Sie jedoch **auch** auf die standardmäßigen WordPress-Klassen, um sicherzustellen, dass Ihr CSS so WordPress-optimiert wie möglich ist.

Ein fortgeschrittener WordPress-Entwickler mag anmerken, dass WordPress extrem anpassbar ist und es möglich ist, diese Standardklassen zu ändern, aber wir werden hier nicht darauf eingehen.

Es ist viel einfacher zu erklären, was ich meine, wenn wir uns das erste Beispiel ansehen – das spricht das sehr native Element in WordPress an

Es wird einfacher zu verstehen sein, was ich meine, wenn wir uns ein Beispiel ansehen. Betrachten wir also das allseits beliebte Widget.

Widgets stylen

Es wäre schwer vorstellbar, eine WordPress-Website ohne Widgets zu haben. Seit ihrer Einführung sind Widgets auf einer Vielzahl von Websites beliebt. Ihr Zweck ist es im Allgemeinen, sekundäre Inhalte neben Beiträgen und Seiten anzuzeigen, oft in Seitenleisten.

WordPress wird mit einer Handvoll Widgets direkt ausgeliefert, und viele Plugins fügen ihre eigenen hinzu. Zum Zeitpunkt des Schreibens umfasst die Standardauswahl: Archive, Kalender, Kategorien, Benutzerdefiniertes Menü, Meta, Seiten, Neueste Kommentare, Neueste Beiträge, RSS, Suche, Tag-Wolke, Text.

Jedes dieser Widgets verfügt über eine eigene Reihe von CSS-Klassen, die bei Verwendung eines bestimmten Widgets enthalten sind.

Die Klassen, die WordPress allen Widget-Elementen zuweist (unabhängig vom Widget-Typ), sind

.widget {} /* top level class for every widget */
.widget-title {} /* usually on the inner header element */

Dann können, basierend auf dem Widget-Typ, beliebige dieser Klassen verwendet werden

/* Archives */
.widget_archive {} /* used next to .widget (on the same tag) */

/* Calendar */
.widget_calendar {} /* used next to .widget (on the same tag) */
#calendar_wrap {} /* on <div> wrapping the calendar */
#wp-calendar {} /* on <table> building the calendar */

/* Categories */
.widget_categories {} /* used next to .widget (on the same tag) */
.cat-item {} /* on each item in the <ul> list */

/* Custom Menu */
.widget_nav_menu {} /* used next to .widget (on the same tag) */
.menu-item {}

/* Meta */
.widget_meta {} /* used next to .widget (on the same tag) */

/* Pages */
.widget_pages {} /* used next to .widget (on the same tag) */
.page_item {}

/* Recent Comments */
.widget_recent_comments {} /* used next to .widget (on the same tag) */
.recentcomments {} /* on each item in the <ul> list */

/* Recent Posts */
.widget_recent_entries {} /* used next to .widget (on the same tag) */

/* RSS */
.widget_rss {} /* used next to .widget (on the same tag) */
.rsswidget {} /* on each RSS link */

/* Search */
.widget_search {} /* used next to .widget (on the same tag) */
.search-form {} /* used with the actual <form> element */

/* Tag Cloud */
.widget_tag_cloud {} /* used next to .widget (on the same tag) */
.tagcloud {} /* on the <div> wrapping the cloud */

/* Text */
.widget_text {} /* used next to .widget (on the same tag) */
.textwidget {} /* on the actual text content of the widget */

Der beste Ausgangspunkt wäre, zuerst die Klasse .widget selbst zu stylen und sicherzustellen, dass der Haupt-Widget-Block immer korrekt angezeigt wird. Gehen Sie dann nach Bedarf zum Stylen der einzelnen Klassen über. So machen wir es immer.

Die Arbeit mit diesen Standardeinstellungen kann eine schnellere Methode zum Erstellen eines Designs sein, verglichen mit der Entwicklung Ihrer eigenen Methode zum Umwickeln bestimmter Elemente. Als Nebenprodukt stellen Sie auch sicher, dass der Website-Administrator nichts Merkwürdiges sieht, wenn er versucht, diese nativen Widgets zu verwenden.

Um zu überprüfen, wie die tatsächliche HTML-Dokumentstruktur aussieht, ermutige ich Sie, eine Test-WordPress-Site mit dem Standard-Theme einzurichten, alle Widgets in die Seitenleiste zu legen und den HTML-Quelltext zu untersuchen.

Das <body> stylen

WordPress ist wirklich großzügig, wenn es darum geht, verschiedene Klassen zum <body>-Tag hinzuzufügen. Sie alle haben unterschiedliche Zwecke und werden auf verschiedenen Unterseiten der Website angezeigt. Dies ermöglicht Ihnen, benutzerdefinierte Stile für verschiedene Seiten und Seitentypen einfach einzuführen. Zum Beispiel: Kategorie-Archive, Beiträge und Autorenseiten, um nur einige zu nennen.

Nehmen wir es von oben

.home {} /* if it's the homepage */
.page {} /* if it's any page */
.postid-XX {} /* if it's a post - XX is the post's ID */
.rtl {} /* when dealing with right-to-left content */
.blog {} /* if it's the custom blog listing */
.archive {} /* if it's any sort of archive page */
.category {} /* if it's a categories listing page */
.tag {} /* if it's a tags listing page */
.search .search-results {} /* if it's a search results page */
.author {} /* if it's an authors page */
.author-XX {} /* if it's an individual author's archive - XX is the author's nickname */
.date {} /* if it's a date-based archives page */
.error404 {} /* if it's a 404 page */

Das Obige ist keine vollständige Liste der Klassen, aber es sollte ausreichen, um Ihnen den Einstieg zu erleichtern und alle Grundlagen abzudecken.

Beiträge und Seiten stylen

Obwohl Beiträge und Seiten je nach Website unterschiedliche Zwecke haben, behandelt WordPress sie sehr ähnlich. Sowohl die Beiträge als auch die Seiten werden in derselben Tabelle in der Datenbank gespeichert, und sie teilen sich auch dieselbe allgemeine Struktur, wenn es darum geht, sie auf der Website anzuzeigen.

Je nachdem, ob Sie es mit einem Beitrag oder einer Seite zu tun haben, weist WordPress der Hauptinhalts-Tag (die im HTML5 normalerweise <article> ist) die folgenden Klassen zu.

.post-XX {} /* the ID of the element being displayed; used for both the posts and the pages */
.post {} /* if it's a post */
.page {} /* if it's a page */
.attachment {} /* if it's an attachment; on most sites this is not used */
.sticky {} /* if it's a sticky post */
.format-YY {} /* assigned to custom content types - YY is the name of the content type, e.g. "audio" */

Der wichtige Teil hier sind Klassen wie .post-XX und .format-YY. Sie ermöglichen es Ihnen, benutzerdefinierte Stile für jeden Beitrag oder jede Seite in der Datenbank einzuführen und auch zwischen verschiedenen Inhaltstypen, die vom Website-Administrator verwendet werden, zu unterscheiden. CSS kann viel bewirken. Manchmal ist es verlockend, ganz neue Vorlagen zu erstellen, wenn Sie Seiten benötigen, die anders aussehen sollen, aber das kann ausufern, also denken Sie daran, sich bei Bedarf auf CSS und diese benutzerdefinierten Klassen zu verlassen.

Menüs stylen

Die Art und Weise, wie WordPress alle Menüs handhabt, ist sehr einfach. Jedes Menü wird innerhalb einer Standard-Unordentlichen Liste (<ul>) angezeigt. Das Einzige, was Sie tun können, ohne einige fortgeschrittene Filterfunktionen zu verwenden, ist, diese Listen und ihre Elemente individuell zu stylen.

Was die Elemente betrifft, die die Liste selbst umschließen, so sind diese ganz Ihnen und Ihrer Registrierung der Menübereiche überlassen. Daher gibt es hier keine wirklichen Standardklassen, die WordPress verwendet.

Kurz gesagt, es liegt an Ihnen, welche äußere Struktur Sie verwenden. Dann greift WordPress ein und zeigt das Menü als Liste innerhalb dieser Struktur an.

Inhalt stylen

WordPress bietet Benutzern einen WYSIWYG (TinyMCE)-Editor zur Erstellung ihrer Inhalte. Um also sicherzustellen, dass alles gut gestylt ist, müssen Sie sich nur um jede Klasse kümmern, die TinyMCE ausgibt.

Der ratsamste Weg ist, damit zu beginnen, einen Testbeitrag zu erstellen und jede mögliche Art von Inhalt hineinzulegen. Schauen Sie sich dann den HTML-Quelltext des Beitrags an und nehmen Sie diese Klassen in Ihr CSS auf.

Hier ist eine schnelle Cheat Sheet, hier können Sie starten

/* the main classes used for alignment */
.alignnone {}
.alignleft {}
.alignright {}
.aligncenter {}
img.alignnone {}
img.alignleft {}
img.alignright {}
img.aligncenter {}

.wp-caption {} /* img caption */
.gallery {}
.gallery-caption {}

/* styles for img sizes */
img.size-full {}
img.size-large {}
img.size-medium {}
img.size-thumbnail {}

/* not classes, but surely something you should take care of */
blockquote {}
code {}
pre {}
hr {}
del {}

Bei weitem am wichtigsten auf der obigen Liste sind die Bildstile. Sobald die Website live ist, wird der Administrator sie regelmäßig verwenden, daher müssen Sie sicherstellen, dass Ihr CSS auch die seltsamsten Bildkombinationen verarbeiten kann.

Zum Beispiel, was passiert, wenn jemand zwei Bilder nebeneinander platziert, eines .alignleft und das andere .aligncenter? Was ist, wenn sich ein drittes Bild in der Nähe befindet? Und so weiter.

Immer mit einem Reset beginnen

Das Zurücksetzen aller Standard-Tags zu Beginn Ihrer CSS-Arbeit ist bei jedem Projekt, an dem Sie arbeiten, eine gute Praxis, und WordPress ist hier keine Ausnahme.

Zum Beispiel verwendet das aktuelle Standard-Theme für WordPress – Twenty Fourteen – eine modifizierte Version des Reset-Style-Sheets von Eric Meyer.

Wenn Sie an Ihrem eigenen Stylesheet arbeiten, können Sie auch mit Meyers Reset beginnen. Wenn Sie jedoch eine Abkürzung wünschen, laden Sie einfach das aktuelle Standard-Theme von WordPress herunter, holen Sie sich dessen Stylesheet und kopieren Sie den Reset-Teil in Ihres. Der Reset des aktuellen Standard-Themes ist über 400 Zeilen lang, daher würde es sicherlich eine Weile dauern, etwas Ähnliches selbst zu erstellen.

---

Da haben Sie es! Eine Liste von CSS-Klassen, um Ihnen den Einstieg in die Erstellung eines Stylesheets für ein WordPress-Theme zu erleichtern. Was ist Ihre Meinung dazu, wie WordPress CSS verwendet? Glauben Sie, dass es vielleicht zu viel unnötigen Ballast gibt und die Dinge etwas minimalistischer sein könnten? Oder gibt es nicht genug?