Seitentemplate mit zwei Loops erstellen

Kürzlich kam per Kommentar die Frage auf, wie sich ein Seitentemplate mit zwei Loops erstellen lässt. Zuerst sollen Beiträge einer Kategorie mit mittelgroßem Beitragsbild ausgegeben werden. Dann sollen weitere Beiträge derselben Kategorie nur noch per Beitragstitel erscheinen. Da dies keine ungewöhnliche Frage ist, versprach ich, in einem Beitrag darauf einzugehen. Immerhin sieht man Vergleichbares immer wieder: Zuerst der aktuellste Beitrag mit großem Beitragsbild, darunter eine Liste weiterer Beiträge mit kleinem Beitragsbild. Gerne genommen zum Beispiel auch eine Startseite, die untereinander für mehrere Themengebiete immer die aktuellsten fünf Beiträge ausgibt. Schließlich ist dafür das Arbeiten mit Beiträgen und Kategorien gerade gut: um gezielt einzelne Beiträge abfragen und an passender Stelle ausgeben zu können.

Allerdings sollte man sich vorher schon darüber im Klaren sein, was genau die Seite denn nun ausgeben soll, und entsprechend Kategorien und passende Beiträge vorbereiten.

Das Vorgehen setzt allerdings ein Child Theme voraus, ohne das die ganze Arbeit nach dem nächsten Theme Update für die Katz wäre.

Was ist ein Seitentemplate?

Auf die Frage, was ein Seitentemplate eigentlich ist und wie man es für das eigene Theme anlegen kann, bin ich zuvor schon einmal in dem Beitrag Seite mit Beiträgen einer Kategorie: page with posts eingegangen. Dabei beantwortet die Benennung allein bereits die Frage: Ein Seitentemplate ist eine Vorlage für eine WordPress Seite, die andere Inhalte darstellen soll als das Standardtemplate des Themes. Manche Themes bieten ohnehin mehrere Templates zur Wahl, so zum Beispiel für die Startseite oder die Autorenseite.

Die Wahl des Templates erfolgt jedenfalls in der Seiten-Bearbeitung über die Metabox Seiten-Attribute. Erscheint dort die Auswahl für das Template, so können Sie die unterschiedlichen Vorlagen ausprobieren. Gibt es dort noch keine Auswahl, so erscheint sie erst in dem Moment, in dem Sie selbst ein Seitentemplate hinterlegen.

Ein Seitentemplate für das Theme Twenty Seventeen erstellen

Twenty Seventeen zum Beispiel bringt neben dem Standardtemplate keine weitere Vorlage mit. Somit ist für die Darstellung einer jeden Seite (wie üblich) die page.php zuständig, die sich im Stammverzeichnis des Themes befindet. Diese Datei, die ihrerseits für die Darstellung der Inhalte die /template-parts/page/content-page.php aufruft, soll im Folgenden als Grundlage für das weitere Vorgehen dienen.

Was soll das Seitentemplate ausgeben?

Seitentemplate mit zwei Loops - und dem der Seite an sich
Seitentemplate mit zwei Loops – und dem der Seite an sich

Bevor Sie an einem Seitentemplate herumschrauben, brauchen Sie eine genaue Vorstellung davon, was es leisten soll. Die Möglichkeiten sind dabei recht vielfältig. Beispielsweise können Sie sich von der üblichen chronologischen Reihenfolge verabschieden. Stattdessen können Sie festlegen, dass die Beiträge auf dieser Seite alphabetisch sortiert sind. Wenn Sie die zufällige Anzeige mögen, können Sie auch dies definieren.

Für die folgende Anleitung jedenfalls lautet die Aufgabenstellung:

  1. Zeige mir zuerst zwei Beiträge der Kategorie Angebote. Gib hierfür das Excerpt des Textes mit dem Beitragsbild in mittlerer Größe aus. Das Bild soll dabei links ausgerichtet sein.
  2. Danach zeige mir vier weitere Beiträge der Kategorie Angebote. Gib für diese nur den jeweiligen Beitragstitel aus.

Nehmen Sie sich die page.php zur Grundlage und geben Sie ihr einen neuen Namen, indem Sie die Datei unter dem neuen Namen abspeichern und in der Datei zuoberst Template Name: Bezeichnung eingeben. In meinem Beispiel lautet der Template Name: Eigenes.

Wenn Sie mögen, können Sie den vorhandenen Loop, der die /template-parts/page/content-page.php aufruft, stehen lassen – oder auch löschen. Der Unterschied: Wenn Sie diesen Loop stehen lassen, wird die Seite auch den Text ausgeben, den Sie direkt auf die Seite schreiben. Sofern Sie das nicht brauchen, können Sie ihn auch löschen. Dann allerdings erscheint auf der Seite auch nicht der Seitentitel – es sei denn, Sie rufen auch den selbst ab.

Stehen bleiben müssen hingegen die Container wrap, primary und main sowie der Aufruf get_header und get_footer. Wenn Sie auf der Seite auch eine Sidebar haben möchten, ergänzen Sie diese zwischen den schließenden DIVs der primary und wrap Container, wie im Beitrag Twenty Seventeen Sidebar auf Seite einrichten beschrieben:

<div class="pagesidebar"><?php get_sidebar(); ?></div>

Zwei Wege, die zum Ziel führen

Im Folgenden beschreibe ich zwei verschiedene Methoden, mit denen Sie gezielt Beiträge abrufen können:

  1. WP_Query
  2. get_posts

Für beide Vorgehen gilt, dass alles Folgende von einem Container umschlossen sein sollte, damit Sie die Ausgabe der Beiträge konkret mittels CSS ansprechen können. Diesen neuen Container fügen Sie folglich innerhalb des main Containers ein:

<div class="eigeneshentry">

<!-- Hier folgen die Abfragen mittels WP_Query oder get_posts -->

</div>

1. WP_Query: Abfrage für den WordPress Loop definieren

WP_Query (deutsch: WordPress Abfrage) bietet die komplette Kontrolle über den WordPress Loop, indem sie zu Beginn des Loops ihre Argumente aufführt. Damit beeinflusst die Abfrage die Ausgabe und zeigt folglich nicht mehr alle Beiträge, sondern nur eine bestimmte Auswahl an. Das heißt für den gegebenen Fall, dass Sie mit der Abfrage festlegen, wie viele Beiträge der Kategorie Angebote Sie darstellen.

Der erste Loop

Die Abfrage für den ersten Loop lautet im gegebenen Fall also:

<?php $custom_query = new WP_Query('posts_per_page=2&category_name=angebote'); 
while($custom_query->have_posts()) : $custom_query->the_post(); ?>

Der Loop kann ein vorhandenes Template aufrufen, zum Beispiel die Datei content-excerpt.php im Verzeichnis template-parts/post/, indem Sie get_template_part  nutzen. Alternativ können Sie aber auch selbst definieren, welche Elemente Sie ausgeben wollen. Im gegebenen Fall sind dies neben dem Beitragstitel the_title  auch das Beitragsbild in mittelgroßer Darstellung the_post_thumbnail(‘medium’)  sowie der Textauszug des Beitrags the_excerpt  mit einem Weiterlesen-Button. the_permalink  sorgt dafür, dass der Klick auf Beitragsbild, Titel und Weiterlesen-Button zum passenden Beitrag führt.

Wenn Sie diese Elemente mit einem Container mit eigener Klasse (hier: .edescription) umschließen, lässt sich die Darstellung der einzelnen Komponenten per CSS gut anpassen. Der Loop endet schließlich mit einem endwhile  sowie einem wp_reset_postdata .

<div class="edescription">
<a href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
<div class="eigenesthumb"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium'); ?></a></div>
<?php the_excerpt(); ?><a class="more-link" href="<?php the_permalink(); ?>"><?php _e( 'Weiterlesen' ); ?></a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>

Der zweite Loop

Nun folgt der zweite Loop, dessen Abfrage mit einem offset  dafür sorgt, dass es zu keiner Dublette kommen kann. Eine Überschrift für den folgenden Block kann übrigens auch nicht schaden.

<h2>Weitere Angebote</h2>
<?php $custom_query = new WP_Query('posts_per_page=4&category_name=angebote&offset=2'); 
while($custom_query->have_posts()) : $custom_query->the_post(); ?>

Entsprechend der Aufgabenstellung gibt dieser Loop nur den Beitragstitel aus. Auch hier sorgt ein Container mit einer eigenen Klasse (.edescription1) dafür, dass diese Beitragstitel per CSS definiert werden können.

<div class="edescription1">
<a href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
</div>

<?php endwhile;?>
<?php wp_reset_postdata(); ?>

2. get_posts: Abfrage mittels Array

Das Vorgehen mit get_posts arbeitet hingegen mit sogenannten Arrays, die ihre Argumente für die Abfrage mitbringen. Wenngleich etwas anders geschrieben, entsprechen sie inhaltlich dem Vorgehen der WP_Query.

Die erste Abfrage

Nach dem Array sorgt get_posts dafür, dass nun Beiträge ausgegeben werden, die der Abfrage entsprechen. Deren Darstellung nutzt wiederum dasselbe Vorgehen wie WP_Query. Die Abfrage allerdings endet mit dem Befehl endforeach .

<?php
$args = array( 'posts_per_page' => 2, 'category_name' => 'angebote', );
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

<div class="edescription">
<a href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
<div class="eigenesthumb"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium'); ?></a></div>
<?php the_excerpt(); ?><a class="more-link" href="<?php the_permalink(); ?>"><?php _e( 'Weiterlesen' ); ?></a>
</div>

<?php endforeach;?>

Die zweite Abfrage

Das zweite Array bestimmt, dass es sich um vier Beiträge der Kategorie Angebote handelt. Wobei auch hier ein offset  dafür sorgt, dass es zu keinen Dubletten kommen kann. Auch die zweite Abfrage endet mit einem endforeach .

<h2>Weitere Angebote</h2>
<?php
$args = array( 'posts_per_page' => 4, 'category_name'=> 'angebote', 'offset' => 2, );
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

<div class="edescription1">
<a href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
</div>

<?php endforeach;?>

CSS für die eingeführten Klassen

Ungeachtet des gewählten Vorgehens greift das folgende CSS. Schließlich bezieht es sich nur auf die eingeführten Klassen, und die sind für beide Methoden gleich.

.eigeneshentry {clear: right; float: left; width: 60%;}
.eigeneshentry a {color:red;}
.eigenesthumb {width:200px; float:left; margin:5px 20px 0 0;}
.edescription {margin-bottom: 50px;}
.edescription h2 {color:red;}
.edescription1 h2 {color:red; margin-bottom: 20px;}

Welche der beiden Methoden ist die bessere?

Beide Vorgehen funktionieren im Rahmen eines Seitentemplates und sorgen dafür, dass auf der Seite immer die aktuellsten Beiträge in der gewünschten Form ausgeben werden. Sprich: Sobald Sie einen neuen Beitrag der Kategorie Angebote veröffentlichen, wird die Seite mit diesem Seitentemplate die konkrete Ausgabe aktualisiert anpassen. Somit können Sie beide Methoden zum Beispiel auch dafür nutzen, auf einer Seite zuerst Ihre Angebote und dann Ihre neuesten Beiträge im Blog auszugeben.

Wenn Sie also ein Seitentemplate mit zwei Loops erstellen wollen, ist alles nur eine Frage der Abfrage!


Beitragsbild: Britta Kretschmer/Thorsten Schiller

Schlagwörter: , , , , , ,

Teilen Sie diesen Artikel mit anderen:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.