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. 🙂

23 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

    Antworten
  2. Guten Tag,
    ich hoffe, ich habe nichts überlesen und meine Antwort ist schon in obigen Beiträgen enthalten.
    Also seit Ende 2018 wird von meiner Redaktion eine WordPress-Installation mit Theme Enfold betrieben. Bisher kommen die neuen Artikel mit Beitragsbild immer im oberen Bereich dazu. Die Startseite ist inzwischen enorm voll und lädt dementsprechend langsam. Es wäre schön, wenn ich festlegen könnte pro Seite 10 Artikel, weitere dann auf Seite 2 / 3/ 4 usw.
    Zwar ist unter Kategorien seitlich in einer Auswahlbox alles vorhandene automatisch aufgeführt, aber nur anhand der Überschrift weiss man ja nicht was dahinter steht.
    Wäre für Tipps ausserordentlich dankbar.
    Liebe Grüße
    Linde

    Antworten
    • Moin, ich habe noch nie mit dem Theme gearbeitet. Aber da die Funktionen in diesem Fall alle vom Theme kommen, passt das nicht so richtig zu meiner individuellen Lösung. Es sei denn ihr wollt selber entsprechende Übersichten erstellen.
      Eine passende Einstellung für die Artikel-Anzahl gibt es aber bestimmt auch für Enfold. Da würde ich nochmal nachforschen. Für Artikel auf mehreren Seiten gibt es den Blog-Feed und die Archiv Ansichten (die ihr im Zweifel natürlich noch anpassen könnt). Da braucht es in der Regel keine Extra-Lösung für.
      Liebe Grüße!

      Antworten
  3. Hallo zusammen,
    ich benutze das Enfold-Theme und bei mir funktioniert der eigene Shortcode einfach nicht. Ich habe ihn in einem code-Block und auch in einem shortcode-Block aufgerufen. Aber auf der Seite passiert nichts.
    Was mache ich falsch?
    Andreas

    Antworten
    • Hallo Andreas,
      eine Ferndiagnose ist da immer schwierig. Wenn gar nichts passiert, wird die Funktion eventuell gar nicht ausgeführt.
      Stimmen die Funktions- und Shortcodenamen?
      Hast du bereits andere Funktionen in der functions.php, die erfolgreich genutzt werden?
      Beste Grüße!

      Antworten
  4. Hallo Timo,

    ich habe eine Frage. Ich erstelle gerade eine neue Seite zu meinem Online Weinhandel. Ich habe bereits für jeden Weinproduzenten eine eigene Seite erstellt, um über die jeweiligen Produzenten zu informieren. Gerne würde ich am Ende jeder dieser Seiten die jeweiligen Weine des Produzenten (möglichst automatisch) anzeigen lassen. Ich habe bereits Attribute zu jedem Wein erstellt und diese mit dem jeweiligen Weinproduzenten verknüpft.
    Welches ist die beste Möglichkeit, die richtigen Produkte einzufügen. Ich hoffe, ich habe mich verständlich ausgedrückt. Zur besseren Verständlichkeit habe ich direkt einen Link zu einem der Weinproduzenten eingefügt.
    Vielen Dank, Christoph

    Antworten
    • Hallo Christoph,
      ich weiß nicht wie viele Weinproduzenten du hast. Aber ich könnte mir vorstellen, dass du die Weinproduzenten als (Unter-) Kategorie anlegst. Dann kannst du die jeweiligen Weine in die Kategorie legen und unter der Hauptseite einfach ausgeben.
      Beste Grüße, Timo

      Antworten
  5. Hi, ich habe seit Kurzem folgendes Problem:

    meine Startseite zeigt nicht mehr den Beitragstext an. Das hat sie aber zuvor getan. Jetzt sehe ich nur die Überschrift und das Beitragsbild. Ich hoffe, du kannst mir helfen.

    Liebe Grüße,

    Anna

    Antworten
    • Hallo Anna,
      solche Probleme können ganz verschiedene Ursachen haben. Eine generelle Beurteilung ist da leider unmöglich!
      Im Zweifel mal die Vorschau eines Standard-Themes ansehen und gucken, ob das Problem dort auch auftritt. Außerdem mal temporär Plugins deaktivieren.
      Damit lässt sich der Fehler eventuell bereits einkreisen!

      Antworten
  6. ich bin so dankbar für die wertvollen Hilfen, die ich hier so finde. Danke dafür!

    Ich hab allerdings noch ein spezielleres Problem zu dem Thema. Ich möchte die Beiträge zeitversetzt anzeigen lassen und zwar jeden Tag einen, ab einem bestimmten Startdatum. Das Datum muss sich aber an die Registrierung anpassen. Also wenn via Membership jemand als autorisierter Nutzer frei gegeben ist, dann am ersten Tag Beitrag eins, am nächsten Beitrag zwei. Insgesamt 24 Tage hintereinander. Das muss sich quasi für jeden neuen Nutzer immer wiederholen. Wie Lektionen in einem Seminar mit variablem Start.

    Kann ich das auch irgendwie als Halbwissende hin kriegen und wenn ja.

    Antworten
    • Das freut mich! Dein Vorhaben ist sicher möglich (du kannst z.B. prüfen, ob ein User eingeloggt ist. Und dann sicher auch, wann er sich registriert hat usw.).
      Digimember* kann bspw. auch zeitversetztes Freischalten. Vielleicht wäre das eine einfachere Alternative, als alles selber zu schreiben.

      Antworten
  7. Hallo Timo,

    vielen Dank für Deinen Code zum eigenen Shortcode. Ich benutze ihn mit dem Lahanna Theme und er funktioniert soweit ganz gut. Allerdings ignoriert er bei mir die „category“ (bei mir „lesertest“) – er zeigt zwar auch die beiden Artikel der Kategorie „Lesertest“ an, aber leider auch alle anderen 🙁
    Sage ich im Shortcode, er soll nur 9 Artikel anzeigen, macht er das. Also scheint es nur an der category zu liegen. Hast Du evtl. einen Tipp für mich, was ich falsch gemacht habe?
    Danke Dir schon mal.

    Antworten
  8. Hallo Timo,

    ich war so frei und habe Deinen Code etwas umgestrickt und erweitert…
    Gerne möchte ich diesen Code hier zur freien Verfügung bereitstellen.
    Die PHP Function:

    function shortcode_posts_function()
    {
    //Parameter für Posts
    $args = array(
    ‚category‘ => 1510,
    ’numberposts‘ => 4
    );

    //Posts holen
    $posts = get_posts($args);

    //Inhalte sammeln
    $content = “;
    foreach ($posts as $post) {
    $content .= “;
    $content .= ‚ID) . ‚“>‘ . $post->post_title . ‚‚;
    $content .= ‚ID) . ‚“>ID, ‚full‘) . ‚“ class=“thumb“>‚;
    $content .= “ . $post->post_excerpt . “;
    $content .= ‚ID) . ‚“/>Weiterlesen‚;
    $content .= “;
    }
    //Inhalte übergeben
    return $content;
    }
    add_shortcode(‚posts‘, ’shortcode_posts_function‘);

    Das CSS:
    .posts {
    display: flex;
    flex-wrap: wrap;
    }
    .posts .post {
    width: 50%;
    padding: 20px;
    box-sizing: border-box;
    }
    .posts .post .post_img {
    float: left;
    width: 45%;
    padding: 0 10px 0 10px;
    }
    .posts .post .post_excerpt {
    float: right;
    width: 50%;
    }
    .posts .post .title {
    font-size: 20px;
    }

    Liebe Grüße

    Jörg

    Antworten
    • Danke dir!
      Genau so ist es gedacht – ich liefere die Basics und wer möchte passt es für sich entsprechend an. Meine Variante ist mittlerweile auch weitaus komplexer geworden. 🙂

      Antworten
    • hmmm – den Code zu veröffentlichen hat leider nicht so geklappt…
      Sollte Interesse bestehen, kann ich ihn Dir ja auch gerne per Mail zuschicken… oder lösche diesen Beitrag einfach, wenn es nicht passen sollte 🙂

      LG

      Jörg

      Antworten

Schreibe einen Kommentar zu Alexandra Schneidewind Antworten abbrechen