Die WordPress Schleife, allgemein bekannt als „the loop„, ist das wichtigste Konstrukt in unserem Template, denn ohne die Schleife wird kein Inhalt angezeigt. Im folgenden siehst du die Loop, die wir verwenden werden:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2><?php the_title(); ?></h2> <div class="entry"> <?php the_content(); ?> </div> <?php endwhile; endif; ?>
Der Quellcode ist einfacher als er aussieht:
- Zeile 1 – WordPress prüft, ob Artikel vorhanden sind mittles „have_posts()“. Findet die WordPress Engine Artikel, startet es die Schleife mittels „while“ und durchläuft alle Inhalte. *1 weitere Erklärungen siehe unten.
- Zeile 2 – das geschulte HTML-Auge sieht das öffnende und schließende h2-Tag. Darin nutzen wir eine WordPress-Funktion namens „the_title()“. Mit dieser Funktion geben wir den Titel des aktuellen Artikels aus. Achtung, diese Funktion funktioniert nur innerhalb der Schleife, das hat einen einfachen Grund: Angenommen wir befinden uns nicht innerhalb der Schleife, woher soll WordPress wissen, welchen Artikel-Titel du ausgeben möchtest? Ist logisch, oder?
- Zeile 3 – wir öffnen eine CSS-Box mit dem Klassen-Namen „entry“. Innerhalb dieser Box wird jeweils ein Artikel ausgegeben
- Zeile 4 – die Funktion „the_content()“ arbeitet ähnlich wie „the_title“ aber anstelle des Titels vom aktuellen Artikel, gibt sie den Artikel selbst aus, sprich: den Inhalt des Artikels
- Zeile 5 – die Div-Box wird geschlossen
- Zeile 6 – die Schleife wird beendet (wenn alle Artikel durchlaufen sind) und die Bedingungs-Abfrage wird geschlossen
*1 vielleicht hast du dich gefragt was „WordPress prüft, ob Artikel vorhanden sind“ bedeutet. Abhängig von der Seite wo du dich gerade befindest, beinhaltet „have_posts“ unterschiedliche Artikel. Angenommen du befindest dich auf deiner Startseite, dann hat „have_posts“ die letzten 10 Artikel die du geschrieben hast. Befindest du dich in einer Kategorie, dann hat „have_posts“ die letzten 10 Artikel, die du in dieser Kategorie geschrieben hast. Wenn dein Blog eine Suchfunktion hat und du suchst nach dem Begriff „WordPress“, dann hat „have_posts“ die letzten 10 Artikel, in denen der Begriff „WordPress“ gefunden wurde. Du siehst also, have_posts ist abhängig davon, wo du dich auf deinem Blog befindest.
Aus diesem Grund reicht für ein voll funktionsfähiges WordPress Template, die index.php alleine vollkommen aus.
index.php mit „the loop“ zum Leben erwecken
Du hast die Schleife gesehen und ihre Funktionsweise verstanden, jetzt muss sie nur noch ins Template und wir können unsere Inhalte ausgeben. Dazu modifizieren wir die index.php folgendermaßen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head profile="http://gmpg.org/xfn/11">
<!-- wird noch ausgefüllt -->
</head>
<body>
<div id="wrapper">
<div id="header"></div><!-- header -->
<div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<div class="entry">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<p align="center"><?php next_posts_link('« Ältere Einträge') ?> | <?php previous_posts_link('Neuere Einträge »') ?></p>
<?php endif; ?>
</div><!-- main -->
<div id="sidebar"></div><!-- sidebar -->
<div id="footer"></div><!-- footer -->
</div><!-- wrapper -->
</body>
</html>
Die Schleife kommt in die „main“-Box, denn dort soll unser Content angezeigt werden und das wollen wir direkt mal ausprobieren. Geh ins Backend und aktiviere das „Tutorial“-Theme. Wenn du schon ein paar Artikel hast, solltest du diese jetzt (völlig unformatiert) angezeigt bekommen. Unser Template nutzt bislang noch nicht die style.css, da wir den „head“-Bereich bislang leergelassen haben (dazu kommen wir im nächsten Teil).
Ich habe noch eine kleine Ergänzung in Zeile 23 eingefügt. Standardmäßig zeigt WordPress die letzten 10 Artikel an (läßt sich im Backend einstellen). Wenn aber dein Blog schon mehr als 10 Artikel hat, können die User diese nicht sehen. Deshalb fügen wir am Ende der Schleife die zwei Links „Ältere Einträge“ und „Neuere Einträge“ ein. Auf der Startseite wird nur der Link „Ältere Einträge“ angezeigt (da es keine neueren gibt, als die, die auf der Startseite zu sehen sind).
Titel verlinken und Einzel-Artikel anzeigen
Jetzt wollen wir noch eine kleine Änderung vornehmen und zwar verlinken wir den Artikel-Titel mit dem Artikel selbst. Dadurch kann man von der Startseite ganz schnell zum Einzel-Artikel gelangen. Dazu nehmen wir nur eine kleine Änderung an der index.php vor:
<div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<p align="center"><?php next_posts_link('« Ältere Einträge') ?> | <?php previous_posts_link('Neuere Einträge »') ?></p>
<?php endif; ?>
</div><!-- main -->
Die Änderung ist einfach: Um unseren Titel stricken wir einen Link und das href-Attribut des Links, füllen wir mit der Funktion „the_permalink()“. Wie the_title() und the_content() ist auch the_permalink() abhängig von der Loop und gibt den Link zum Artikel aus. Es gibt noch viele weitere, nützliche Angaben, die man über die loop von den einzelnen Artikeln erhalten kann, z.b. das Datum des Artikels, den Author, die Kategorie, etc. doch dazu später mehr.
Wenn du nun auf der Startseite einen Artikel-Titel anklickst, solltest du auf der Einzel-Artikel Seite landen. Und wie du siehst: Auch wenn es nicht schön aussieht, so haben wir doch mit einer einzigen Template Datei ein voll funktionsfähiges WordPress Theme. Da wir aber die einzelnen Seiten spezialisieren wollen und unser Template übersichtlich bleiben soll, werden wir in den folgenden Tutorial-Teilen das Template in mehrere Template-Dateien aufsplitten.