Die WordPress-Loop ist ein wesentlicher Bestandteil der Darstellung von Inhalten auf deiner WordPress-Seite. Wenn du einige Teile deiner Website anpassen möchtest (oder dich in die WordPress-Entwicklung einarbeiten willst), musst du die WordPress-Loop kennen.
Egal, ob du noch nie etwas von der WordPress-Loop gehört hast oder bereits mit ihr vertraut bist: In diesem Beitrag erfährst du alles, was du über die WordPress-Loop wissen musst.
Wir erklären dir, was die Loop ist und warum es nützlich sein kann, mit ihr zu arbeiten. Dann zeigen wir dir Schritt für Schritt, wie du mit der Loop in PHP-Vorlagen (für klassische Themes) und mit dem Query Loop-Block in neueren Block-Themes arbeiten kannst.
Fangen wir ganz am Anfang an…
Was ist die WordPress-Loop?
Die WordPress-Loop ist das, was WordPress verwendet, um Inhalte auf deiner Seite anzuzeigen. Dabei handelt es sich traditionell um PHP-Code, den du mit Template-Tags anpassen kannst. Die neueren WordPress-Block-Themes verwenden jedoch den Query Loop-Block anstelle von PHP.
Technisch gesehen fragt die Loop die Datenbank deiner Website ab, um die Daten für jeden Beitrag abzurufen, und zeigt diese Daten dann entsprechend einer Vorlage an. Um diese Vorlage zu steuern, kannst du eine Reihe von Template-Tags oder Blöcken verwenden, je nachdem, ob du PHP oder den Query Loop-Block verwendest.
Nehmen wir an, du hast eine Seite, auf der deine neuesten Blogbeiträge aufgelistet sind, z. B. die Hauptseite deines Blogs:
- Zuerst prüft die Loop, ob Beiträge vorhanden sind.
- Wenn dies der Fall ist, wird der erste Beitrag gemäß deiner Vorlage angezeigt.
- Dann prüft sie, ob ein weiterer Beitrag vorhanden ist. Wenn es einen weiteren Beitrag gibt, wird die Vorlage erneut „durchgeloopt“ und der zweite Beitrag mit der gleichen Vorlage angezeigt.
- Die Loop wird so lange fortgesetzt, bis keine Beiträge mehr vorhanden sind (oder eine andere Grenze erreicht wird, z. B. durch Paginierungsregeln).
Hier ist ein Frontend-Beispiel, wie die Loop im Kinsta-Blog aussieht – jedes hervorgehobene Kästchen ist eine weitere Iteration der „Loop“. Du kannst sehen, dass alle sechs Boxen die gleiche Vorlage verwenden.
Wann verwendet WordPress den Loop, um Inhalte anzuzeigen?
WordPress nutzt den Loop, um Inhalte auf jeder Seite anzuzeigen, die mehrere Inhalte enthält (Beiträge, Seiten, benutzerdefinierte Beitragstypen usw.).
Hier sind einige der wichtigsten Situationen, in denen WordPress die Loop verwendet:
- Homepage der Website, die deine letzten Beiträge anzeigt
- Hauptseite für den Blog
- Kategorie-Seiten
- Tag-Listenseiten
- Seiten mit Suchergebnissen
- Seiten für benutzerdefinierte Beiträge
Technisch gesehen kann WordPress die Loop auch verwenden, um einen einzelnen Inhalt anzuzeigen. In diesen Fällen würde die „Loop“ nach der Abfrage des ersten Artikels enden.
Die meisten Menschen denken bei der WordPress-Loop jedoch an eine Loop, in der mehrere Artikel in einer Art Liste angezeigt werden.
Wofür kannst du die WordPress-Loop verwenden?
Wenn du lernst, wie du die WordPress-Loop bearbeiten und manipulieren kannst, kannst du mit WordPress benutzerfreundlichere und dynamischere Websites erstellen.
Hier sind drei der wichtigsten Möglichkeiten, wie du die WordPress-Loop nutzen kannst, um deine Website zu verbessern…
Steuerung der Anzeige von grundlegenden Beitragsinhalten und Metadaten
Der häufigste Grund, warum du die WordPress-Loop anpassen möchtest, ist die Steuerung des grundlegenden Layouts für den Inhalt deiner Website.
Nehmen wir zum Beispiel an, du möchtest das Layout deiner Blog-Listenseite steuern. Indem du die WordPress-Loop manipulierst, kannst du das Layout wichtiger Elemente wie Titel, Inhalt, Autor, Metadaten (z. B. das Veröffentlichungsdatum) und so weiter steuern.
Mit Hilfe von Bedingungen kannst du auch unterschiedliche Layouts für verschiedene Arten von Inhalten erstellen. Du könntest z. B. ein Layout verwenden, um Beiträge aus der Kategorie „Nachrichten“ aufzulisten, und ein anderes Layout, um Beiträge aus der Kategorie „Interview“ aufzulisten.
Auf diese Weise kannst du das Design für die verschiedenen Arten von Inhalten auf deiner Seite optimieren und ein tolles Erlebnis für deine Besucher schaffen.
Einfügen von benutzerdefinierten Felddaten zum Aufbau dynamischerer Websites
Wenn du weißt, wie du die WordPress-Loop nutzen kannst, kannst du mit WordPress auch dynamischere Inhaltsseiten erstellen.
Nehmen wir zum Beispiel an, du möchtest eine Website mit Immobilienangeboten erstellen. Als Teil davon möchtest du eine Seite mit Informationen über Häuser, die zum Verkauf stehen, über einen von dir erstellten benutzerdefinierten Beitragstyp „Haus“ einrichten.
Wenn du das Standarddesign für die Auflistung von Beiträgen verwendest, das mit deinem Theme geliefert wird, werden nur grundlegende Informationen wie der Titel und der Inhalt angezeigt – genau wie bei deinen normalen Blogbeiträgen.
Wenn du die WordPress-Loop für den Beitragstyp „Haus“ bearbeitest und die entsprechenden Template-Tags hinzufügst, kannst du Informationen aus benutzerdefinierten Feldern einfügen, die du verwendest, z. B. die Anzahl der Schlafzimmer und Bäder in jedem Haus, die Quadratmeterzahl und so weiter.
Einfügen von Nicht-Beitragsinhalten in deine Beitragslisten (z. B. Anzeigen)
Wenn du lernst, wie du die WordPress-Loop verwendest, kannst du auch nicht-dynamische Inhalte in die Inhaltslisten deiner Website einfügen. Das sind Inhalte, die deine Website nicht aus der WordPress-Datenbank bezieht.
Angenommen, du möchtest ein Werbebanner zwischen den einzelnen Beiträgen in der Liste einfügen (oder eine andere Art von statischem Inhalt). Wenn du die Loop bearbeitest, kannst du deine Werbung ganz einfach an jeder Stelle des Layouts einfügen.
Zwei Optionen für die Arbeit mit der WordPress-Loop
Bei der Entwicklung moderner WordPress-Themes hängt die Art und Weise, wie du mit der WordPress-Loop arbeitest, davon ab, welche Art von Theme du verwendest.
Früher basierten alle WordPress-Themes auf PHP-Vorlagen, so dass du mit dem Loop über PHP in diesen Theme-Vorlagendateien arbeiten musstest. Heutzutage werden diese Arten von Themes als klassische WordPress-Themes bezeichnet.
Die meisten beliebten WordPress-Themes verwenden immer noch diesen klassischen Ansatz, d.h. du arbeitest mit PHP mit dem WordPress-Loop. Einige Beispiele für klassische Themes sind Astra, GeneratePress, Kadence, Neve, OceanWP, und so weiter.
Die neuen WordPress-Block-Themes, die auf dem Site-Editor aufbauen, verwenden jedoch keine PHP-Vorlagendateien mehr wie die klassischen Themes, sodass du den Loop nicht mit PHP anpassen kannst, wenn du ein Block-Theme verwendest. Stattdessen verwenden diese neuen Block-Themes einen speziellen „Query Loop“-Block, um den WordPress Loop anzupassen.
In unserer Liste der besten Block-Themes findest du einige Beispiele für beliebte Themes, die diesen Ansatz verwenden.
Im Folgenden zeigen wir dir, wie du mit beiden Ansätzen mit der WordPress-Loop arbeiten kannst:
- Wenn du ein klassisches Theme verwendest, benutzt du PHP, um mit der Loop zu interagieren.
- Wenn du ein Block-Theme verwendest, benutzt du die Blockmethode Query Loop, um mit der Loop zu interagieren.
Wenn du dir nicht sicher bist, welche Art von Theme du verwendest, kannst du die Optionen im Menü „Erscheinungsbild“ in deinem WordPress-Dashboard einsehen:
- Wenn du andere Optionen wie Anpassen, Widgets und den Editor für Theme-Dateien siehst, dann verwendest du ein klassisches Theme.
- Wenn du eine Editor-Option ohne die anderen Optionen siehst, bedeutet das normalerweise, dass du ein Block-Theme verwendest.
So verwendest du die WordPress-Loop mit klassischen Themes (Code)
Wenn du ein klassisches WordPress-Theme verwendest, arbeitest du mit der WordPress-Loop innerhalb der PHP-Vorlagendateien deines Themes.
Hier ist ein Beispiel für eine sehr einfache Implementierung der WordPress-Loop:
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();
endwhile;
else:
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
?>Damit du besser verstehst, was dieser Code macht, werden wir ihn in drei Abschnitte unterteilen:
- Öffnen der Loop
- Verwendung von Template-Tags, um zu steuern, welche Inhalte angezeigt werden sollen
- Schließen der Loop
Dann gehen wir auf das etwas fortgeschrittenere Thema der Verwendung von bedingten Anweisungen ein, um die Loop an verschiedene Situationen anzupassen.
So beginnst du die WordPress-Loop
Um die WordPress-Loop zu beginnen, brauchst du vier Elemente:
<?php– Dies teilt deinem Webserver mit, dass du PHP verwenden wirst.if ( have_posts() )– Damit wird deinem Server mitgeteilt, dass er prüfen soll, ob die Datenbank deiner Website Beiträge enthält, die der Abfrage entsprechen, und dann den folgenden Code ausführen soll, wenn es Beiträge gibt. Wenn es keine Beiträge gibt, kannst du eine else-Anweisung verwenden, um einen Ausweichtext hinzuzufügen, den wir weiter unten behandeln.while ( have_posts() )– Die else-Anweisung teilt deinem Server mit, dass er die Loop so lange fortsetzen soll, wie es Beiträge gibt. Das Limit wird in der Regel durch deine Wahl im Bereich Einstellungen → Lesen festgelegt. Wenn du deine Seite zum Beispiel so konfigurierst, dass bis zu 10 Beiträge pro Seite angezeigt werden, wird der Server die Loop für bis zu 10 Beiträge fortsetzen (solange du mindestens 10 Beiträge veröffentlicht hast).the_post();– Damit wird dein Server angewiesen, die Daten für jeden Beitrag aus der Datenbank deiner Website abzurufen. Du kannst die Anzeige dieser Daten mit Template-Tags steuern, die wir im nächsten Abschnitt behandeln.
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();So steuerst du den Inhalt der WordPress-Loop
Sobald du die WordPress-Loop geöffnet hast, kannst du mithilfe von Template-Tags festlegen, welche Informationen du für jeden Beitrag anzeigen möchtest und wie das allgemeine Layout* dieser Inhalte aussehen soll.
Die Template-Tags, die du innerhalb der Loop verwendest, werden für jeden angezeigten Beitrag wiederholt.
Hier sind einige der gebräuchlichsten Template-Tags, die du vielleicht verwenden möchtest:
the_title()the_content()the_excerpt()the_post_thumbnail()the_author()next_post_link()the_ID()the_meta()the_shortlink()the_tags()the_time()previous_post_link()the_category()
Wenn du mehr benutzerdefinierte WordPress-Seiten erstellst, kannst du Daten aus benutzerdefinierten Feldern in die WordPress-Loop einfügen. Am einfachsten geht das mit einem Plugin wie Advanced Custom Fields (ACF), Meta Box oder Pods, die alle ihre eigenen Funktionen für Template-Tags haben, die du in der WordPress-Loop verwenden kannst.
Schauen wir uns zum Beispiel die Syntax für eine einfache Loop an, die nur den Titel, das Vorschaubild und den Auszug eines jeden Beitrags anzeigt.
So könnte sie aussehen:
// first, we need to open the loop as we showed you in the previous section
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// now, we can use template tags to control what information to display for each post
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();So beendest du die WordPress-Loop
Um die WordPress-Loop zu beenden, musst du die while-Loop, die if-Anweisung und PHP beenden.
Um Situationen zu behandeln, in denen WordPress keine Beiträge zurückgeben kann, kannst du eine else-Anweisung hinzufügen, bevor du die if-Anweisung schließt.
So sieht es aus, wenn du die Loop für unser obiges Beispiel schließt und die else-Anweisung hinzufügst, um Situationen abzudecken, in denen keine Beiträge auf die Abfrage passen.
// first, we need to open the loop as we showed you in the previous section
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// now, we can use template tags to control what information to display for each post
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();
// once we're finished with the template tags, we can now close the loop
endwhile;
else:
// this tells your site what to do if no posts match the query
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
?>Verwendung von Conditionals zur Steuerung des Verhaltens in der WordPress-Loop
Sobald du die Grundstruktur der Loop verstanden hast, kannst du sie auf fortgeschrittenere Weise einsetzen.
Eine der besten Möglichkeiten, damit zu beginnen, ist die Verwendung von bedingten Anweisungen. Damit kannst du das Verhalten der Loop für verschiedene Arten von Inhalten leicht anpassen, wie z. B. in unserem Beispiel, in dem du ein Layout für die Beiträge der Kategorie „Interviews“ und ein anderes für die Beiträge der Kategorie „Nachrichten“ verwenden kannst.
Hier sind einige der bedingten Tags, die du verwenden kannst:
is_home()is_admin()is_single()is_page()is_page_template()is_category()oderin_category()is_tag()is_author()is_search()is_404()has_excerpt()
Wenn du auf die obigen Links klickst, kannst du Code-Beispiele sehen, wie du die WordPress-Loop für verschiedene Arten von Bedingungen anpassen kannst.
So könnte es zum Beispiel aussehen, wenn du die Beiträge in der Kategorie mit der ID „3“ anders gestalten würdest, indem du in_category verwendest und ein anderes <div> auf diese Beiträge anwendest.
<?php
// Start the Loop.
if ( have_posts() ) :
while ( have_posts() ) : the_post();
/* * See if the current post is in category 3.
* If it is, the div is given the CSS class "post-category-three".
* Otherwise, the div is given the CSS class "post".
*/
if ( in_category( 3 ) ) : ?>
<div class="post-category-three">
<?php else : ?>
<div class="post">
<?php endif;
// Display the post's title.
the_title( '<h2>', ';</h2>' );
// Display a link to other posts by this posts author.
printf( __( 'Posted by %s', 'textdomain' ), get_the_author_posts_link() );
// Display the post's content in a div.
?>
<div class="entry">
<?php the_content() ?>
</div>
<?php
// Display a comma separated list of the post's categories.
_e( 'Posted in ', 'textdomain' ); the_category( ', ' );
// closes the first div box with the class of "post" or "post-cat-three"
?>
</div>
<?php
// Stop the Loop, but allow for a "if not posts" situation
endwhile;
else :
/*
* The very first "if" tested to see if there were any posts to
* display. This "else" part tells what do if there weren't any.
*/
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
// Completely stop the Loop.
endif;
?>Wie man die WordPress-Loop in Block-Themes verwendet (Site Editor)
Wie bereits erwähnt, verwenden WordPress-Block-Themes den Site Editor, um die Vorlagen deines Themes zu steuern, und nicht die PHP-Vorlagendateien.
Aus diesem Grund kannst du die WordPress-Loop nicht mit PHP anpassen, wenn du ein Block-Theme verwendest. Stattdessen musst du den Query Loop-Block verwenden.
Die Grundprinzipien sind jedoch dieselben.
Im Wesentlichen verwendest du den Query Loop-Block, um die Loop zu öffnen. Innerhalb des Query Loop-Blocks befinden sich ein Post Template-Container und weitere Container für Paginierung und „keine Ergebnisse“.
Anstelle von Template-Tags, wie du sie in PHP verwendest, fügst du WordPress-Theme-Blöcke innerhalb des Post Template-Containers hinzu, um das Layout der einzelnen Loop-Elemente zu steuern.
So fügst du den Query Loop-Block hinzu
Gehe in den Site Editor (Erscheinungsbild → Editor) und erstelle oder bearbeite die entsprechende Vorlage. Du kannst die Loop auch zu einem einzelnen Inhalt hinzufügen, z. B. zu einer einzelnen Seite, auf der du Beiträge auflisten möchtest.
In beiden Fällen fügst du zunächst den Block Query Loop hinzu. Dann kannst du entweder eines der vorhandenen Loop-Muster deines Themes verwenden, indem du auf Auswählen klickst, oder mit einer leeren Vorlage beginnen, indem du auf Leer starten klickst.
Für dieses Beispiel entscheiden wir uns für Leer starten.
Du kannst dann zwischen verschiedenen Startvarianten wählen, wobei die einfachste Variante darin besteht, nur den Titel und den Inhalt jedes Artikels anzuzeigen.
Wenn du das getan hast, kannst du mit den Einstellungen in der Seitenleiste des Abfrage-Loop-Blocks festlegen, welche Inhalte du in die Loop aufnehmen willst (die „Abfrage“).
Standardmäßig werden normale Beiträge aufgelistet, aber du kannst den Beitragstyp ändern, um andere Arten von Inhalten aufzulisten. Du kannst auch die Reihenfolge ändern und Filter verwenden, um nur bestimmte Inhalte abzufragen, z. B. Inhalte, die einer bestimmten Kategorie angehören, von einem bestimmten Autor stammen usw.
Wie du die Loop-Vorlage anpasst
Mit den Blöcken im Themenbereich kannst du die Beitragsvorlage innerhalb der Abfrage-Loop weiter anpassen. Auch diese Blöcke dienen demselben Zweck wie die Template-Tags im PHP-Code.
Wenn du zum Beispiel den Autor für jeden Inhalt anzeigen möchtest, kannst du den Block Autorenname an der Stelle einfügen, an der der Name des Autors erscheinen soll.
Außerdem findest du weitere Blöcke für relevante Elemente, wie z.B. Featured Image, Datum, Kategorien, Tags, etc.
Wenn du dir die Gliederung ansiehst, siehst du, dass alle diese Blöcke zur Gruppe der Beitragsvorlage gehören.
Es gibt auch andere Gruppen, um die Paginierung und Situationen zu steuern, in denen die Abfrage keine Ergebnisse liefert.
Tipps für die Arbeit mit der WordPress-Loop
Da die Loop ein fester Bestandteil von WordPress ist, kann jeder Fehler oder Irrtum zu Problemen auf deiner Seite führen. Das gilt vor allem, wenn du mit PHP-Vorlagen arbeitest, da Syntaxfehler die Meldung „Es ist ein kritischer Fehler auf deiner Website aufgetreten“ auslösen können.
Um Probleme zu vermeiden, gibt es ein paar Tipps…
Experimentiere und lerne in einer lokalen Entwicklungsumgebung
Wenn du zum ersten Mal mit der WordPress-Loop arbeitest, möchtest du wahrscheinlich experimentieren und mit verschiedenen Konzepten herumspielen, um die Funktionsweise besser zu verstehen.
Um dies sicher zu tun, kannst du eine lokale WordPress-Entwicklungsumgebung verwenden, die dir eine sichere Sandbox auf deinem lokalen Computer bietet.
Mit dem kostenlosen Tool DevKinsta kannst du ganz einfach lokale WordPress-Seiten zum Testen und Lernen erstellen.
DevKinsta unterstützt sowohl Windows als auch Mac und ermöglicht es dir, so viele lokale Entwicklungsseiten zu erstellen, wie du brauchst.
Arbeiten in einer Staging-Umgebung für Live-Sites
Wenn du an der WordPress-Loop für eine Live-WordPress-Website arbeitest, empfehlen wir dir dringend, alles auf einer Staging-Site zu machen, bevor du die Änderungen auf deine Live-WordPress-Website überträgst.
Wenn du deine WordPress-Website bei Kinsta hostest, kannst du das integrierte Staging-Tool von Kinsta nutzen, um alle Änderungen in einer sicheren Sandbox vorzunehmen.
Sobald du sichergestellt hast, dass alles funktioniert, kannst du deine Staging-Änderungen ganz einfach auf die Live-Version deiner Website übertragen.
Plugin-Alternativen zur direkten Arbeit mit der WordPress-Loop
Wenn du die direkte Arbeit mit der WordPress-Loop etwas einschüchternd findest, gibt es mehrere beliebte Plugins, die dir alternative Möglichkeiten bieten, Inhalte zu „loopen“, ohne dass du PHP oder den Query Loop Block verwenden musst.
Hier sind einige WordPress Loop-Plugin-Alternativen, die du in Betracht ziehen solltest, wobei diese Liste keineswegs vollständig ist.
Elementor Pro
Elementor ist ein beliebtes visuelles Drag-and-Drop-Plugin für die Seitenerstellung. Mit Elementor Pro hast du Zugriff auf die vollständige Theme-Builder-Funktionalität, um deine Theme-Vorlagendateien mit Elementor zu gestalten. Im Jahr 2022 fügte Elementor Pro eine Loop Builder-Funktion hinzu, mit der du „geloopte“ Inhalte über die visuelle Oberfläche von Elementor steuern und anpassen kannst.
Auf dem Kinsta-Blog haben wir einen vollständigen Leitfaden zur Verwendung von Elementor und viele weitere Elementor-Inhalte geschrieben.
Bricks
Bricks ist ein weiterer beliebter visueller Website-Builder für WordPress. Zu den vielen Design-Tools gehört auch ein eigener Query-Loop-Builder, der einen vereinfachten Code-Ansatz verwendet, sowie viele zusätzliche Optionen in der grafischen Oberfläche.
Wir haben auch einen Leitfaden zur Erstellung von WordPress-Websites mit Bricks.
WP Show Posts
WP Show Posts bietet dir nicht so viel Flexibilität wie die beiden vorherigen Plugins. Wenn du jedoch nach einer einfachen Möglichkeit suchst, WordPress-Beiträge in verschiedenen Formaten aufzulisten, ist es vielleicht das einfachste Tool für diese Aufgabe.
Es ist kostenlos und stammt vom selben Entwickler wie das beliebte GeneratePress-Theme. Der Entwickler fügt dem Plugin zwar keine neuen Funktionen mehr hinzu, pflegt aber die bestehenden Funktionen des Plugins weiter.
Zusammenfassung
Um deine WordPress-Entwicklungsfähigkeiten zu verbessern, musst du die WordPress-Loop verstehen. Die Loop ist ein wesentlicher Bestandteil der Darstellung von Inhalten in WordPress; wenn du lernst, sie zu nutzen, hast du mehr Kontrolle über die Darstellung von Inhalten auf deiner Seite.
Da neuere WordPress-Block-Themes nicht mehr wie die klassischen Themes auf PHP-Templates angewiesen sind, musst du für die Arbeit mit dem Loop nicht unbedingt PHP verwenden. Wenn du dich der Bewegung der Block-Themes anschließt, kannst du stattdessen den Query Loop-Block verwenden, um ähnliche Effekte zu erzielen.
In jedem Fall wird es sich auszahlen, wenn du lernst, den WordPress Loop effektiver zu nutzen.
Da die WordPress-Loop ein grundlegender Bestandteil von WordPress ist, können Probleme mit der Loop deine Website zerstören. Um Probleme zu vermeiden, empfehlen wir, auf einer lokalen Entwicklungsseite von DevKinsta zu lernen oder die Staging-Tools zu nutzen, die Kinsta WordPress Hosting bietet, um in einer sicheren Umgebung zu arbeiten.
Schreibe einen Kommentar