Möchten Sie Beiträgen in Ihrem WordPress-Theme ungerade und gerade Klassen hinzufügen? Durch das Hinzufügen einer ungeraden und einer geraden Klasse können Sie jeden anderen Beitrag anders gestalten. In diesem Artikel zeigen wir Ihnen, wie Sie Ihrem Beitrag in WordPress-Themes ungerade/gerade Klassen hinzufügen.
Warum sollten Sie Ihren Beiträgen in WordPress-Themes eine ungerade/gerade Klasse hinzufügen?
Viele WordPress-Themes verwenden eine alte oder sogar Klasse für WordPress-Kommentare. Es hilft Benutzern zu visualisieren, wo ein Kommentar endet und der nächste beginnt.
Ebenso können Sie diese Technik für Ihre WordPress-Posts verwenden. Es sieht ästhetisch ansprechend aus und hilft Benutzern, Seiten mit vielen Inhalten schnell zu scannen. Es ist besonders hilfreich für Homepages von Zeitschriften oder Nachrichten-Websites.
Sehen wir uns jedoch an, wie Sie Ihren Beiträgen im WordPress-Theme eine ungerade und gerade Klasse hinzufügen.
Hinzufügen von ungeraden/gerade-Klassen zu Beiträgen im WordPress-Theme
WordPress generiert standardmäßige CSS-Klassen und fügt sie im Handumdrehen zu verschiedenen Elementen auf deiner Website hinzu. Diese CSS-Klassen helfen Plugin- und Theme-Entwicklern, ihre eigenen Stile für verschiedene Elemente hinzuzufügen.
WordPress kommt auch mit einer Funktion namens post_class
, die von Theme-Entwicklern verwendet wird, um Klassen zum Post-Element hinzuzufügen. In unserem Leitfaden erfahren Sie, wie Sie jeden WordPress-Post anders gestalten.
Die post_class
ist auch ein Filter, was bedeutet, dass Sie Ihre eigenen Funktionen daran hängen können. Genau das werden wir hier tun.
Fügen Sie diesen Code einfach der Datei functions.php Ihres Themes oder einem Site-spezifischen Plugin hinzu.
function oddeven_post_class ( $classes ) { global $current_class; $classes[] = $current_class; $current_class = ($current_class == 'odd') ? 'even' : 'odd'; return $classes; } add_filter ( 'post_class' , 'oddeven_post_class' ); global $current_class; $current_class="odd";
Diese Funktion fügt einfach ungerade zum ersten Beitrag hinzu, dann gerade und so weiter.
Sie finden die ungeraden und geraden Klassen im Quellcode Ihrer Site. Fahren Sie einfach mit der Maus zu einem Beitragstitel und klicken Sie dann mit der rechten Maustaste, um Inspect oder Inspect Element auszuwählen.
Jetzt haben Sie gerade und ungerade Klassen zu Ihren Beiträgen hinzugefügt. Der nächste Schritt besteht darin, sie mit CSS zu stylen. Sie können Ihr benutzerdefiniertes CSS zum Stylesheet Ihres Child-Themes hinzufügen oder das Simple Custom CSS-Plugin verwenden.
Hier ist ein Beispiel-CSS, das Sie als Ausgangspunkt verwenden können:
.even { background:#f0f8ff; } .odd { background:#f4f4fb; }
So sah es auf unserer Testseite aus:
Wenn Sie nicht wissen, wie man CSS verwendet, sollten Sie CSS Hero ausprobieren. Es ermöglicht Ihnen, CSS zu jedem Teil Ihrer WordPress-Site hinzuzufügen, ohne Code zu schreiben.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Ihren Beiträgen in WordPress-Themes ungerade/gerade Klassen hinzufügen. Vielleicht möchten Sie auch unseren Leitfaden zum Gestalten Ihres WordPress-Kommentarlayouts lesen.