Default-Klassen in WordPress: So wird das CSS WordPress-optimiert
Kommentare

Es gibt zahlreiche Content-Management- und Blog-Systeme auf dem Markt, mit denen sich Websites erstellen lassen – eines der beliebtesten ist seit vielen Jahren WordPress. Ein besonderer Vorteil ist dabei, dass WordPress bereits „out of the box“ eine hohe Funktionalität mitbringt, die dem Nutzer die Arbeit erleichtert.

Zudem erlaubt WordPress Frontend-Entwicklern viele Freiheiten bei der Gestaltung der Seite. Dafür nutzt WordPress zum Beispiel verschiedene Default-Klassen im CSS, die sich nur schwer ändern lassen. Diese hat Karol K. im Artikel Back to Basics with WordPress CSS: Understanding the Native Classes zusammengefasst und erklärt, wie sich damit das eigene CSS so WordPress-optimiert wie möglich gestalten lässt.

Die verschiedenen Default-WordPress-Klassen

WordPress bietet seinen Nutzern vielfältige Möglichkeiten, eine individuell gestaltete Website zu designen und hat nur wenige Einschränkungen, was die Gestaltung des CSS angeht. Allerdings gibt es verschiedene Default-Klassen, die WordPress ausgibt – egal, welche Struktur man seiner Website verpasst.

So werden WordPress-Widgets immer .widget {} und.widget-title {} zugewiesen; zudem erhält jeder mögliche Widget-Typ wie zum Beispiel Archive, Kalender, Kategorien, Meta oder Seiten ihr jeweils eigenes CSS-Klassen-Set. Auch beim Body gibt es zahlreiche Klassen, die dem -Tag hinzugefügt werden können, um unterschiedliche Seiten und Seitentypen individuell zu stylen. Dazu gehören etwa Kategorie-Archive, Post-IDs oder Autorenseiten.

Genauso teilen Posts und Seiten die gleiche grundsätzliche Struktur, sodass WordPress dem Haupt-Content-Tag die entsprechenden Klassen zuweist, beispielsweise .post-XX und .format-YY. Damit lässt sich nicht nur ein individuelles Styling für einen beliebigen Post oder eine beliebige Seite in der Datenbank anwenden, sondern auch zwischen verschiedenen vom Seiten-Admin genutzten Content-Typen unterscheiden.

Auch für die verschiedenen Content-Typen gibt es Default-Klassen in WordPress, etwa hinsichtlich ihrer Ausrichtung oder Größe, was gerade bei Bildern wichtig ist. Eine Ausnahme stellen die Menüs in WordPress dar: Jedes Menü wird in einer ungeordneten Liste dargestellt, in der sich maximal die einzelnen Elemente individuell stylen lassen. So liegt die Entscheidung über die Menüstruktur beim Nutzer; WordPress stellt sie dann automatisch als Liste innerhalb der Struktur dar.

Bevor mit der Arbeit am CSS einer Website begonnen wird, bietet es sich an, die Default-Tags zu resetten. Am einfachsten geht dies mit dem Reset-Bereich des jeweils aktuellen Default-WordPress-Themes. Anschließend ist der Weg frei, sein eigenes CSS-Stylesheet für das eigene WordPress-Theme zu erstellen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -