Die WordPress-Schleife erklärt: Was es ist und wie es funktioniert

Der Loop ist ein zentraler Bestandteil von WordPress. Ohne sie würden Sie auf keiner WordPress-Website Inhalte sehen. Es ist dafür verantwortlich, dass Artikel auf der Blog-Seite und in Archiven sowie statische Inhalte auf einzelnen Seiten erscheinen.

Wenn Sie ein Theme-Designer sind, werden Sie nicht darum herumkommen, den Umgang damit zu erlernen. Als gelegentlicher WordPress-Benutzer wissen Sie jedoch möglicherweise nicht einmal, dass es existiert.

Um dem entgegenzuwirken, erklären wir in diesem Beitrag die WordPress-Schleife im Detail. Wir gehen darauf ein, was es ist und wie es funktioniert und wo es in WordPress zu finden ist. Sie werden auch lernen, wie Sie Ihre eigene erstellen und einige Beispiele der WordPress-Schleife sehen, um Ihr Verständnis davon zu festigen.

Was ist die WordPress-Schleife (und wo finden Sie sie)?

Wenn Sie kurz erklären sollten, was die WordPress-Schleife ist, handelt es sich einfach um das Markup, das Inhalte auf Seiten einer WordPress-Website abruft und ausgibt. Ob es sich um eine statische Seite, einen Beitrag, eine Blogseite oder ein Archiv handelt – überall dort, wo WordPress Inhalte aus der Datenbank zieht und auf einer Seite anzeigt, ist die Schleife involviert.

Aber warum heißt es überhaupt Schleife?

Weil es wiederholt ausgeführt wird. Außerdem besteht es, wie Sie unten sehen werden, buchstäblich aus einer PHP-Schleife.

Wie oft läuft die WordPress-Schleife?

Bis nichts mehr zu zeigen ist. Auch auf statischen Seiten durchläuft es die verfügbaren Inhalte. In diesem Fall stoppt es jedoch nach einem Durchgang.

Wie sieht die WordPress-Schleife aus?

Um klarer zu machen, wovon wir sprechen, schauen wir uns ein Beispiel an und gehen es Schritt für Schritt durch. Hier ist ein Beispiel dafür, wie eine einfache WordPress-Schleife aussieht:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

Wenn Sie PHP bereits kennen oder WordPress-Entwickler sind, sollten Sie keine Probleme haben, es zu verstehen. Für alle anderen gehen wir die Teile jedoch einzeln durch.

• if ( have_posts() ) : — Dies ist eine if -Anweisung, die die Funktion have_posts() verwendet. Wenn Anweisungen in der Programmierung üblich sind, sagen sie einfach „Wenn die folgende Bedingung zutrifft, fahren Sie fort“. In diesem Fall ist die Bedingung have_posts() , was einfach eine Überprüfung ist, ob irgendwelche Posts existieren, die angezeigt werden könnten.
• while ( have_posts() ) : — Diese Zeile ist eine while -Schleife und markiert den Beginn der WordPress-Schleife. Es führt den darin enthaltenen Code aus, solange seine Bedingung wahr ist. Auch hier ist die Bedingung, ob WordPress irgendwelche Beiträge in petto hat. Wie oft es true zurückgibt, wird durch die Anzahl der Posts bestimmt, die in den WordPress-Einstellungen in der Admin-Oberfläche eingestellt sind.
• the_post(); — Dies ist der Code, den die Schleife ausführt. Es ist eine WordPress-Funktion, die alle verfügbaren Daten für den nächsten Beitrag aufruft und speichert, um sie für die Anzeige vorzubereiten. Dafür haben wir viele Template-Tags, über die wir weiter unten sprechen werden.
• // Display content here — Hier platzieren wir das Markup, das bestimmt, welcher Teil des Inhalts auf welche Weise angezeigt werden soll. Es ist normalerweise eine Mischung aus PHP und HTML. Wir zeigen es hier nicht, weil es komplexer ist und wir später darauf eingehen werden.
• endwhile; — Das Stück Code, das die while -Schleife schließt, nachdem es getan hat, was wir tun sollen.
• endif; — Dasselbe wie oben, aber für die if -Anweisung.

Im Grunde ist die Struktur also wie folgt: Überprüfen Sie, ob Beiträge vorhanden sind, ziehen Sie dann die erforderlichen Daten aus der Datenbank und zeigen Sie sie auf eine vordefinierte Weise an. Wiederholen Sie dies, solange es gültige Beiträge zum Anzeigen gibt.

Alternative Syntax

Eine kurze Sache, Sie werden die Schleife manchmal auch so geschrieben sehen:

 if ( have_posts() ) { while ( have_posts() ) { the_post(); // Display content here } // end while } // end if

Dies ist genau dasselbe wie im obigen Beispiel, nur in einer alternativen PHP-Syntax. Welche Sie verwenden, ist wirklich Ihnen überlassen. Der Konsistenz halber fahren wir mit der ersten Variante fort.

Wo finde ich die WordPress-Schleife?

Die Tatsache, dass die Schleife immer dann am Werk ist, wenn Inhalte auf einer Seite erscheinen, beantwortet bereits, wo die WordPress-Schleife zu finden ist. Die Antworten befinden sich in jeder Vorlagendatei Ihres Designs, die Inhalte anzeigt.

Alternativ kann es sich abhängig von Ihrer Themenarchitektur auch in einem Vorlagenteil befinden. Dies sind Vorlagendateien, die häufig verwendete Codeteile enthalten (z. B. die Schleife). Sie können in andere Dateien gezogen werden, anstatt jedes Mal denselben Codeausschnitt wiederzuverwenden.

Wenn Sie beispielsweise die Datei page.php des Themes Twenty Twenty-One öffnen, können Sie sehen, dass hier die Schleife in Teile aufgeteilt ist. Während es in der Datei selbst beginnt, befindet sich der Abschnitt, der bestimmt, wie die Daten ausgegeben werden, in einem Vorlagenteil namens content-page.php .

 /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; // End of the loop.

Die WordPress-Vorlagenhierarchie bestimmt, welche Datei das System verwendet, um welche Art von Seite anzuzeigen, und jede Datei muss entweder eine Schleife oder einen Verweis darauf enthalten, wo Sie sie finden können.

Das bedeutet auch, dass die Schleife in einzelnen Dateien, also auf verschiedenen Seiten, unterschiedlich aussehen kann. Beispielsweise möchten Sie in einem Archiv möglicherweise nur Auszüge aus Beiträgen anzeigen, während Sie auf der Hauptseite des Blogs möglicherweise ganze Beiträge anzeigen möchten (bis zum Link „Weiterlesen“). Dafür benötigen Sie verschiedene Arten von Markup, weshalb die Schleife innerhalb home.php und archive.php nicht gleich aussehen würde.

So erstellen Sie eine Schleife

Um eine Schleife zu erstellen, können Sie grundsätzlich mit dem einfachen Code beginnen, den wir oben seziert haben. Das ist wirklich die Standardschleife. Hier ist es noch einmal:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

Der knifflige Teil ist das, was wir ausgelassen haben: der Teil, der die Anzeige des Inhalts bestimmt. Wie bereits erwähnt, verwenden Sie dafür normalerweise eine Mischung aus HTML und PHP. Hier ist zum Beispiel, wie Sie WordPress anweisen würden, den Beitrag in einem <article> -Tag mit einer benutzerdefinierten Klasse und ID, dem Titel als h1 -Überschrift sowie dem vorgestellten Bild und Inhalt auszuspucken.

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <?php the_post_thumbnail(); ?> <?php the_content(); ?> </article> <?php endwhile; endif; ?>

Eine Sache, die oben auffällt, ist, dass es viele Tags gibt, die mit Unterstrichen geschrieben sind. Dies sind WordPress-Vorlagen-Tags, die Verknüpfungen zum Aufrufen gemeinsamer Teile von Inhalten bieten. Hier verwenden wir the_title() zum Anzeigen des Beitragstitels, the_post_thumbnail() für das vorgestellte Bild und the_content() für den Hauptinhalt. Es gibt noch viel mehr, wie zum Beispiel the_excerpt() oder the_category() . Eine Liste mit Optionen finden Sie hier.

Eine weitere wichtige Sache für die WordPress-Schleife sind bedingte Tags. Sie sehen, dass sie häufig in schleifenbezogenem Markup verwendet werden, um etwas nur unter bestimmten Bedingungen anzuzeigen. Beispielsweise ist es sehr üblich, the_post_thumbnail() in eine bedingte Anweisung einzuschließen, um zu verhindern, dass WordPress versucht, es auf der Seite anzuzeigen, wenn kein vorgestelltes Bild vorhanden ist.

 <?php if ( has_post_thumbnail() ): the_post_thumbnail(); endif; ?>

Wir haben unten weitere Beispiele. Um mehr über bedingte Tags zu erfahren, sieh dir den WordPress Codex an.

Beispiele für die WordPress-Schleife

Als letzten Teil dieses Tutorials werden wir einige Beispiele für die Verwendung der WordPress-Schleife durchgehen.

Das Twenty Twenty-One-Thema

Wenn man sich das Thema Twenty Twenty-One ansieht, fällt als erstes die starke Verwendung von Template-Teilen auf. Alle Standardvorlagendateien wie page.php , single.php und sogar index.php starten die Schleife innerhalb der Datei, verwenden dann aber get_template_part , um die Inhaltsanzeige auf andere Dateien auszulagern. In diesem Fall sind das jeweils content-page.php , content-single.php und content.php . Hier ist eine verkürzte Version von single.php als Beispiel:

 <?php get_header(); /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-single' ); // additional code for comments and post navigation endwhile; // End of the loop. get_footer();

Dies ist auch in anderen Dateien sichtbar. Zum Beispiel haben die Kopf- und Fußzeile auch ihre eigenen Vorlagenteile. Sie können Verweise auf diese innerhalb der Schleife an anderen Stellen sehen. Wenn Sie sich zum Beispiel content-single.php , können Sie am Ende einen Aufruf des Vorlagenteils author-bio.php sehen.

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> <?php if ( ! is_singular( 'attachment' ) ) : ?> <?php get_template_part( 'template-parts/post/author-bio' ); ?> <?php endif; ?> </article><!-- #post-<?php the_ID(); ?> -->

Abgesehen davon ist es relativ normal fair:

1. Öffnen Sie ein HTML-Element <article> mit einer benutzerdefinierten ID und Klasse
2. Erstellen Sie das Kopfzeilenelement des Artikels, das den Titel in einer h1-Überschrift ausgibt und das vorgestellte Bild mit einer für Twenty Twenty-One benutzerdefinierten Funktion anzeigt
3. Folgen Sie dem mit einem entry-content Element, das das Template-Tag the_content() enthält, um Einzelpost-Inhalte auszugeben
4. Fügen Sie Markup für die Paginierung und die Eintragsfußzeile mit einer weiteren Twenty Twenty-One-Funktion zum Anzeigen von Post-Metainformationen hinzu
5. Schließlich gibt es noch den oben erwähnten Aufruf zur Autorenbiografie in einem eigenen Template-Teil

Das Twenty Ten WordPress Standard-Theme

Wenn Sie zum allerersten WordPress-Standardthema, Twenty Ten, zurückkehren und das Subversion-Repository verwenden, um sich Dateien aus Version 1.0 anzusehen, können Sie sehen, wie sich der Umgang mit den Schleifen- und Vorlagendateien im Laufe der Zeit entwickelt hat. Damals enthielten viele der Template-Dateien eigene komplette WordPress-Loops, anstatt sie in wiederverwendbare Template-Teile auszulagern. Sie können dies deutlich in der page.php des Themas sehen.

 <?php get_header(); ?> <div> <div role="main"> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <?php if ( is_front_page() ) { ?> <h2 class="entry-title"><?php the_title(); ?></h2> <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> </div><!-- #post-## --> <?php comments_template( '', true ); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>

Dasselbe ist auch in onecolumn-page.php sichtbar, einer Datei, die eine benutzerdefinierte Seitenvorlage steuert, die das Thema anbietet. Bemerkenswert ist auch, dass es den älteren Aufruf an die Schleife verwendet, der damals in einer Zeile geschrieben wurde.

 <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

In modernen Themen wird es am häufigsten über mehrere Zeilen verteilt angezeigt, wie zuvor gesehen, um die Lesbarkeit des Codes zu verbessern.

Das Thema Twenty Ten hat auch eine eigenständige loop.php -Datei, die viel zu lang ist, um sie hier einzufügen, ohne mein Wortlimit zu überschreiten. Es ist in drei Teile gegliedert, die die Anzeige verschiedener Arten von Beiträgen steuern (Bildergalerie, Beiträge aus der Kategorie Nebensächlichkeiten , alle anderen Beiträge). Jede davon wird weiter durch if und else -Anweisungen aufgeschlüsselt, um verschiedene Fälle wie Archiv- und Suchseiten zu berücksichtigen.

 <?php while ( have_posts() ) : the_post(); ?> <?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?> // Lots of code here <?php else : ?> // Lots of code here as well <?php endif; ?> <?php /* How to display posts of the Aside format. The asides category is the old way. */ ?> // Even more code <?php /* How to display all other posts. */ ?> <?php else : ?> // Still more code <?php else : ?> // A bit more markup <?php endif; ?> // And a bit more code <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> <?php endwhile; // End of the loop. Whew. ?>

Das Ganze enthält eine ziemlich verworrene Logik, weshalb es ziemlich lang und kompliziert ausfällt. Ich bin froh, dass wir heute andere Möglichkeiten haben, damit umzugehen, und ich empfehle Ihnen, einen Blick darauf zu werfen, um ein WordPress-Loop-Beispiel zu sehen, das Sie nicht emulieren möchten.

Übrigens, wenn Sie denken, dass ich zu hart zu den Entwicklern von damals bin, seien Sie versichert, sie stimmen meiner Einschätzung zu. Schauen Sie sich einfach den Entwicklerkommentar an, wo loop.php die Schleife schließt.

 <?php endwhile; // End the loop. Whew. ?>

Der WordPress-Abfrageschleifenblock

Sie sind sich dessen vielleicht nicht bewusst, weil es sich um eine relativ neue Gutenberg-Funktion handelt, aber der Blockeditor (und damit die vollständige Seitenbearbeitung) hat jetzt auch einen Block, der eine WordPress-Schleife enthält. Er wird Abfrageschleifenblock genannt und Sie können ihn wie jeden anderen Block zu Ihrer Website hinzufügen. Am einfachsten ist es, einen Schrägstrich hinzuzufügen und seinen Namen wie /queryloop einzugeben . Drücken Sie die Eingabetaste und es wird auf der Seite angezeigt.

Der Block ermöglicht es, eine PHP-Schleife zu erstellen, ohne Code schreiben zu müssen. Es zeigt automatisch die neuesten Beiträge auf Ihrer Website an. Außerdem hat es mehrere Anpassungsoptionen. Zunächst einmal enthält der Block eine Reihe voreingestellter Layouts. Sie können sie entweder mit den Pfeilen durchlaufen oder auf die Option „ Raster “ klicken, um sie alle auf einmal anzuzeigen.

Wählen Sie, was Ihnen gefällt, oder klicken Sie auf Auswählen , wenn Sie bei Ihrer bevorzugten Option angelangt sind, um die Auswahl abzuschließen. Wichtig zu beachten ist, dass die Layouts aus Blockmustern bestehen, also aus vorgefertigten Gruppen von Einzelblöcken. Das bedeutet auch, dass Sie sie nach Bedarf anders anordnen können, es sind immer noch normale Blöcke. Verwenden Sie die Pfeile oder klicken und halten Sie die Ziehen- Option gedrückt, um sie an die gewünschte Stelle zu verschieben.

Darüber hinaus verfügt jeder Block (und oft auch jede Blockgruppe) über die üblichen Optionen im Haupt-Editor-Bildschirm und in der Seitenleiste. Hier können Sie ihre Farben, Schriftgrößen, Formate und mehr ändern.

Wenn Sie zufrieden sind und die Seite veröffentlichen oder in der Vorschau anzeigen, wird Ihre benutzerdefinierte WordPress-Abfrageschleife darauf angezeigt. Auch wenn Sie kein WordPress-Entwickler sind und PHP nicht verstehen, können Sie dennoch die Vorteile der Schleife nutzen.

Die WordPress-Schleife kurz erklärt

Die Schleife ist etwas, mit dem jeder WordPress-Profi vertraut sein muss. Aber selbst wenn Sie ein eher gelegentlicher Benutzer sind, ist es immer noch keine schlechte Idee zu verstehen, wie es funktioniert. Dies erleichtert möglicherweise die Fehlerbehebung oder das Erstellen benutzerdefinierter Seitenvorlagen, wenn Sie dies wünschen.

In diesem Beitrag haben wir uns angesehen, was die Schleife ist, wo sie sich befindet, und sie im Detail aufgeschlüsselt. Wir haben uns auch angesehen, wie Sie Ihre eigene Schleife und Beispiele aus Standarddesigns und dem neuen Abfrageblock erstellen können. Jetzt wissen Sie alles, was Sie brauchen, um die WordPress-Schleife zu erstellen und anzupassen.

Was ist Ihre bevorzugte Verwendung der WordPress-Schleife? Bitte teilen Sie Ihre Gedanken in den Kommentaren unten!

Bilder: Jonny Gios/Unsplash, Tine Ivanic/Unsplash