WordPress Beiträge auf Seite anzeigen

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)

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
function shortcode_posts_function() {
	$content = "Yay!";
	return $content;
}
add_shortcode('posts', 'shortcode_posts_function');

Verwendest du nun den Shortcode [posts] 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);

	//Output Buffer starten
	ob_start();

	//Posts durchgehen und benötigte Daten holen
	foreach ($posts as $post) { ?>

		<!-- Beitragstitel -->
		<?php echo $post->post_title;?>

		<!-- Beitragsbild -->
		<?php echo get_the_post_thumbnail_url($post->ID, 'full'); ?>

		<!-- Beitragsurl -->
		<?php echo get_permalink($post->ID); ?>

	<?php } ?>

	<?php
	return ob_get_clean(); //Gibt Daten aus dem Buffer zurück, löscht und schließt den Buffer
}
add_shortcode('posts', 'shortcode_posts_function');

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, nutzen wir PHPs Output-Buffer. Dieser speichert die Ausgabe zwischen und kann den Inhalt anschließend zurückgeben.

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 ein DIV, damit wir die Elemente später vernünftig adressieren und gestalten können. Außerdem kommt jeder Einzel-Beitrag in ein eigenes DIV.

Mit Hilfe des Flexbox-Modells (mittlerweile bin ich auch warm damit geworden ;-)) können wir die Beiträge nun unkompliziert in zwei Spalten darstellen.

Angepasster Shortcode

//Eigener Shortcode
function shortcode_posts_function(){

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

	//Output Buffer starten
	ob_start();
	?>

	<!-- Hauptcontainer -->
	<div class="posts">
		<?php
		//Posts durchgehen und benötigte Daten holen
		foreach ($posts as $post) { ?>

			<!-- Post-Container -->
			<div class="post">

				<!-- Beitragstitel (verlinkt) -->
				<a href="<?php echo get_permalink($post->ID); ?>">
					<div class="title"><?php echo $post->post_title;?></div>
				</a>

				<!-- Beitragsbild (verlinkt) -->
				<a href="<?php echo get_permalink($post->ID); ?>">
					<img src="<?php echo get_the_post_thumbnail_url($post->ID, 'full'); ?>" class="thumb">
				</a>

			</div>
			<!-- Post-Container -->

		<?php } ?>
	</div>
	<!-- /Hauptcontainer -->

	<?php
	return ob_get_clean(); //Gibt Daten aus dem Buffer zurück, löscht und schließt den Buffer
}
add_shortcode('posts', 'shortcode_posts_function');

Einfaches CSS

.posts{
	display: flex;
	flex-wrap: wrap;
}
.posts .post{
	width: 50%;
	padding: 20px;
}
.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 einem Kunden zu …

Schreibe einen Kommentar