Der Loop ist ein häufig verwendetes Element in WordPress. Denn mit Hilfe des Loops werden die Artikel in WordPress aufgerufen. Leider ist der Loop mit seinem Code-Wirrwarr für alle Nicht-WordPress-Profis anfangs ein wenig schwierig zu verstehen. Hinzu kommt, dass seit WordPress 3.0 einige neue Code-Elemente hinzugekommen sind. Daher habe ich mir den Loop und die Theme-Datei loop.php einmal genauer angeschaut, um die einzelnen Code-Elemente besser zu verstehen.
1. Das Loop-Prinzip verstehen
Loop wird in WordPress der Code genannt, mit dem du alle Artikel deines Blogs, eine Abfolge bestimmter Artikel (z.B. nur alle Artikel einer Kategorie) oder einen einzelnen Artikel (Loop in der single.php Datei) anzeigen kannst. Loop (engl. für Schleife, Kreislauf) wird dieser Code-Abschnitt deshalb genannt, weil du die Angaben nur einmal im Code angibst, und WordPress dann automatisch die Angaben für alle Artikel wiederholt.
Auf der Startseite deines Blogs werden beispielsweise alle Artikel mit Titel, Textausschnitt und Link zum Weiterlesen untereinander angezeigt. Die Anzahl der angezeigten Artikel je Seite kannst du übrigens festlegen, indem du im WordPress-Adminbereich unter »Lesen« die gewünschte Zahl (z.B. 10 Stück) angibst.
Innerhalb des Loop-Codes bestimmst du dann mit Hilfe von WordPress Template Tags welche zusätzlichen Informationen zu deinen Artikeln du anzeigen möchtest. Auf der Startseite deines Blogs kannst du z.B. das den Titel des Artikel mit dem Template Tag the_title anzeigen.
2. Die Elemente des Loops
Um den benötigten Code für den Loop besser zu verstehen, werde ich den Loop des Twenty Ten-Themes (in der loop.php Datei) in einzelne Elemente unterteilen.
2.1. Den Loop starten
Mit dem Code-Schnipsel:
<?php if ( ! have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?>
startest du den WordPress-Loop. Dieser Code bedeutet soviel wie: »Wenn es Artikel gibt, starte den Loop«.
2.2. Den Titel des Artikels als Link anzeigen
Mit diesem Codeschnipsel wird der Titel des Artikels in einem h2-Tag und als Link angezeigt:
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
2.3. Datum und Autor anzeigen
Im TwentyTen-Theme wird folgender Code genutzt, um das Datum der Veröffentlichung und den Artikelautor anzuzeigen:
<div class="entry-meta"> <?php twentyten_posted_on(); ?> </div>
Beide Metadaten kannst du aber auch mit den Template Tags the_time und the_author anzeigen. Dein Code könnte dann z.B. so aussehen:
<div class="entry-meta">
<?php the_time('d. F Y') ?> von <?php the_author(); ?>
</div>
2.4. Den Artikelinhalt anzeigen
Der Inhalt deines Artikels bzw. eine Vorschau des Inhalts wird jetzt mit folgendem Code angezeigt:
<div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyten' ) ); ?> </div>
Um den Absatz für die Inhaltsvorschau genau zu bestimmen, kannst du im Artikel den more-Quicktag genau an der gewünschten Stelle setzen.
<!--more-->
Weitere Infos zu »Read more« findest du auch im WordPress Codex.
2.5. Weitere Metadaten aufrufen
Im TwentyTen-Theme werden in der Einzelansicht unterhalb des Artikels jede Menge Metadaten wie Kategorien, Tags, die Anzahl der Kommentare, sowie ein Link zum Bearbeiten des Artikels angezeigt. All diese Info wird durch folgenden Code innerhalb des Divs »entry-utility« aufgerufen.
<div class="entry-utility"> <?php if ( count( get_the_category() ) ) : ?> <span class="cat-links"> <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?> </span> <span class="meta-sep">|</span> <?php endif; ?> <?php $tags_list = get_the_tag_list( '', ', ' ); if ( $tags_list ): ?> <span class="tag-links"> <?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?> </span> <span class="meta-sep">|</span> <?php endif; ?> <span class="comments-link"> <?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?> </span> <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?> </div> <!-- .entry-utility -->
2.6. Kommentare anzeigen
Die Kommentare des Artikels werden angezeigt, indem du die Funktion comments_template mit folgendem Code aufrufst:
<?php comments_template( '', true ); ?>
2.7. Den Loop beenden
Jetzt kannst du den Loop mit folgendem Code schließen:
<?php endwhile; // End the loop. Whew. ?> <?php /* Display navigation to next/previous pages when applicable */ ?> <?php if ( $wp_query->max_num_pages > 1 ) : ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyten' ) ); ?></div> <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyten' ) ); ?></div> </div><!-- #nav-below --> <?php endif; ?>
Mit den Funktionen next_posts_links und previous_posts_links kannst du auf die nächsten Seiten weiter linken (wenn es mehrere Seiten gibt). Alternativ kannst du hierfür aber auch das praktische WP Page-Navi Plugin nutzen.
Die Vorschau eines Artikels auf der Startseite des TwentyTen-Themes.
3. Neu seit WordPress 3.0: Den Loop mit get_template_part aufrufen
Seit WordPress 3.0 gibt es die neue Funktion »get_template_part«, mit der du den Loop in deinen Template-Dateien aufrufen kannst. In der index.php Datei von TwentyTen wird der Loop z.B. mit folgendem Code-Schnipsel aufgerufen:
<?php get_template_part( 'loop', 'index' ); ?>
Möchtest du einen individuellen, neuen Loop anlegen (z.B. für eine Autorenseite), kannst du diesen Loop in einer neuen Datei loop-author.php speichern, und in der Template-Datei der Autorenseite (z.B. author-template.php) mit folgendem Code aufrufen:
<?php get_template_part( 'loop', 'autor' ); ?>
Eine genaue Beschreibung zu get_template_part kannst du auch auf dem Blog »Westi on WordPress« und im WordPress Codex nachlesen.
4. Noch mehr Lesestoff
Ich hoffe diese Beitrag zum Thema WordPress-Loop kann dir bei der Programmierung und Bearbeitung deiner eigenen WordPress-Themes weiterhelfen. Natürlich gibt es noch jede Menge weitere Funktionen und Möglichkeiten den Loop in WordPress zu nutzen. Folgende Artikel liefern jede Menge weitere, hilfreiche Informationen zum WordPress-Loop.
- »Der Loop in Action« im WordPress Codex.
- »Duplikate im Loop von WordPress filtern« auf dem Blog von Frank Bültge.
- »55 most wanted WordPress Tips, Tricks and Hacks« von WPBeginner.
- »Top WordPress Hacks of early 2010« und »Multiple WordPress Loops Explained« von Cats Who Code.
Kennst du weitere hilfreiche Tipps, Blog-Artikel und Tutorials, die sich mit dem WordPress Loop beschäftigen? Hast du weitere Vorschläge, welche Elemente des Loops unbedingt genauer erklärt werden müssten? Über dein Feedback und deine Tipps freue ich mich sehr!
»Auf der Startseite deines Blogs kannst du z.B. das Datum des Artikel mit dem Template Tag the_title anzeigen.«
Das ist leider falsch, denn der Tag dafür ist eigentlich the_date. the_title zeigt lediglich die Überschrift des Posts an.
Hallo Kathleen,
vielen Dank für deinen Kommentar und den Hinweis. Ja, dass muss natürlich »Titel« heißen, hab’s gerade korrigiert :-)
Vielen Dank und viele Grüße,
Ellen
Ich hätte noch die Nutzung vom neuen Loop mit Querys erklärt! Im Twentyten-Loop sind glaub ich zwei relevante »Loops« einmal der für die Normale Ansicht (wie index), dann für Archiv und die Suche. Um jetzt eine Query zu verwenden, muss man glaub ich wie normal über den Loopstart dieses Query setzen und dann bei dem »Loop« welches nicht dieses Query beinhalten soll davor (also vor is_archive zb) das wp_reset_query setzen.
Ich glaub dass das so gehen könnte ohne extra nochn Loop zu machen…
Hallo Chrissy,
vielen Dank für dein Feedback und deinen Vorschlag :-) Ja, das stimmt, die Funktion query_post genauer mit Beispielen etc. zu erklären ist wirklich eine super Idee. Das werde ich auf alle Fälle noch einmal in einem Extra-Artikel machen :-)
Vielen Dank und viele Grüße,
Ellen
Hallo Ellen,
sehr interessanter Artikel. Vor allem, weil ich demnächst ohnehin mein verwendetes Theme ein wenig anpassen möchte.
Mit dem Weiterlesen-Button hab ich bisher überhaupt nicht gearbeitet. Hierzu müsste ich wahrscheinlich meine ganzen Blogbeiträge mal überarbeiten.
Gibt es eigentlich ein Möglichkeit, den Weiterlesen-Button automatisch setzen zu lassen?
Viele Grüße
Thomas
Bei the_excerpt wird das automatisch gesetzt!
@Thomas, @Chrissy,
vielen Dank für eure Kommentare :-)
Ja, mit der Funktion the_excerpt kannst du eine Vorschau der Artikel anzeigen. Im WordPress-Codex habe ich sogar einen Code-Schnipsel gefunden, mit Hilfe dessen man den more-Link auch mit Excerpt anzeigen kann (siehe Excerpt, »Make the »read more« link to the post).
Allerdings kann man dann immer noch keine individuelle Länge der Vorschau angeben. Standard sind bei Excerpt ja die ersten 55 Wörter des Artikels. Mit folgendem Code in der functions.php kann man die Wörterzahl zwar noch anpassen:
function new_excerpt_length($length) { return 20; } add_filter('excerpt_length', 'new_excerpt_length');aber das ist natürlich immer noch nicht ganz das gleiche.
Vielleicht könnte man mit einer if-Condition bestimmen, dass nur Artikel bis zu einem bestimmten Datums mit Excerpt, und alle neueren mit Content angezeigt werden…Ich probiere das einmal aus, und melde mich dann noch einmal :-)
Viele Grüße,
Ellen
Um für einen Excerpt eine (andere) bestimmte Länge zu verwenden, als den Standard, verwende ich folgendes:
- Functions.php
function getWords($text, $limit) { $array = explode(" ", $text, $limit+1); if (count($array) > $limit) { unset($array[$limit]); } return implode(" ", $array); }Und dann dort im Loop wo dieser Excerpt definiert ist:
Dadurch erhalte ich einen the_content quasi mit 70 Wörtern und Weiterlesen-Button.
hach, mal wieder das Code vergessen -.-
Ihr seid cool :) Genau das konnte ich gebrauchen. Angestiftet von eurer anderen Theme-Bau-Reihe bin ich gerade dran ein eigenes Theme für meinen Blog zu basteln, komplett neu, obwohl ich noch nie in dieser Hinsicht etwas gemacht habe. Das kann echt nur helfen :)
LG
Timo
Hallo Timo,
vielen Dank für dein tolles Feedback. Das finde ich echt klasse, dass du dein eigenes Theme umsetzt :-) Und es freut mich sehr, wenn dir die Beiträge und Tutorials weiterhelfen können :-)
Ganz viel Spaß bei der Theme-Programmierung und viele Grüße,
Ellen
und spätestens jetzt bin ich froh, PHP lange schon hinter mir gelassen zu haben. Der Code ist so grottenschlecht zu lesen, das einem übel werden kann. Kein Wunder, das in der Vergangenheit immer wieder Systeme aufgebracht wurden, wo PHP werkelt(e).
Das es dennoch mit PHP geht, beweist z.B. CakePHP.
Ein blitzsauberes HTML erreicht man zum Beispiel über HAML (ob das jetzt auch mit PHP tut weis ich nicht): ein sauber gesetzter Code ist bei der Fehlersuche viel wert!
Hallo Thorsten,
vielen Dank für deinen Kommentar :-) Schade, dass dir der PHP-Code nicht so zusagt. Aus meiner Erfahrung ist es eigentlich kein Problem, sich zurecht zu finden und eine ordentliche Programmierung hinzubekommen. Meiner Meinung nach hat WordPress super viele Vorteile, zumindest aus der Sicht einer Webdesignerin :-)
Viele Grüße,
Ellen
Hmm.. brauch man einen Loop?? Ich versteh das nicht so recht ;D
Hallo Vincent,
vielen Dank für deinen Kommentar :-) Ja, der Loop ist wirklich ein bisschen tricky :-) Ohne diesen Code können aber keine Artikel in WordPress angezeigt werden. Der Code im Loop ruft WordPress also quasi dazu auf, alle Artikel aufzulisten. Der Loop auf der Startseite ist dafür da, alle Artikel deines Blogs aufzulisten, dann gibt es noch einen Loop, der nur alle Artikel aus einer Kategorie aufruft (wenn du z.B. in deinem Archiv auf eine Kategorie links) usw.
Ich hoffe du weißt jetzt ein wenig mehr bescheid, ansonsten frag einfach noch einmal nach :-)
Viele Grüße,
Ellen
Das war wieder einmal ein super Artikel! - So wie immer… :)
Gibt es eine Möglichkeit im Loop nur den Weiterlesen-Button auszugeben?
Denn der der Text und der Weiterlesen-Button müsste je in einem eigenen Div sein.…
Vielen Dank schon mal für die Hilfe. :)
Hi,
ich wollte mal fragen ob einer eine Ahnung hat wie ich im Theme Twenty Ten in Artikeln die Uhrzeit wann der Artikel erstellt wurde NEBEN dem Datum anstatt wie per default als Mouseover vom Datum anzeigen lassen kann?!
Hallo,
vielleicht kannst du mir weiter helfen.
Ich habe die Kommentarfunktion auf der »Home«-Seite meines Blogs abgestellt und möchte nun dass unter den Artikeln auch nicht mehr der Link »Hinterlasse einen Kommentar« auftaucht. Wie kann ich den entfernen?
Vielen Dank schonmal.
*tom
Hallo,
ich würde gerne meine Startseite so gestalten:
Kategorie 1
Neuester Artikel Kategorie 1
Zweitneuester Artikel Kategorie 1
Drittneuester Artikel Kategorie 1
Kategorie 2
Neuester Artikel Kategorie 2
Zweitneuester Artikel Kategorie 2
Drittneuester Artikel Kategorie 2
Kategorie 3
Neuester Artikel Kategorie 3
Zweitneuester Artikel Kategorie 3
Drittneuester Artikel Kategorie 3
Sprich es sollte auf der STartseite untereinander einzelne Themenblöcke geben. Innerhalb der Themenblöcke sollten die ARtikel chronologisch geordnet werden.
Wenn ich jetzt also in Kategorie 2 einen neuen Artikel schreibe, sollte der nicht ganz oben auf der Startseite landen, sondern nur in Kategorie 2 ganz oben.
Gibt es dafür eine Möglichkeit oder sogar ein Plugin? Ich bin blutiger Anfänger in WP und noch viel mehr in PHP.
BEsten Dank, Florian