Hinzufügen der Klasse Ungerade/Gerade zu Ihrem Beitrag in WordPress-Themen: Anleitung, Tipps & Best Practices

Mit der WordPress Klasse „ungerade“ und „gerade“ gestalten Sie Beiträge gezielt abwechslungsreich. Diese Technik bringt Struktur und visuelle Klarheit – ob bei Bloglisten, Tabellen oder dynamischen Layouts im Block-Editor.

Zentrale Punkte

• CSS-Klassen: Steuern gezielt das Aussehen einzelner Beiträge.
• Automatisierung: Klassen dynamisch via PHP oder Block-Editor zuweisen.
• Design-Optimierung: Beiträge visuell strukturieren durch Zebra-Pattern.
• Plugins: Code snippets ohne Programmierung realisieren.
• Best Practices: Mobile Ansicht und klare Klassennamen beachten.

Was sind CSS-Klassen in WordPress und wofür nutze ich sie?

Eine CSS-Klasse ist ein Attribut, das einem HTML-Element hinzugefügt wird, um es gezielt mit CSS zu gestalten. In WordPress helfen sie mir, Designänderungen für bestimmte Beiträge oder Elemente zu definieren, ohne globale Styles zu verändern. Das betrifft Farben, Abstände, Rahmen oder Animationen. Besonders nützlich ist das bei wiederkehrenden Mustern, etwa in Beitragslisten, Tabellen oder Archivansichten. Statt jeden Beitrag einzeln zu stylen, differenziere ich sie mithilfe der Klassen ungerade und gerade. Dieses sogenannte „Zebra-Muster“ steigert die Lesbarkeit und Organisation – ein visueller Rhythmus, der Leser strukturiert führt. Das Prinzip wird häufig in Tabellen eingesetzt, um Zeilen farblich zu trennen und so ein „Springen“ in den Augen zu vermeiden. Gleichermaßen lässt sich dieses Muster jedoch auf jede Art von Inhaltsblock anwenden, um die Gesamtästhetik zu verbessern. Durch die gezielte Nutzung von CSS-Klassen in WordPress kann zudem das Erscheinungsbild einzelner Seiten und Beiträge genauer abgestimmt werden. Beispielsweise lassen sich ganze Themenbereiche oder Kategorien mithilfe von üblichen WordPress-Template-Tags auf diese Weise unterschiedlich gestalten. So hebt sich zum Beispiel jede zweite Kategorie-Abbildung leicht vom restlichen Inhalt ab.

Zebra-Muster: Einsatz und Vorteile im Theme-Design

Mit den Klassen „ungerade“ und „gerade“ lassen sich gestalterische Wiederholungen schaffen, die sich besonders im Blog-Design, bei Listen oder Produktdarstellungen auszahlen. Die visuelle Abwechslung hat funktionalen Mehrwert:

• Bessere Trennung von Inhalten in Listen oder Tabellen
• Steigerung der Lesbarkeit auf mobilen und Desktop-Geräten
• Visuelle Hierarchie durch wechselnde Farben oder Abstände
• Individuelle Styles wie Animationen oder Hover-Effekte gezielt anwenden

Diese Technik lässt sich nicht nur für Beiträge, sondern genauso für Kommentare, Widgets oder Formulare anwenden. Damit schaffen Sie überall dort Struktur, wo sich viele gleichartige Inhalte wiederholen. Je nach Theme-Layout und persönlichem Geschmack können die angewendeten Farben dezent oder stark kontrastierend gewählt werden. Wichtig ist, dass das Muster die Nutzerfreundlichkeit nicht beeinträchtigt, sondern unterstützt. Um eine konsistente User Experience zu bieten, macht es Sinn, sich vorab klarzumachen, welche visuellen Effekte man genau erzielen möchte. Ist das Ziel lauteres Branding? Oder soll das Muster in eine eher minimalistische Webseite eingefügt werden? Daher ist ein kurzer Style-Guide nützlich, in dem festgelegt wird, ob sich die Farben für ungerade und gerade Klassen deutlich voneinander unterscheiden sollen oder eher dezent bleiben.

So definieren Sie die Klassen in Ihrer style.css

Zuerst lege ich in der CSS-Datei meines Themes zwei Klassen mit unterschiedlichen Hintergründen fest:

.post-list .post-item.gerade {
  background-color: #f5f5f5;
}
.post-list .post-item.ungerade {
  background-color: #eaeaea;
}

Ergänzend kann ich weitere Eigenschaften definieren – etwa Rahmen, Padding oder Schriftstile. Es ist vorteilhaft, sprechende Klassennamen wie `.beitrag-ungerade` zu wählen, damit es keine Kollisionen mit bestehenden Theme-Klassen gibt. Um die Lesbarkeit noch besser zu gestalten, kann man in diesen Klassen zusätzlich folgendes integrieren:

.post-list .post-item.gerade h2,
.post-list .post-item.gerade p {
  color: #333;
  padding: 15px;
}

.post-list .post-item.ungerade h2,
.post-list .post-item.ungerade p {
  color: #555;
  padding: 15px;
}

So erhalten die Texte innerhalb der Boxen einen angepassten Farbsatz und ausreichend Abstand. Wer mag, kann außerdem unterschiedliche Schriftgrößen und -familien pro Klasse ausprobieren. Wichtig dabei ist, trotz der Unterschiede immer eine gewisse Einheitlichkeit zu wahren. Sonst besteht die Gefahr, dass das Gesamtdesign zu unruhig wirkt.

Automatische Klassenzuweisung im klassischen Theme über PHP

In klassischen WordPress-Themes nutze ich den sogenannten Loop, um Beiträge dynamisch anzuzeigen. Dort lässt sich in jeder Schleife eine Klasse abwechselnd setzen:

';
    the_title();
    the_excerpt();
    echo '

.post-item.ungerade:hover,
.post-item.gerade:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}