WordPress Beiträge auf Seite anzeigen (mit und ohne Plugin)

Wenn du Web-Projekte mit WordPress erstellst, wirst du früher oder später den Bedarf haben, Beiträge dynamisch auf einer Seite auszugeben. Sei es komplett, als Linkliste oder mit einem Intro-Text.

In diesem Artikel zeige ich dir, wie du genau dieses Vorhaben effektiv, schlank und flexibel umsetzen kannst.

Typische Anwendungsbeispiele

Es gibt viele Fälle, in denen die wordpress-typische Trennung von Beiträgen und Seiten eine dynamische Ausgabe von Inhalten einschränkt.

Das gilt zum Beispiel bei:

  • Startseiten, die festen Text mit bestimmten, aktuellen Beiträgen kombinieren wollen
  • Themenseiten, auf denen bestimmte Beiträge mit passenden Informationen angezeigt werden sollen
  • Seiten, die nur bestimmte Informationen von anderen Beiträgen anzeigen sollen (Shop-Ansicht)

Gutenberg-Block

Seit dem großen WordPress Update mit dem Gutenberg Editor (ab Version 5.0) gibt es einen Standard-Block „Neue Beiträge“.

Damit kannst du an einer beliebigen Stelle im Content deine neuesten Beiträge ausgeben. Somit bietet WordPress zum ersten Mal von Haus aus eine solche Möglichkeit.

Diese Ausgabe ist praktisch – aber leider sehr unflexibel. Daher findest du in diesem Artikel weitere, individuelle Alternativen.

Schlankes Plugin

Eine einfache Möglichkeit, die vor allem Designern und Webmastern mit CSS-Skills gefallen wird, ist das Plugin Display Posts Shortcode von Bill Erickson.

Es erlaubt dir, an einer beliebigen Stelle in deinem Content einen Shortcode einzufügen, welcher bestimmte Beiträge ausgibt. Damit bleibt dein Inhalt im Backend sauber und sehr gut lesbar.

Welche Beiträge genau ausgegeben werden, kannst du über eine große Auswahl an Attributen steuern. Du kannst damit zum Beispiel folgende Einstellungen vornehmen:

  • Nur Beiträge aus einer bestimmten Kategorie ausgegeben
  • Nur Beiträge mit einem definierten Tag (Schlagwort) ausgeben
  • Per IDs festlegen, welche Beiträge ausgegeben werden
  • Wieviele Beiträge in welcher Reihenfolge ausgegeben werden
  • Ob du nur den Beitragstitel mit Bild anzeigen möchtest, oder auch den Inhalts des Beitrags anreißen möchtest
  • … und unzählige Dinge mehr!

Beiträge zu einer bestimmten Kategorie kannst du so ausgeben:

[display-posts category="wunschkategorie"]

Soll der Artikel außerdem angerissen werden, reicht ein weiteres Attribut aus:

[display-posts category="wunschkategorie" include_excerpt="true"]

Und damit nur die 3 neuesten Artikel ausgegeben werden, ergänzt du einfach folgendes:

[display-posts category="wunschkategorie" include_excerpt="true" posts_per_page="3"]

Eine Übersicht der möglichen Parameter findest du hier. Außerdem lohnt sich ein Blick in das Plugin-Wiki bei Github. Die Möglichkeiten sind praktisch endlos!

Wie du siehst, ist dieses einfache Plugin sehr mächtig, wenn es darum geht, deine WordPress-Seite auf das nächste Level zu heben. Hast du die nötigen Daten ausgegeben, kannst du sie nach belieben per CSS stylen.

Eigener Shortcode

Möchtest du es NOCH flexibler und schlanker, kommst du nicht um einen eigenen Shortcode herum. Du sparst dir damit fremde Plugins und lädst nur den Code, den du wirklich brauchst.

Ich zeige dir an einem einfachen Beispiel, wie du einen eigenen Shortcode für die Ausgabe von Beiträgen auf Seiten erstellst.

Die Wunsch-Ausgabe

Nehmen wir an, du möchtest per Shortcode den Titel und das Bild von allen Beiträgen in einer bestimmten Kategorie ausgeben. Beides soll verlinkt sein und auf den Leser per Klick auf entsprechenden Beitrag führen.

Optisch soll das Ganze als Grid mit zwei Spalten aufgebaut sein.

Wireframe

PHP und WordPress Funktionen

Als erstes legen wir uns einen eigenen Shortcode an. Der folgende Code kommt in die functions.php (Child-Theme benutzen).

//Eigener Shortcode [posts]
function shortcode_posts_function() {
$content = "Yay!";
return $content;
}
add_shortcode('posts', 'shortcode_posts_function');

Verwendest du nun den Shortcode in deiner Seite, wird an dieser Stelle ein euphorisches „Yay!“ ausgegeben. Das zeigt schonmal, dass unser Shortcode funktioniert und wird sind bereit, weiterzumachen.

Dann kann es jetzt ans Eingemachte gehen!

Was wir brauchen sind nun alle Beiträge aus einer bestimmten Kategorie. Dazu nutzen wir die WordPress Funktion „get_posts“ mit den passenden Parametern.

Wir holen uns damit max. 6 Beiträge aus der Kategorie „produkte“.

function shortcode_posts_function(){

    //Parameter für Posts
    $args = array(
        'category' => 'produkte',
        'numberposts' => 6
    );
    
    //Posts holen
    $posts = get_posts($args);

    //Inhalte sammeln
    $content = "";

    foreach ($posts as $post) {
        $content .= "Titel: ".$post->post_title."<br/>";
        $content .= "Bild URL: ".get_the_post_thumbnail_url($post->ID, 'full')."<br/>";
        $content .= "Link: ".get_permalink($post->ID)."<br/>";
        $content .= "<br/><br/>";
    }

    //Inhalte übergeben
    return $content;
}

add_shortcode('posts', 'shortcode_posts_function');

Du siehst jetzt eine einfache, größtenteils unformatierte Ausgabe deiner Post-Daten (Titel, URL des Beitragsbildes, Permalink).

Wichtig: Ein Shortcode sollte niemals direkt etwas ausgeben (z.B. per „echo“).

Der Inhalt muss per „return“ zurückgegeben werden, um an der richtige Stelle im Content zu erscheinen.

Um trotzdem mit „echo“ und einfachem HTML arbeiten zu können, kannst du PHPs Output-Buffer nutzen. Dieser speichert die Ausgabe zwischen und kann den Inhalt anschließend zurückgeben.

Da unsere Ausgabe noch relativ simpel ist, verzichte ich in diesem Fall darauf, den Output Buffer zu verwenden.

Das Ergebnis gestalten

Unser Shortcode gibt uns jetzt die benötigten Daten aus. Im letzten Schritt gestalten wir die Ausgabe jetzt passend per HTML/CSS und verlinken sowohl den Titel als auch das Bild.

Dazu ergänzen wir unseren PHP-Code um notwendiges HTML. Die ganze Ausgabe muss in einen eigenen Container, damit wir die Elemente später vernünftig adressieren und gestalten können.

Außerdem kommt auch jeder Einzel-Beitrag in einen eigenen Container. Mit Hilfe des Flexbox-Modells (mittlerweile bin ich auch warm damit geworden ;-)) können wir die Beiträge anschließend unkompliziert in zwei Spalten darstellen.

Hierbei musst du besonders aufpassen, dass du die einfachen und die doppelten Anführungszeichen richtig setzt.

Ich setze die PHP Ausgabe in einfache Anführungszeichen, damit ich im HTML die normalen, doppelten Anführungszeichen verwenden kann.

Angepasster Shortcode

function shortcode_posts_function(){

    //Parameter für Posts
    $args = array(
        'category' => 'produkte',
        'numberposts' => 6
    );
    
    //Posts holen
    $posts = get_posts($args);

    //Inhalte sammeln
    $content = '<div class="posts">';

    foreach ($posts as $post) {
        $content .= '<div class="post">';
        $content .= '<a href="'.get_permalink($post->ID).'"><div class="title">'.$post->post_title.'</div></a>';
        $content .= '<a href="'.get_permalink($post->ID).'"><img src="'.get_the_post_thumbnail_url($post->ID, 'full').'" class="thumb"></a>';
        $content .= '</div>';
    }

    $content .= '</div>';

    //Inhalte übergeben
    return $content;
}

add_shortcode('posts', 'shortcode_posts_function');

Einfaches CSS

Mit ein wenig CSS können wir unsere Ausgabe nun stylen.

.posts{
	display: flex;
	flex-wrap: wrap;
}
.posts .post{
	width: 50%;
	padding: 20px;
	box-sizing: border-box;
}
.posts .post .title{
	font-size: 20px;
	margin: 0 0 15px 0;
}

Das Ergebnis

Und so könnte das Ganze am Ende aussehen:

Beispiel

Die restliche Gestaltung und Anpassung überlasse ich jetzt ganz dir! Du kannst die Snippets perfekt an deine eigenen Vorstellungen anpassen.

Kundentaugliches Ergebnis

Nun kannst mit Hilfe eines einfachen Shortcodes passende Beiträge ausgeben (und noch viel mehr).

Damit lassen sich auch ohne aufwendige Backend-Anpassungen individuelle WordPress-Seiten gestalten. Und den Einsatz eines solchen Shortcodes traut man sogar Artikel-Redakteuren oder Kunden zu. 🙂

2 Gedanken zu “WordPress Beiträge auf Seite anzeigen (mit und ohne Plugin)”

  1. Hallo,

    vielen Dank für den Artikel. Wie kann ich die Darstellung im eigenen Shortcode erreichen, dass das Bild neben der Überschrift und einem Auszug angezeigt wird?

    Viele Grüße

    Alex

Schreibe einen Kommentar