Hinzufügen der Klasse Ungerade/Gerade zu Ihrem Beitrag in WordPress-Themen

Möchten Sie Ihren WordPress-Blogbeiträgen einen Hauch von visuellem Interesse verleihen? Das Hinzufügen von ungeraden und geraden Klassen kann Ihnen dabei helfen, ein einzigartiges und ansprechendes Design zu erzielen, indem Sie jeden zweiten Beitrag anders stylen.

Wir erhalten häufig Fragen von unseren Besuchern, wie diese Technik anzuwenden ist. Viele WordPress Themes bieten zwar keine eingebaute Option für ungerade und gerade Beitragsklassen, aber es ist relativ einfach, sie selbst hinzuzufügen.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihren Beiträgen in WordPress-Themes eine ungerade/gerade Klasse hinzufügen können.

Warum sollte man in WordPress-Themes die Klasse ungerade/gerade zu den Beiträgen hinzufügen?

Viele WordPress-Themes verwenden eine ungerade oder gerade Klasse für WordPress-Kommentare. Dies hilft den Nutzern zu erkennen, 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. Sie sieht ästhetisch ansprechend aus und hilft den Nutzern, Seiten mit vielen Inhalten schnell zu überfliegen. Es ist besonders hilfreich für die Homepage von Zeitschriften- oder Nachrichten-Websites.

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

Hinzufügen der Klasse Ungerade/Gerade zu Beiträgen im WordPress-Theme

WordPress generiert Standard-CSS-Klassen und fügt sie den verschiedenen Elementen auf Ihrer Website spontan 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 Post-Elementen hinzuzufügen. In unserem Leitfaden erfahren Sie, wie Sie jeden WordPress-Beitrag anders gestalten können.

Die post_class ist auch ein Filter, was bedeutet, dass Sie Ihre eigenen Funktionen damit verknüpfen können. Das ist genau das, was wir hier tun werden.

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

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';

Wir empfehlen, diesen Code mit dem WPCode-Plugin hinzuzufügen. Es ist das beste Plugin für Codeschnipsel, das es sicher und einfach macht, benutzerdefinierten Code in WordPress hinzuzufügen.

Zu Beginn müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Anweisungen dazu finden Sie in dieser Anleitung zur Installation eines WordPress-Plugins.

Rufen Sie nach der Aktivierung die Seite Code Snippets “ + Snippet hinzufügen im WordPress-Dashboard auf. Klicken Sie dann auf die Schaltfläche „Snippet verwenden“ unter der Option „Eigenen Code hinzufügen (neues Snippet)“.

Fügen Sie dann einen Titel für Ihr Codefragment hinzu, der so gewählt werden kann, dass Sie sich an die Bedeutung des Codes erinnern können.

Fügen Sie dann den Code von oben in das Feld „Codevorschau“ ein und wählen Sie „PHP Snippet“ als Codetyp aus der Dropdown-Liste auf der rechten Seite.

Danach schalten Sie einfach den Schalter von „Inaktiv“ auf „Aktiv“ um und klicken auf die Schaltfläche „Snippet speichern“.

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 klicken Sie dann mit der rechten Maustaste, um „Inspect“ oder „Inspect Element“ auszuwählen.

Sie haben nun gerade und ungerade Klassen zu Ihren Beiträgen hinzugefügt. Der nächste Schritt besteht darin, sie mit CSS zu gestalten. Sie können Ihr benutzerdefiniertes CSS in das Stylesheet Ihres Child-Themes, in den Theme-Customizer oder mit dem WPCode-Plugin hinzufügen.

Hier finden Sie ein CSS-Beispiel, 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 sich unsere Anleitung ansehen, wie Sie Ihrer WordPress-Website ganz einfach benutzerdefinierte CSS hinzufügen können.

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. Vielleicht interessieren Sie sich auch für unsere Anleitung zur Gestaltung des WordPress-Kommentar-Layouts und unsere Expertenauswahl der besten WordPress-Seitenersteller.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.