Individuelle CSS Eigenschaften in WordPress

Innerhalb des eigenen WordPress Themes können alle Ideen für ein Design ausgelebt werden. Wenn sich der Stil der Webseite durch die gesamte Seite zieht ist die Erstellung recht einfach. Schwierig wird es erst, wenn für gewissen Kategorien oder Themen besondere CSS Eigenschaften gebraucht werden. Lest, wie ich so etwas umsetze.

Body Class CSS

Im Body-Bereich unserer Webseite befinden sich bereits durch WordPress einige Klassen, mit denen bereits individuelle Anpassungen gemacht werden können.

Body class von WordPress
Im Body sind bereits Seiten/Zustands spezifische Merkmale in der Body Class vorhanden

Die verschiedenen Merkmale in der Body Class

Um die Unterschiedlichen Strukturen von WordPress zu “stylen”, liefert WordPress einige Anhaltspunkte. Ein paar der wichtigsten Eigenschaften möchte ich näher erklären.

Startseite

WordPress besitzt immer eine Startseite. Diese kann als Blog oder individuelle Seite gestaltet werden. Wer spezielle CSS Eigenschaften ausschließlich auf der Startseite nutzen möchte, kann dies mit der Eigenschaft .home machen.

Beispiel:

Mit diesem Code wird “nur” auf der Startseite die Breite und die Farbe geändert.

Archive

WordPress bietet eine große Zahl an Archiven. Kategorien, Schlagworte, Autoren, Jahres, Monats- und Tages Archive.
Alle diese Seitentypen lassen sich über die Eigenschaft “archive” global ansprechen. Jede Form der Archive hat ihre eigenen Eigenschaft, um speziell nur diese Form anzupassen.

  • Kategorien

    .category

  • Schlagworte

    .tag

  • Autoren

    .author

  • Datum

    .date

Seiten und Beiträge

Diese beiden Standard Post-Types sowie alle zusätzlichen Post Types und Post-Formats haben die Möglichkeit eigenständig angepasst zu werden.

Beispiel:

Es gibt noch viele weitere Eigenschaften und Kombinationen wie bei den eigenen Seiten Templates.

Durch diese Vielzahl können alle Strukturen von WordPress problemlos gestylt werden.

CSS Eigenschaften nach Inhalt

Im Standard WordPress wird nur nach der Struktur unterschiedenen (Seiten,Beiträge,Startseite,Archive,…)
Wer gern einen thematischen Farbanstrich zu seinen verschiedenen Kategorien haben möchte, wird mit der Standard Bodyclass nicht zufriedenen sein.

Aus diesem Grund zeige ich euch, wie Ihr selbstständig die Body Class erweitern könnt und damit die individuellste Grundlage zur Gestaltung erhaltet. In meinem Beispiel wollte ich für die verschiedenen Kategorien die Hintergrundfarben und die Farbe von Elementen auf diesen Seiten anpassen.

Der Code um die WordPress Body anzupassen

Im nachfolgenden Code seht Ihr das gesamte Beispiel um die erste Ebene der Url in der Body Class einzusetzen.

Beispiel: meinblog.de/Kategorie1/Blogbeitrag.

Damit erhaltet Ihr Kategorie1 als Merkmal in der Body Class

  1. Filter:
    Wir nutzen den Filter Body_class und rufen unsere Funktion my_body_class auf.
  2. Funktions-Aufruf:
    Wir schreiben nun die Funktion my_body_class und setzen einen beliebige Variable als Paramenter. In unserem Fall ist $classes sehr treffend.
  3. Globale WordPress Eigenschaften:
    In der Variable $wp befinden sich einige wertvolle Informationen. Wir nutzen den Wert “Request” ;dies entspricht unseren URL Parametern.
  4. Nur erste Ebene:
    Ich spalte den Request mittels Explode Funktion anhand des “/” Zeichens und speichere dies in der Variable $exp.
  5. Zuweisen und Rückgabe:
    Anschließend füge ich meinen Wert (Kategorie1) in das Array der Variable $classes ein. Da wir einen Filter nutzen muss am Ende die Varibale $classes auch als Return genutzt werden. Sonst verschwinden alle bisherigen Eigenschaften und die Body Class bleibt leer.

Verwendete Funktionen

Autor: Marcus

Ich bin einer von zwei Geschäftsführern der Conversion Junkies. Zu meinen Themenschwerpunkten gehört das technische SEO, Entwicklungen im E-Commerce und Programmierung von Shopware und WordPress Plugins. Dieses Wissen gebe ich in Schulungen und Consultings gern weiter. Nutzen Sie die Kommentarfunktion für Ihre Fragen. Ich antworte darauf gern. Oder schreiben Sie mir eine E-Mail an marcus@conversion-junkies.de

2 Gedanken zu „Individuelle CSS Eigenschaften in WordPress“

  1. hallo,

    ich habe tante google gefragt, aber keine hilfreiche information finden können.
    wie kann ich im neuen theme 2015 die sidebar und den inhalt die plätze tauschen lassen, also inhalt links und sidebar rechts?

    vielen dank.

    vg,
    detlef

  2. Hallo,
    das ist nicht ganz so trivial. Ich habe eben mal geschaut welche Css Klassen geändert werden müssten.

    body:before
    - right:0;

    .sidebar:
    - float:right
    - margin-right:0px

    .site-content
    -float:right
    -margin-left:0px;

    Jedoch hat das Theme eine Javascript Funktion die beim scrollen die Elemente fixiert, damit springt das Design ein wenig. Hier einfach etwas testen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Mit dem Absenden Ihrer Anfrage erklären Sie sich mit der Verarbeitung Ihrer angegebenen Daten zum Zweck der Bearbeitung Ihrer Anfrage einverstanden (Datenschutzbedingungen)