Sind Sie jemals auf eine Website gestoßen, die ihre Blog-Posts anders gestaltet? Einige Websites haben klebrige Posts, die mit einem benutzerdefinierten Hintergrund hervorgehoben sind, während auf anderen jeder Kategoriepost mit einem einzigartigen Look gestaltet werden kann. Wenn Sie schon immer lernen wollten, wie Sie jeden WordPress-Post anders gestalten können, dann sind Sie hier genau richtig. In diesem Artikel zeigen wir dir, wie du jeden WordPress-Beitrag anders stylen kannst.
Hinweis: Für dieses Tutorial müssen Sie benutzerdefiniertes CSS in WordPress hinzufügen. Sie müssen auch in der Lage sein, das Inspect-Tool zu verwenden. Grundlegende CSS- und HTML-Kenntnisse sind erforderlich.
Individuelle Posts in WordPress gestalten
WordPress fügt verschiedenen Elementen auf deiner Website Standard-CSS-Klassen hinzu. Ein standardkonformes WordPress-Theme muss über den von WordPress erforderlichen Code verfügen, um CSS-Klassen für Textkörper, Beiträge, 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 Inspect-Tool in Ihrem Browser verwenden, können Sie die für jeden Beitrag hinzugefügten Klassen sehen.
Im Folgenden sind die standardmäßig hinzugefügten CSS-Klassen basierend auf der Seite aufgeführt, die ein Benutzer anzeigt.
- .post-id
- .Post
- .Anhang
- .klebrig
- .hentry (hAtom-Mikroformatseiten)
- .Kategorie ID
- .Kategoriename
- .Verlinke den Namen
- .format-{format-name}
- .type-{post-type-name}
- .hat-post-thumbnail
- .Post-Passwort-erforderlich
- .post-passwortgeschützt
Eine Beispielausgabe würde so aussehen:
<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">
Sie können jeden WordPress-Beitrag mit den jeweiligen CSS-Klassen unterschiedlich gestalten.
Wenn Sie beispielsweise einen einzelnen Beitrag stylen möchten, 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 an Ihre eigene anzupassen.
Schauen wir uns ein weiteres Beispiel an.
Dieses Mal werden wir alle Beiträge formatieren, die unter einer bestimmten Kategorie namens Nachrichten abgelegt sind.
Wir können dies tun, indem wir unserem Theme das folgende benutzerdefinierte CSS hinzufügen.“
.category-news { font-size: 18px; font-style: italic; }
Dieses CSS wirkt sich auf alle Beiträge aus, die unter der Kategorie Nachrichten abgelegt werden.
Die Post-Class-Funktion
Theme-Entwickler verwenden die Funktion post_class, um WordPress mitzuteilen, wo die Post-Klassen hinzugefügt werden sollen. Normalerweise ist es in der <article>
Schild.
Die Post-Klassen-Funktion lädt nicht nur die standardmäßig von WordPress generierten CSS-Klassen, sondern ermöglicht es Ihnen auch, Ihre eigenen Klassen hinzuzufügen.
Je nach Theme finden Sie die post_class-Funktion in Ihrer single.php-Datei oder in den Content-Template-Dateien. Normalerweise sieht der Code so aus:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Sie können Ihre eigene benutzerdefinierte CSS-Klasse mit einem Attribut wie diesem hinzufügen:
<article id="post-<?php the_ID(); ?>" <?php post_class('longform-article'); ?>>
Die post_class gibt die entsprechenden Standard-CSS-Klassen zusammen mit Ihrer benutzerdefinierten CSS-Klasse aus.
Wenn Sie mehrere CSS-Klassen hinzufügen möchten, können Sie diese als Array definieren und dann in der Funktion post_class aufrufen.
<?php $custom_classes = array( 'longform-article', 'featured-story', 'interactive', ); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( $custom_classes ); ?>>
Beiträge je nach Autoren unterschiedlich gestalten
Die von der Funktion_posts generierten CSS-Standardklassen enthalten keinen Autorennamen als CSS-Klasse.
Wenn Sie den Stil jedes Beitrags basierend auf dem Autor anpassen möchten, müssen Sie zuerst den Autorennamen als CSS-Klasse hinzufügen.
Sie können dies tun, indem Sie das folgende Snippet verwenden:
<?php $author = get_the_author_meta('user_nicename'); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( $author ); ?>>
Dieser Code fügt den netten Namen des Benutzers als CSS-Klasse hinzu. Nicename ist ein URL-freundlicher Name, der von WordPress verwendet wird. Es hat keine Leerzeichen und alle Zeichen sind in Kleinbuchstaben, was es perfekt als CSS-Klasse macht.
Der obige Code gibt Ihnen eine Ausgabe wie diese:
<article id="post-412" class="peter post-412 post type-post status-publish format-standard hentry category-news">
Jetzt können Sie .peter in Ihrem benutzerdefinierten CSS verwenden, um alle Beiträge dieses bestimmten Autors so zu gestalten, dass sie anders aussehen.
.peter { background-color:#EEE; border:1px solid #CCC; }
Style Posts basierend auf Popularität mit Kommentaranzahl
Möglicherweise haben Sie Websites mit beliebten Beitrags-Widgets gesehen, die manchmal auf der Anzahl der Kommentare basieren. In diesem Beispiel zeigen wir Ihnen, wie Sie Beiträge anhand der Kommentaranzahl anders gestalten können.
Zuerst müssen wir die Kommentaranzahl abrufen und eine Klasse damit verknüpfen.
Um die Anzahl der Kommentare zu erhalten, müssen Sie den folgenden Code in Ihre Designdateien einfügen. Dieser Code geht in die WordPress-Schleife, sodass Sie ihn auch direkt vor dem
<?php $postid = get_the_ID(); $total_comment_count = wp_count_comments($postid); $my_comment_count = $total_comment_count->approved; if ($my_comment_count <10) { $my_comment_count="new"; } elseif ($my_comment_count >= 10 && $my_comment_count <20) { $my_comment_count="emerging"; } elseif ($my_comment_count >= 20) { $my_comment_count="popular"; } ?>
Dieser Code überprüft die Kommentaranzahl für den angezeigten Beitrag und weist ihnen basierend auf der Anzahl einen Wert zu. Zum Beispiel erhalten Beiträge mit weniger als 10 Kommentaren eine Klasse namens neu, weniger als 20 werden als aufstrebend bezeichnet und alles über 20 Kommentare ist beliebt.
Als Nächstes müssen Sie der Funktion post_class die CSS-Klasse comment count hinzufügen.
<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>
Dadurch werden allen Beiträgen basierend auf der Anzahl der Kommentare, die jeder Beitrag hat, neue, aufkommende und beliebte CSS-Klassen hinzugefügt.
Sie können benutzerdefiniertes CSS zum Stylen von Posts basierend auf Popularität hinzufügen:
.new {border: 1px solid #FFFF00;} .emerging {border: 1px dashed #FF9933;} .popular {border: 1px dashed #CC0000;}
Wir fügen nur Rahmen hinzu, Sie können beliebige CSS-Regeln hinzufügen.
Beiträge basierend auf benutzerdefinierten Feldern gestalten
Wenn Sie CSS-Klassen in Ihrer Designdatei fest codieren, sind Sie nur auf diese spezifischen CSS-Klassen beschränkt. Was wäre, wenn Sie während des Schreibens entscheiden möchten, welche CSS-Klasse Sie einem Artikel hinzufügen möchten?
Mit benutzerdefinierten Feldern können Sie CSS-Klassen im Handumdrehen hinzufügen.
Zuerst müssen Sie einem Beitrag ein benutzerdefiniertes Feld hinzufügen, damit Sie es testen können. Bearbeiten Sie einen Beitrag und scrollen Sie nach unten zum Abschnitt mit benutzerdefinierten Feldern.
Fügen Sie post-class als benutzerdefinierten Feldnamen 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 dann Ihren Beitrag zu speichern.
Bearbeiten Sie als Nächstes Ihre Designdateien, um Ihr benutzerdefiniertes Feld als Beitragsklasse anzuzeigen.
<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>
Es wird folgenden HTML-Code ausgegeben:
<article id="post-412" class="trending post-412 post type-post status-publish format-standard hentry category-uncategorized">
Sie können jetzt benutzerdefiniertes CSS für die post_class hinzufügen, die Sie mithilfe des benutzerdefinierten Felds hinzugefügt haben.
.trending{ background-color:##ff0000; }
Benutzerdefinierte Felder können mehrere Werte haben, sodass Sie mehrere CSS-Klassen mit demselben Namen hinzufügen können.
Es gibt viele weitere Möglichkeiten, WordPress-Beiträge individuell zu gestalten. Wenn Ihre Fähigkeiten wachsen, werden Sie immer wieder neue Möglichkeiten entdecken, Beiträge mit unterschiedlichen Bedingungen zu gestalten.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie jeden WordPress-Post anders gestalten können. Vielleicht möchten Sie auch unsere ultimative Liste der meistgesuchten WordPress-Tipps, -Tricks und -Hacks sehen.