Wie man jeden WordPress-Beitrag unterschiedlich gestaltet

Möchten Sie jeden WordPress-Beitrag auf Ihrer Website anders gestalten?

Vielleicht sind Sie schon auf Websites gestoßen, auf denen Sticky Posts mit einem benutzerdefinierten Hintergrund hervorgehoben werden oder auf denen jeder Kategorie-Post ein eigenes Aussehen verliehen wird. Sie können dies ebenfalls tun, um verschiedene Inhaltstypen zu reflektieren und ein visuell ansprechendes Erlebnis für die Nutzer zu schaffen.

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

Vor- und Nachteile der unterschiedlichen Gestaltung jedes WordPress-Posts

Wenn Sie einen WordPress-Blog haben, können Sie jeden Beitrag anders gestalten und so ein einzigartiges visuelles Erlebnis schaffen, bei dem unterschiedliche Farben mit verschiedenen Inhaltskategorien oder -typen verbunden sind.

So können Sie beispielsweise eine andere Hintergrundfarbe für alle Artikel, Blogbeiträge und Anleitungen auf Ihrer Website verwenden. Dies kann die Aufmerksamkeit der Nutzer sofort wecken und das Engagement steigern.

Bedenken Sie aber, dass dies auch einige große Nachteile haben kann. Zum Beispiel müssen Sie das Design jedes WordPress-Beitrags regelmäßig pflegen, was zeitaufwändig sein kann.

Außerdem kann dies zu einem inkonsistenten Nutzererlebnis führen und ist für Ihre Markenidentität nicht förderlich. Das liegt daran, dass Sie auf Ihrer gesamten Website dieselben Farben verwenden müssen, um das Image Ihres Unternehmens aufzubauen.

Wenn Sie ein Anfänger sind, kann das Hinzufügen von benutzerdefiniertem CSS zur Gestaltung jedes Beitrags auch schwierig sein. Sehen wir uns also an, wie Sie jeden WordPress-Beitrag ganz einfach anders gestalten können.

Wie man einzelne Beiträge in WordPress gestaltet

WordPress fügt verschiedenen Elementen auf Ihrer Website Standard-CSS-Klassen zu. Themes verwenden eine WordPress-Kernfunktion namens post_class(), um WordPress mitzuteilen, wo diese Standard-CSS-Klassen für Beiträge hinzugefügt werden sollen.

Wenn Sie Ihre Website besuchen und das Inspektionstool in Ihrem Browser verwenden, können Sie diese für jeden Beitrag hinzugefügten Klassen sehen.

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

• .post-id
• .post
• .attachment
• .klebrig
• .hentry (hAtom-Mikroformatseiten)
• .Kategorie-ID
• .kategorie-name
• .tag-name
• .format-{format-name}
• .type-{post-type-name}
• .has-post-thumbnail

Eine Beispielausgabe würde wie folgt aussehen:

<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">

Sie können jeden WordPress-Beitrag mithilfe dieser CSS-Klassen oder IDs unterschiedlich gestalten. Dazu müssen Sie zunächst die Beitrags-ID für einen einzelnen Beitrag finden.

Dazu müssen Sie im WordPress-Dashboard die Seite Beiträge “ Alle Beiträge aufrufen und mit der Maus über einen Beitrag fahren.

In der linken unteren Ecke des Bildschirms wird nun eine URL für die Bearbeitung des Beitrags angezeigt. Hier können Sie die Beitrags-ID finden, indem Sie die Zahl zwischen „post=“ und „&action“ betrachten.

Im folgenden Beispiel ist die Post-ID 25.

Danach müssen Sie die CSS-Klasse zusammen mit dem benutzerdefinierten Code in Ihre Themendateien oder in den Theme-Customizer einfügen. Das kann jedoch riskant sein und Ihre Website mit nur einem Fehler zerstören.

Deshalb empfehlen wir stattdessen die Verwendung von WPCode. Es ist das beste WordPress-Plugin für Codeschnipsel und der sicherste Weg, benutzerdefinierten Code zu Ihrer Website hinzuzufügen.

Zunächst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Anleitung für Einsteiger zur Installation eines WordPress-Plugins.

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

Dies führt Sie zur Seite „Benutzerdefiniertes Snippet erstellen“, wo Sie zunächst einen Namen für Ihr Code-Snippet eingeben können. Wählen Sie dann aus dem Dropdown-Menü auf der rechten Seite „CSS Snippet“ als Codetyp aus.

Dann müssen Sie die CSS-Klasse und die ID Ihres individuellen Beitrags wie folgt in das Feld „Codevorschau“ eingeben:

.post-13 { }

Danach können Sie zwischen den Klammern einen beliebigen benutzerdefinierten CSS-Code hinzufügen, um Ihren Beitrag zu gestalten.

Wenn Sie zum Beispiel die Hintergrundfarbe eines einzelnen Beitrags ändern möchten, können Sie den folgenden benutzerdefinierten CSS-Code hinzufügen. Beachten Sie, dass Sie die Post-ID in diesem Code durch Ihre eigene ID ersetzen müssen. Wo dies .post-13 ist, könnte Ihre .post-23873 sein.

Sie können auch den Hex-Code für die Hintergrundfarbe in eine beliebige Farbe Ihrer Wahl ändern:

.post-13 {
background-color: #FF0303;
color:#FFFFFF;
}

Schalten Sie dann den Schalter „Inaktiv“ oben auf „Aktiv“ um und klicken Sie auf die Schaltfläche „Snippet speichern“, um Ihre Einstellungen zu speichern.

Der benutzerdefinierte CSS-Code wird nun bei der Aktivierung des Snippets automatisch für Ihren individuellen Beitrag ausgeführt.

Besuchen Sie Ihren WordPress-Blogbeitrag, um die Änderungen in Echtzeit zu sehen.

Sie können auch andere benutzerdefinierte CSS-Codefragmente im Feld „Codevorschau“ hinzufügen, um die Farbe der Textauswahl, die Textfarbe, die Farbe der internen Links und vieles mehr zu ändern.

Weitere Informationen finden Sie in unserer Anleitung für Einsteiger, wie Sie Farben in WordPress anpassen können.

Wie man Beiträge in einer bestimmten Kategorie gestaltet

Wenn Sie alle Beiträge, die zu einer bestimmten Kategorie gehören, gestalten wollen, können Sie das auch mit WPCode tun.

Besuchen Sie die Seite Code Snippets “ + Snippet hinzufügen und wählen Sie die Option „Eigenen Code hinzufügen (neues Snippet)“.

Fügen Sie dann einen Code-Snippet-Namen auf der neuen Seite hinzu und wählen Sie „CSS Snippet“ als Codetyp. Danach geben Sie die CSS-Klasse einer bestimmten Kategorie in das Code-Vorschaufeld ein, indem Sie den Permalink der Kategorie nach dem Bindestrich verwenden:

.category-books { }

Sobald Sie das getan haben, können Sie ein beliebiges benutzerdefiniertes CSS-Snippet in das Feld einfügen, um es auf alle Beiträge in verschiedenen Kategorien anzuwenden.

Wenn Sie beispielsweise die Schriftgröße und den Schriftstil für alle Beiträge in einer bestimmten Kategorie ändern möchten, können Sie das folgende Code-Snippet verwenden. Denken Sie nur daran, den Kategorienamen entsprechend Ihrer Website zu ersetzen.

category-books {
    font-size: 18px;
    font-style: italic;
}

Schalten Sie dann oben den Schalter „Inaktiv“ auf „Aktiv“ um.

Klicken Sie dann auf die Schaltfläche „Snippet speichern“, um Ihre Einstellungen zu speichern.

Sie können nun alle Beiträge einer bestimmten Kategorie besuchen, um die Änderungen zu sehen, die mit CSS-Code vorgenommen wurden.

So sieht es auf unserer Demoseite aus.

Wie man Beiträge je nach Autor unterschiedlich gestaltet

Die von der Funktion the_posts() generierten Standard-CSS-Klassen enthalten den Autorennamen nicht als CSS-Klasse.

Wenn Sie den Stil jedes Beitrags auf der Grundlage des Autors anpassen möchten, müssen Sie zunächst den Namen des Autors als CSS-Klasse hinzufügen.

Um dies mit WPCode zu tun, wählen Sie die Option „Add Your Custom Code (New Snippet)“.

Dies führt Sie zur Seite „Benutzerdefiniertes Snippet erstellen“, wo Sie einen Namen für das Code-Snippet eingeben und „PHP Snippet“ als Codetyp auswählen müssen.

Fügen Sie anschließend den folgenden benutzerdefinierten Code in das Feld „Codevorschau“ ein und ersetzen Sie „user_nicename“ durch den Namen des Autors.

$author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $author );

Schalten Sie schließlich den Schalter „Inaktiv“ auf „Aktiv“ um und klicken Sie auf die Schaltfläche „Snippet speichern“, um Ihre Einstellungen zu speichern.

Sie sollte folgendermaßen aussehen.

Dieser Code fügt nun den Nicknamen 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.

Rufen Sie nun erneut die Seite Code Snippets “ + Snippet hinzufügen auf und wählen Sie die Option „Eigenen Code hinzufügen (neues Snippet)“. Fügen Sie auf dem nächsten Bildschirm einen Namen für Ihren benutzerdefinierten Code hinzu und wählen Sie „CSS Snippet“ als Codetyp aus dem Dropdown-Menü auf der rechten Seite.

Sie können dann den Namen des Autors in das Feld „Codevorschau“ einfügen, etwa so:

.sarahclare

Danach können Sie den benutzerdefinierten CSS-Code hinzufügen, um die Hintergrundfarbe, die Größe des Rahmens, die Textfarbe und vieles mehr zu ändern.

Mit dem folgenden Code können Sie die Hintergrundfarbe der Beiträge eines Autors ändern und einen Rahmen für den Inhaltsbereich hinzufügen.

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

Sobald Sie fertig sind, klicken Sie oben auf die Schaltfläche „Snippet speichern“.

Schalten Sie dann den Schalter „Inaktiv“ auf „Aktiv“ um.

Der benutzerdefinierte Code wird bei der Aktivierung automatisch ausgeführt.

Sie können nun den Beitrag eines bestimmten Autors besuchen, um die Änderungen zu sehen.

Stilisierung von Beiträgen nach Popularität mit Hilfe der Kommentaranzahl

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 anhand der Anzahl der Kommentare anders gestalten können.

Zunächst müssen wir die Anzahl der Kommentare ermitteln und ihnen eine Klasse zuordnen.

Um die Anzahl der Kommentare zu erhalten, müssen Sie den folgenden Code in Ihre Themedateien einfügen, oder Sie können ein Code-Snippets-Plugin wie WPCode verwenden.

Wählen Sie einfach die Option „Benutzerdefinierten Code hinzufügen (neues Snippet)“, um die Seite „Benutzerdefiniertes Snippet erstellen“ in WPCode aufzurufen.

Wählen Sie hier „PHP Snippet“ als Codetyp aus und kopieren Sie dann den folgenden Code und fügen Sie ihn in das Feld „Codevorschau“ ein:

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

Klicken Sie anschließend auf die Schaltfläche „Snippet speichern“ und schalten Sie den Schalter von „Inaktiv“ auf „Aktiv“ um, um Ihre Einstellungen zu speichern.

Dieser Code überprüft die Anzahl der Kommentare für den angezeigten Beitrag und weist ihnen einen Wert zu, der auf der Anzahl basiert. Beispielsweise erhalten Beiträge mit weniger als 10 Kommentaren die Klasse „new“, Beiträge mit weniger als 20 Kommentaren werden als „emerging“ bezeichnet und Beiträge mit mehr als 20 Kommentaren als „popular“.

Nun müssen Sie die Anzahl der Kommentare als CSS-Klasse zur post_class-Funktion hinzufügen. Öffnen Sie dazu erneut die Seite „Benutzerdefiniertes Snippet erstellen“ und wählen Sie die Option „PHP Snippet“ aus dem Dropdown-Menü.

Fügen Sie dann den folgenden benutzerdefinierten Code in das Vorschaufeld ein:

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

Klicken Sie anschließend auf die Schaltfläche „Snippet speichern“.

Sie können nun den Schalter „Inaktiv“ auf „Aktiv“ umschalten.

Dadurch werden neue, aufkommende und beliebte CSS-Klassen zu allen Beiträgen hinzugefügt, basierend auf der Anzahl der Kommentare, die jeder Beitrag hat. Sie können jetzt benutzerdefinierte CSS hinzufügen, um jeden Beitrag auf der Grundlage seiner Popularität zu gestalten.

Sie können zum Beispiel den folgenden Code verwenden, um unterschiedliche Rahmenfarben für Beiträge hinzuzufügen, die von der Anzahl der geposteten Kommentare abhängen.

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

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Snippet speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Bonus: Anzeige einer anderen Seitenleiste für jeden Beitrag in WordPress

Nachdem Sie jeden Beitrag unterschiedlich gestaltet haben, können Sie auch eine eigene Seitenleiste für jeden Beitrag hinzufügen. Auf diese Weise können Sie spezifische Inhalte zu diesem Artikel präsentieren, die für die Nutzer von Interesse sein könnten.

Wenn Sie z. B. einen Reiseblog haben und einen Blogbeitrag über Sehenswürdigkeiten in Florida veröffentlicht haben, können Sie eine spezielle Seitenleiste mit Florida-Reiseangeboten erstellen. Alternativ könnten Sie ein Anmeldeformular für eine von Ihnen organisierte Florida-Reise anzeigen.

Um für jeden Beitrag eine andere Seitenleiste anzuzeigen, können Sie SeedProd verwenden, das beste Seitenerstellungs-Plugin für WordPress.

Die Drag-and-Drop-Oberfläche, mehr als 320 vorgefertigte Vorlagen und die Integration mit E-Mail-Marketingdiensten machen es zu einer hervorragenden Wahl.

Nach der Aktivierung des Plugins können Sie eine benutzerdefinierte Seite als Design für Ihre Landing Page und ein Layout mit einer Seitenleiste auswählen.

Danach können Sie ganz einfach Blöcke Ihrer Wahl aus der linken Spalte ziehen und ablegen, darunter Kontaktformulare, Archive, Werbegeschenke, Suchfelder, Kommentare und mehr.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltflächen „Speichern“ und „Veröffentlichen“ im Dropdown-Menü oben auf der Seite. Sie haben nun erfolgreich eine spezifische Seitenleiste für einen WordPress-Beitrag oder eine Seite erstellt.

Weitere Informationen finden Sie in unserer Anleitung, wie Sie für jeden Beitrag und jede Seite in WordPress eine andere Seitenleiste anzeigen können.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie jeden WordPress-Beitrag anders gestalten können. Vielleicht interessieren Sie sich auch für unseren Leitfaden für Einsteiger zur Gestaltung von Tags in WordPress und unsere Liste der beliebtesten Tipps, Tricks und Hacks für WordPress.

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.