Wie Sie jeden WordPress-Beitrag unterschiedlich gestalten

Sind Sie jemals auf eine Website gestoßen, die ihre Blogbeiträge unterschiedlich gestaltet? Einige Websites haben Sticky Posts mit einem benutzerdefinierten Hintergrund hervorgehoben, während andere jede Kategorie Post mit einem einzigartigen Look gestylt haben können. Wenn Sie jemals lernen wollten, wie Sie jeden WordPress-Beitrag anders gestalten können, dann sind Sie hier genau richtig.

In diesem Artikel zeigen wir Ihnen, wie Sie jeden WordPress-Beitrag anders gestalten können.

Hinweis: Für dieses Tutorial müssen Sie benutzerdefinierte CSS in WordPress hinzufügen.

Außerdem müssen Sie in der Lage sein, das Tool "Inspect" zu verwenden. Einige grundlegende CSS- und HTML-Kenntnisse sind erforderlich.

Styling einzelner Beiträge in WordPress

WordPress fügt Standard-CSS-Klassen zu verschiedenen Elementen auf Ihrer Website hinzu.

Ein standardkonformes WordPress-Theme muss über den von WordPress benötigten Code verfügen, um CSS-Klassen für Body, Posts, Seiten, Widgets, Menüs und mehr hinzuzufügen. Eine WordPress-Kernfunktion namens post_class() wird von Themes verwendet, um WordPress mitzuteilen, wo diese Standard-CSS-Klassen für Beiträge hinzugefügt werden sollen

Wenn Sie Ihre Website besuchen und das Tool "Inspect" in Ihrem Browser verwenden, können Sie sehen, dass diese Klassen für jeden Beitrag hinzugefügt wurden.

Im Folgenden sind die CSS-Klassen aufgeführt, die standardmäßig hinzugefügt werden, je nachdem, welche Seite ein Benutzer gerade anzeigt.

• .post-id
• .post
• .attachment
• .sticky
• .hentry (hAtom-Mikroformatseiten)
• .kategorie-kennung
• .kategorie-name
• .tag-name
• .format-{format-name}
• .typ-{Beitragstyp-Name}
• .has-post-thumbnail
• .post-passwort-erforderlich
• .post-passwort-geschützt

Eine Beispielausgabe würde wie folgt aussehen: Sie können jeden WordPress-Beitrag mit den entsprechenden CSS-Klassen anders gestalten.

Wenn Sie z. B. einen einzelnen Beitrag stylen möchten, dann können Sie die post-id-Klasse in Ihrem benutzerdefinierten CSS verwenden.

.post-412 { background-color: #FF0303; color:#FFFFFF } 
Vergessen Sie nicht, die Post-ID zu ändern, damit sie mit Ihrer eigenen übereinstimmt. Schauen wir uns ein weiteres Beispiel an.
Diesmal werden wir alle Beiträge stilisieren, die unter einer bestimmten Kategorie namens News abgelegt sind.

Dazu fügen wir das folgende benutzerdefinierte CSS zu unserem Theme" hinzu
.kategorie-neuigkeiten { font-size: 18px; font-style: italic; } 

Dieses CSS wirkt sich auf alle Beiträge aus, die unter der Kategorie news abgelegt sind.

Die Funktion post_class

Theme-Entwickler verwenden die post_class-Funktion, um WordPress mitzuteilen, wo die Beitragsklassen hinzugefügt werden sollen. Die post_class-Funktion lädt nicht nur die standardmäßig von WordPress generierten CSS-Klassen, sondern ermöglicht es Ihnen auch, eigene Klassen hinzuzufügen. Abhängig von Ihrem Theme finden Sie die post_class-Funktion in Ihrer single.php-Datei oder in den Content-Template-Dateien. Normalerweise sieht der Code etwa so aus:

<article id="post-<?php the_ID(); ?>" > 

Sie können Ihre eigene benutzerdefinierte CSS-Klasse mit einem Attribut wie diesem hinzufügen:

<article id="post-<?php the_ID(); ?>" >

Die post_class gibt die jeweiligen Standard-CSS-Klassen zusammen mit Ihrer eigenen CSS-Klasse aus.

Wenn Sie mehrere CSS-Klassen hinzufügen möchten, dann können Sie diese als Array definieren und dann in der post_class-Funktion aufrufen.

 <article id="post-<?php the_ID(); ?>">

Posts basierend auf Autoren unterschiedlich gestalten

Die Standard-CSS-Klassen, die von der Funktion the_posts generiert werden, enthalten den Autorennamen nicht als CSS-Klasse.

Wenn Sie den Stil der einzelnen Beiträge basierend auf dem Autor anpassen möchten, müssen Sie zuerst den Autorennamen als CSS-Klasse hinzufügen.

Sie können dies mit dem folgenden Schnipsel tun:

 <article id="post-<?php the_ID(); ?>">

Dieser Code fügt den Nicename des Benutzers als CSS-Klasse hinzu.

Nicename ist ein URL-freundlicher Name, der von WordPress verwendet wird. Er enthält keine Leerzeichen und alle Zeichen sind in Kleinbuchstaben, was ihn perfekt für die Verwendung als CSS-Klasse macht.

Mit dem obigen Code erhalten Sie eine Ausgabe wie diese: Jetzt können Sie .peter in Ihrem benutzerdefinierten CSS verwenden, um alle Beiträge dieses bestimmten Autors anders aussehen zu lassen.

.peter { background-color:#EEE; border:1px solid #CCC } 

Beiträge auf Basis der Popularität mit Hilfe der Kommentaranzahl gestalten

Sie haben vielleicht schon Websites mit Widgets für beliebte Beiträge gesehen, die manchmal auf der Anzahl der Kommentare basieren.

In diesem Beispiel zeigen wir Ihnen, wie Sie Beiträge mithilfe der Kommentaranzahl anders gestalten können. Zuerst müssen wir die Anzahl der Kommentare ermitteln und eine Klasse damit verknüpfen. Um die Anzahl der Kommentare zu ermitteln, müssen Sie den folgenden Code in Ihre Theme-Dateien einfügen. Dieser Code befindet sich innerhalb der WordPress-Schleife, Sie können ihn also direkt vor dem tag einfügen

 genehmigt; if ($my_comment_count <10) { $my_comment_count = 'neu'; } elseif ($my_comment_count >= 10 && $my_comment_count <20) { $my_comment_count = 'auftauchend'; } elseif ($my_comment_count >= 20) { $my_comment_count = 'beliebt'; } ?> 

Dieser Code prüft die Anzahl der Kommentare für den angezeigten Beitrag und weist ihnen einen Wert zu, der auf der Anzahl basiert.

Zum Beispiel erhalten Beiträge mit weniger als 10 Kommentaren eine Klasse namens new, weniger als 20 werden als emerging bezeichnet und alles über 20 Kommentare ist popular. Als Nächstes müssen Sie die CSS-Klasse für die Anzahl der Kommentare zur Funktion post_class hinzufügen.

<article id="post-<?php the_ID(); ?>" > 

Dies fügt neue, aufkommende und beliebte CSS-Klassen zu allen Beiträgen hinzu, basierend auf der Anzahl der Kommentare, die jeder Beitrag hat. Sie können benutzerdefinierte CSS hinzufügen, um Beiträge basierend auf ihrer Popularität zu gestalten:

.new {border: 1px solid #FFFF00;} .emerging {border: 1px dashed #FF9933;} .popular {border: 1px dashed #CC0000;} 

Wir fügen nur Ränder hinzu, Sie können beliebige CSS-Regeln hinzufügen, die Sie möchten.

Posts basierend auf benutzerdefinierten Feldern gestalten

Das Hardcoding von CSS-Klassen in Ihrer Themadatei schränkt Sie nur auf diese spezifischen CSS-Klassen ein.

Was wäre, wenn Sie während des Schreibens eines Artikels entscheiden wollten, welche CSS-Klasse Sie diesem hinzufügen möchten? Mit benutzerdefinierten Feldern können Sie CSS-Klassen "on the fly" hinzufügen. Zuerst müssen Sie ein benutzerdefiniertes Feld zu einem Beitrag hinzufügen, damit Sie es testen können.

Bearbeiten Sie einen Beitrag und scrollen Sie nach unten zum Abschnitt "Benutzerdefinierte Felder".

Fügen Sie post-class als Namen für das benutzerdefinierte Feld hinzu und alles, was Sie als CSS-Klasse im Wertfeld verwenden möchten.

Vergessen Sie nicht, auf die Schaltfläche "Benutzerdefiniertes Feld hinzufügen" zu klicken, um es zu speichern, und speichern Sie dann Ihren Beitrag. Bearbeiten Sie als nächstes Ihre Themendateien, um Ihr benutzerdefiniertes Feld als Beitragsklasse anzuzeigen.

 ID, 'post-class'); ?> <article id="post-<?php the_ID(); ?>">

Es wird das folgende HTML ausgegeben: Sie können nun benutzerdefiniertes CSS für die post_class hinzufügen, die Sie über das benutzerdefinierte Feld hinzugefügt haben.

.trending{ background-color:##ff0000; } 

Benutzerdefinierte Felder können mehrere Werte haben, so dass Sie mehrere CSS-Klassen mit demselben Namen hinzufügen können.

Es gibt noch viele weitere Möglichkeiten, WordPress-Beiträge individuell zu gestalten. Wenn Ihre Kenntnisse wachsen, werden Sie immer wieder neue Möglichkeiten entdecken, um Beiträge unter verschiedenen Bedingungen zu gestalten.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie jeden WordPress-Beitrag anders gestalten können.

Verwandte Artikel:

• So fügen Sie die Klasse "Ungerade/Gerade" zu Ihrem Beitrag in WordPress-Themes hinzu
• Wie man WordPress-Navigationsmenüs gestaltet
• WordPress Body Class 101: Tipps und Tricks für Theme-Designer
• Wie Sie einzelne Kategorien in WordPress unterschiedlich gestalten
• Wie man die Hintergrundfarbe in WordPress zufällig ändert