So fügen Sie die Klasse „Ungerade/Gerade“ zu Ihrem Beitrag in WordPress-Themes hinzu

Möchten Sie ungerade und gerade Klassen zu Beiträgen in Ihrem WordPress-Theme hinzufügen? Das Hinzufügen einer ungeraden und geraden Klasse ermöglicht es Ihnen, jeden anderen Beitrag anders zu gestalten. In diesem Artikel zeigen wir Ihnen, wie Sie Ihrem Beitrag in WordPress-Themes eine ungerade/gerade Klasse hinzufügen können.

Warum eine ungerade/gerade Klasse zu Ihren Posts in WordPress-Themes hinzufügen?

Viele WordPress-Themes verwenden eine gerade oder ungerade Klasse für WordPress-Kommentare. Sie hilft den Benutzern zu visualisieren, wo ein Kommentar endet und der nächste beginnt.

In ähnlicher Weise können Sie diese Technik auch für Ihre WordPress-Beiträge verwenden. Es sieht ästhetisch ansprechend aus und hilft Benutzern, Seiten mit viel Inhalt schnell zu scannen. Es ist besonders hilfreich für die Homepage von Magazin- oder Nachrichten-Websites.

Lassen Sie uns nun sehen, wie Sie eine ungerade und gerade Klasse zu Ihren Beiträgen im WordPress-Theme hinzufügen können.

Hinzufügen einer ungeraden/geraden Klasse zu Beiträgen im WordPress-Theme

WordPress generiert Standard-CSS-Klassen und fügt sie verschiedenen Elementen auf Ihrer Website im laufenden Betrieb hinzu. Diese CSS-Klassen helfen Plugin- und Theme-Entwicklern, ihre eigenen Stile für verschiedene Elemente hinzuzufügen.

WordPress verfügt auch über eine Funktion namens post_class, die von Theme-Entwicklern verwendet wird, um Klassen zu Beitragselementen hinzuzufügen. Sehen Sie sich unsere Anleitung an, wie Sie jeden WordPress-Beitrag anders gestalten können.

Die post_class ist auch ein Filter, was bedeutet, dass Sie Ihre eigenen Funktionen daran hängen können. Das ist genau das, was wir hier tun werden.

Fügen Sie diesen Code einfach in die Datei functions.php Ihres Themes oder in ein Site-spezifisches Plugin ein.

function oddeven_post_class ( $classes ) {
   global $current_class;
   $classes[] = $current_class;
   $current_class = ($current_class == 'odd') ? 'gerade' : 'ungerade';
   return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class = 'ungerade';

Diese Funktion fügt einfach ungerade zum ersten Beitrag hinzu, dann gerade, und so weiter.

Sie können die ungeraden und geraden Klassen im Quellcode Ihrer Website finden. Gehen Sie einfach mit der Maus auf einen Beitragstitel und wählen Sie dann mit der rechten Maustaste Inspect oder Inspect Element.

Nun, da Sie Ihren Beiträgen gerade und ungerade Klassen hinzugefügt haben. Der nächste Schritt besteht darin, sie mit CSS zu gestalten. Sie können Ihr benutzerdefiniertes CSS in das Stylesheet Ihres Child-Theme einfü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, dann sollten Sie sich CSS Hero ansehen. 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 können.