So fügen Sie Ihren Beiträgen in WordPress-Themes eine ungerade/gerade Klasse hinzu

Möchten Sie Ihren WordPress-Blogbeiträgen einen Hauch von visuellem Interesse verleihen? Das Hinzufügen von ungeraden und geraden Klassen kann Ihr Layout ansprechender gestalten und lange Listen von Beiträgen mit subtilen Designänderungen unterbrechen, die ins Auge fallen.

Wir erhalten häufig Fragen von unseren Lesern, wie diese Technik angewendet werden kann. Während viele WordPress-Themes keine integrierte Option für ungerade und gerade Beitragsklassen bieten, haben wir eine schnelle und einfache Möglichkeit gefunden, sie selbst mit dem kostenlosen WPCode-Plugin hinzuzufügen.

In diesem Artikel zeigen wir Ihnen, wie Sie ungerade/gerade Klassen zu Ihren Beiträgen in WordPress-Themes hinzufügen.

Warum ungerade/gerade Klassen zu Ihren Beiträgen in WordPress-Themes hinzufügen?

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

Ähnlich können Sie diese Technik für Ihre WordPress-Beiträge verwenden. Es sieht ästhetisch ansprechend aus und hilft Benutzern, Seiten mit vielen Inhalten schnell zu überfliegen. Es ist besonders hilfreich für die Homepage von Magazin- oder Nachrichtenwebsites.

Nachdem dies gesagt ist, sehen wir uns an, wie Sie Ihren Beiträgen in WordPress eine ungerade und gerade Klasse hinzufügen.

Hinzufügen von ungeraden/geraden Klassen zu Beiträgen im WordPress-Theme

WordPress generiert Standard-CSS-Klassen und fügt sie dynamisch zu verschiedenen Elementen auf Ihrer Website 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 zum Beitragselement hinzuzufügen. Sehen Sie sich unseren Leitfaden an, wie Sie jeden WordPress-Beitrag unterschiedlich 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 zu Ihrer Theme-Datei functions.php, einem standortspezifischen Plugin oder einem Code-Snippet-Plugin wie WPCode 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';

Wir empfehlen die Verwendung des WPCode-Plugins, um diesen Code hinzuzufügen. Es ist der sicherste und einfachste Weg, benutzerdefinierten Code auf Ihrer Website zu verwalten, ohne direkt die functions.php -Datei Ihres Themes bearbeiten zu müssen.

Wir verwenden WPCode, um alle benutzerdefinierten Snippets auf unserem Portfolio von Websites zu verwalten. Es hält alles organisiert und verhindert, dass Code bei Theme-Updates gelöscht wird.

Um mehr über dieses Code-Snippets-Plugin zu erfahren, lesen Sie unsere vollständige WPCode-Bewertung.

Zuerst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Anleitungen finden Sie in diesem Leitfaden zur Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung im WordPress-Dashboard zur Seite Code-Snippets » + Snippet hinzufügen .

Klicken Sie dann unter der Option „Benutzerdefinierten Code hinzufügen (Neuer Snippet)“ auf die Schaltfläche „+ Benutzerdefinierten Snippet hinzufügen“.

Als Nächstes müssen Sie einen Code-Typ aus der Liste der auf dem Bildschirm angezeigten Optionen auswählen.

Wählen Sie für dieses Tutorial als Code-Typ „PHP-Snippet“.

Sie werden nun zur Seite „Benutzerdefiniertes Snippet erstellen“ weitergeleitet.

Fügen Sie hier einen Titel für Ihr Code-Snippet hinzu, der Ihnen helfen kann, sich daran zu erinnern, wofür der Code bestimmt ist.

Danach fügen Sie den obigen Code in das Feld 'Code-Vorschau' ein.

Sobald das erledigt ist, schalten Sie einfach den Schalter von 'Inaktiv' auf 'Aktiv' und klicken Sie auf die Schaltfläche 'Snippet speichern'.

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

Sie können die ungeraden und geraden Klassen im Quellcode Ihrer Website finden. Bewegen Sie einfach die Maus über einen Beitragstitel und klicken Sie dann mit der rechten Maustaste, um "Untersuchen" oder Element untersuchen auszuwählen.

Jetzt, da Sie Ihren Beiträgen gerade und ungerade Klassen hinzugefügt haben. Der nächste Schritt ist, sie mit CSS zu gestalten. Sie können Ihr benutzerdefiniertes CSS zur Stylesheet Ihres Child-Themes, zum Theme Customizer oder mit dem WPCode-Plugin hinzufügen.

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 sich unseren Leitfaden zum einfachen Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Website ansehen.

Zusätzliche Ressourcen zum Anpassen von WordPress-Seiten und -Beiträgen

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie die ungerade/gerade Klasse zu Ihren Beiträgen in WordPress-Themes hinzufügen. Möglicherweise möchten Sie auch diese anderen Artikel lesen, um das Design Ihrer Website weiter anzupassen:

• So fügen Sie benutzerdefinierte Beitragsstatus für Blogbeiträge in WordPress hinzu
• Wie Sie die Anzahl der auf Ihrer WordPress-Blogseite angezeigten Beiträge ändern
• So zeigen oder blenden Sie Widgets auf bestimmten WordPress-Seiten ein oder aus
• 15 beste Drag & Drop WordPress Page Builder im Vergleich
• So fügen Sie Seiten-Auszüge in WordPress hinzu (Schritt für Schritt)

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.