WP – Tutorial, wir schreiben ein WordPress Theme – Teil 4

Es ist viel Zeit seit dem letzten Teil dieser Serie vergangen. Liegt einerseits daran, dass ich viele Projekte bearbeite, andererseits daran, dass das Feedback zur Serie so gering ausgefallen ist, dass ich dachte: Kein Interesse, dann muss ich mich auch nicht weiter bemühen. Offensichtlich habe ich aber doch einige Leser, denen das Tutorial hilft und somit mache gibt es nun einen weiteren Teil 4. In diesem Abschnitt der Serie werden wir den Loop kennen lernen. Denn dieser stellt den Kern bei der Ausgabe im Frontend von WordPress dar. Eine ganze Reihe von Template Tags sind nur im Loop funktionstüchtig und nur im Loop hat man einfachen Zugriff auf die Datenbank. Der Loop sieht außerdem im Standard eine ganze Reihe von Daten, mit denen die einzelnen Template Tags oder eigene Funktionen arbeiten.

Es ist viel Zeit seit dem letzten Teil dieser Serie vergangen. Liegt einerseits daran, dass ich viele Projekte bearbeite, andererseits daran, dass das Feedback zur Serie so gering ausgefallen ist, dass ich dachte: Kein Interesse, dann muss ich mich auch nicht weiter bemühen. Offensichtlich habe ich aber doch einige Leser, denen das Tutorial hilft und somit mache gibt es nun einen weiteren Teil 4.

In diesem Abschnitt der Serie werden wir den Loop kennen lernen. Denn dieser stellt den Kern bei der Ausgabe im Frontend von WordPress dar. Eine ganze Reihe von Template Tags sind nur im Loop funktionstüchtig und nur im Loop hat man einfachen Zugriff auf die Datenbank. Der Loop sieht außerdem im Standard eine ganze Reihe von Daten, mit denen die einzelnen Template Tags oder eigene Funktionen arbeiten.

Definition Loop

Im Umfeld von WordPress fällt das Wort oft und es ist auch für das Verständnis unerlässlich. Worum handelt es sich also beim Loop: der Loop ist eine Ereignisschleife im Template, wobei man unendlich viele Templates mit dem Loop bestücken kann. Ebenso kann man den Loop verschachteln, mehrere Loop nacheinander verwenden oder den Loop einschränken. Der Loop wirkt in single, page, archive, index und viele weitere Templates. Für jede Funktion/Template kan nein eigener Loop hinterlegt werden und die Ausgabe kann unterschiedlich sein. Ebenso kann man es einfach gestalten und den Loop immer wieder verwenden. Alles Punkte, die von dem eigenen Wissen und Können abhängen.

Sehr viele Template Tags sind nur innerhalb des Loop funktionsfähig. Der WordPress Codex zu Template Tags gibt dazu immer genau Auskunft.

Alles was sich im Loop befindet wird auf die Ausgabe angewandt, für jeden Artikel oder Seite, die der Loop ausgibt.
Der Standard-Loop durchläuft dabei immer so oft, wie es im Backend der Installation eingestellt ist, siehe Screenshot.

Einstellungen in WP 2.5

Diese Einstellung wird bei jeder Art von Archiv, Suche und index gezogen. Aber auch da kann man in dem jeweiligen Template Anpassungen vornehmen. In diesem Zusammenhang sollte man sich das Verständnis der Template-Hirarchie ansehen. Diese Übersicht stellt recht gut da, wie und mit was man das Theme aufgrund der Templates beeinflussen kann.

Basic Loop

Der klassische Loop, die einfachste Variante sieht wie folgt aus. Der Loop unterteilt sich in übersichtlich gestaltet in vier Abschnitte. Eigentlich drei, wer Punkt 4 zum 1 gehört. Es ist die Alternative zur wenn (if)-Abfrage.

  1. Gibt es Beiträge?
    
    <?php if (have_posts()) : ?>
    
  2. Dann wird die Schleife gestartet, so lange es Beiträge gibt und der Wert im Backend zulässt.
    
    <?php while (have_posts()) : the_post(); ?>
        <!-- Punkt 2: Hier kommt die Ausgabe rein, realisiert mit xHTML und Template Tags>
    <?php endwhile; ?>
    
  3. Ende der Schleife ...
    <!-- Punkt 3: Hier kommt die Ausgabe rein, wenn die Schleife beendet ist -->
  4. und wenn es nicht passendes gibt, dann zeige ...
    
    <?php else: ?>
        <!-- Punkt 4: Hier kommt die Ausgabe rein, realisiert mit xHTML und Template Tags, wenn kein passender Inhalt gefunden wurde -->
    <?php endif; ?>
    

Gibt es Beiträge (if (have_posts())) in Punkt 1 und sind in der Datenbankabfrage Daten enthalten (have_posts), dann wird die Ausgabe gestartet und alle Inhalte mit Hilfe der Template Tags ausgelesen --> Punkt 2. Das Markup wird mit Hilfe von xHTML realisiert. Dazu machen wir im Anschluss ein einfaches Beispiel.

Ist die while-Schleife beendet, dann werden die Inhalte ausgegeben, die in Position des Punkt 3 hinterlegt werden. Auch hier wird mit xHTML und Template Tags das entsprechende an Markup und Inhalt erschaffen.

Werden keine Beiträge gefunden, zum Beispiel bei einer Suche, dann wird alles ausgegeben, was sich in Punkt 4 findet. Hier gestalten wir die Ausgabe ebenfalls mit den genannten Möglichkeiten.

Der Loop komplett


<?php if (have_posts()) : ?>

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

	<?php endwhile; ?>
	
	<?php else: ?>
	
<?php endif; ?>

Inhalte ausgeben

Hinterlegt man den obigen Loop in unsere index.php der Beispieldatei, dann haben wir zwar einen funktionierenden Loop, aber ohne Ausgabe. Daher realisieren wir nun die Ausgabe mit wenig Markup um das Verständnis zu fördern und nicht mit unnötig Syntax zu erschweren.

Nochmal zurück zum Tutorial Teil 3, dort haben wir die Ausgabe des Inhalt in den Container mit der ID content gepackt. Schaut euch die index.php aus dem Teil 3 dieser Serie an und vergleicht es mit dem folgenden Syntax. Dieses Markup wollen wir weiterhin nutzen und lassen aber nicht mit statischem Inhalt füllen, sondern mit Daten aus der Datenbank, aus dem installierten Blog.

Dazu erweitere ich die index.php um den Loop aus den obigen Erläuterungen und entferne den statischen Inhalt. Der div content und das h2-Tag bleiben. Darin legen wir dann den Inhalt aus der Datenbank.

Tipp:

Die Spielereien sorgen für reichlich Veränderung in Code und Ausgabe. Bitte alle Schritte in einem Testblog, am besten auf dem Rechner lokal installiert. Das ist unter jedem Betriebssystem einfach und schnell gemacht. Dazu gibt es eine ganze Reihe Tutorials, siehe Teil 1 dieser Serie, „Was brauche wir?“.

Damit sieht der komplette body wie folgt aus; die Inhalte fehlen, ebenso die Inhalte des Sidebar, denn sie sind nicht relevant für Loop und Markup im Loop. Die Darstellung in diesem Artikel wird aber leserlicher und der abschließende Download und komplette Quellcode füllt dann diese Lücken wieder.
Zusätzlich habe ich einen weitern div eingefügt mit der Klasse post. Dieser Container nimmt in der Ausgabe jeden einzelnen Artikel auf und lässt uns die Formatierung mit CSS sehr gut ermöglichen.


<body>

	<div id="container">

		<div id="header">
			<h1>WordPress Theme Tutorial bei bueltge.de</h1>
			<p>Eu sit discere assueverit, sea solum sententiae intellegebat ea. Id est verterem consequat.</p>
		</div>

		<div id="sidebar">
			. . .
		</div>

		<div id="content">

			<?php if (have_posts()) : ?>

				<?php while (have_posts()) : the_post(); ?>
				<div class="post">
					<h2> . . . </h2>
					. . .
				</div>
				<?php endwhile; ?>
			
				<?php else: ?>
			
			<?php endif; ?>
			
		</div>

	</div>
</body>

Nun aber endlich, Daten aus den Datenbank. Der folgende Code nutzt drei Template Tag und holt

  • den Titel des Beitrags - the_title()
  • den Link zum Beitrag - the_permalink()
  • und den Inhalt des Beitrags, ungekürzt - the_content()

Dazu muss man wissen, dass der Editor im Backend von WordPress die Vergabe von Absatz und Breaks vor nimmt. Das komplette Markup und der Text des Beitrags stehen in der Datenbank und werden nun nur noch geladen.


<div id="content">
			
	<?php if (have_posts()) : ?>
	
		<?php while (have_posts()) : the_post(); ?>
				
		<div class="post">
			<h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
			<?php the_content(); ?>
		</div>

		<?php endwhile; ?>
				
		<?php else: ?>
				
	<?php endif; ?>
			
</div>

Schaut man sich die Ausgabe im Frontend nun an, dann werden die Artikel aus der DB geholt, nach einer Standard-Installation von WordPress ist das lediglich der Begrüßungsartikel. Erstellt also noch den einen oder anderen Beitrag um zu sehen, dass der Loop mehr als diesen einen Beitrag lädt, je nach Einstellung im Backend.

Ebenso bekommt jeder Titel eines Beitrags einen Link zu dem einzelnen Beitrag, so dass man diesen einzeln betrachten kann. Damit läßt sich schon erahnen, es ist eine Menge an Möglichkeiten und wir stehen erst am Anfang.

Wir werden nun die anderen Abschnitte des Loop noch mit Tags befüllen um die Alternativen zu schaffen.


<div id="content">
	
	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>
		
		<div class="post">
			<h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
			<?php the_content(); ?>
		</div>

		<?php endwhile; ?>
		
		<p class="navigation"><?php next_posts_link(' ««« '); ?><?php previous_posts_link(' »»» '); ?></p>
		
		<?php else: ?>
		
		<p><?php _e('Nichts gefunden, was den Suchkriterien entspricht.'); ?></p>
		
	<?php endif; ?>
	
</div>

Der obige Syntax wurde um zwei Abschnitte bereichert. Zum einen haben wir eine „Navigation“ hinterlegt. Ist man in der Sicht aller Artikel, beispielsweise der Startseite oder eines Archives, so wird man nun auf den weiteren Artikel verwiesen. Zur Ausgabe sind aktuell nur die Zeichen ««« hinterlegt, dass kann man natürlich auch anders machen, aber dazu später mehr. Die Ausgabe findet nach dem Beenden der Schleife statt.


<p class="navigation"><?php next_posts_link(' ««« '); ?><?php previous_posts_link(' »»» '); ?></p>

Die beiden Funktionen wurden mit Parametern gefüllt, diese werden übergeben und dienen der angepassten Ausgabe. Viele Template Tags können Parameter aufnehmen, dadurch wird das gestalten flexibel und sorgt für mehr Freiheiten.

Der zweite Syntax, eine reiner Text dient nur dazu, dass eine Ausgabe entsteht, wenn nichts passendes zur Datenbankabfrage gefunden wurde, beispielsweise einer Suche. Auch für diesen Fall gib es vielen schönerer Varianten und Lösungen, aber die sorgen nicht für ein besseres Verständnis und in weiteren Abschnitten dieses Tutorials, wenn es dazu kommt, soll es ja noch Themen geben.
Auffallen sollte aber die Funktion _e(), die hier zur direkten Ausgabe des Textes dient. Diese Funktion ist ein Bestandteil von gettext und sorgt dafür, dass man das Theme später mehrsprachig machen kann, ohne den Syntax für jede Sprach in den Templates zu ändern. Aber auch das ist dann kür, noch sind wir bei den Grundlagen.


<p><?php _e('Nichts gefunden, was den Suchkriterien entspricht.'); ?></p>

Tipp:

Nochmal der Hinweis, alle verwendeten Template Tags lassen sich im Codex zum Thema nachlesen. Auch die deutsche Dokumentation ist in dieser Hinsicht gut gepflegt.

Im letzten Teil dieser Serie haben wir die Conditional Tags kennen gelernt, davon gibt es eine ganze Reihe und auch hier wollen wir einen einsetzen, in zwei verschiedenen Anwendungen.

Da wir nur mit einer Datei die komplette Ausgabe steuern, müssen wir, um die Navigation auch auf einzelnen Beiträgen zu realisieren, die Darstellung abfragen. Also nutzen wir die if-Abfragen und prüfen, ob es sich nicht um eine einzelne Beitrags-Seite handelt - !is_single(). Im Anschluss prüfen wir, ob es sich um eine Beitragsseite handelt, die einzelne dargestellt wird - is_single(). Je nach Abfrage, nutzen wir die jeweiligen Template Tags zur Ausgabe. Damit sieht unser Navigationsabschnitt wie folgt aus.


<p class="postlink">
<?php if ( !is_single() ) next_posts_link(' ««« '); previous_posts_link(' »»» '); ?>
<?php if ( is_single() ) previous_post_link('%link', ' ««« '); next_post_link('%link', ' »»» '); ?>	
</p>

Zum Abschluss werden wir noch den Header mit Leben erfüllen und die Inhalte aus der Datenbank, also aus den Einstellungen des Backend holen.


<div id="header">
	<h1><a accesskey="1" href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
	<p><?php bloginfo('description'); ?></p>
</div>

Damit übergeben wir mit dem schon in Teil 3 ausgiebig erläuterten Template Tag bloginfo() den Link, den Namen und die Beschreibung des Weblog an den Header. Somit genügt nun ein Klick auf die Überschrift im Header und wir befinden uns wieder auf der Startseite. Alternativ kann man auch die Accesskey nutzen, denn dazu haben wir den Syntax accesskey="1" hinterlegt. Im Firefox ist dazu das Drücken von Alt + Shitf und 1 erforderlich. Dazu aber mehr auf vielen Webseiten, die sich mit dem Thema Barrierefreiheit bzw. -arm beschäftigen.

Download:



Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.

Download als zip-Datei: wp_tutorial_teil4.zip - 1 kByte

Fazit und Ausblick

Nun sind wir bei dem wichtigstem Ausgabeelemet von WordPress angekommen - der Loop. Ich hoffe, dass ich es ein wenig verständlich darlegen konnte. Der Loop ist sehr mächtig und kann sehr vielfältig beeinflusst werden. Dazu aber später in einem anderen Abschnitt. Sollte noch Bedarf bestehen, so werde ich an dieser Serie weiter arbeiten und würde dann im nächsten Artikel den Sidebar einbinden und das Theme Widget-fähig machen. Damit sind der Vielfältigkeit der Gestaltung im Sidebar viele Möglichkeiten gegeben und es ist steuerbar im Backend.

Ebenso sollte man die Reihenfolge und Unterstützung der Templates in WordPress kennen und nutzen, die Variation des Loop, eigene und mehrfache Schleifen und die Beieinflussung per Funktionen im Theme sind nur einige Themenpunkte, die WordPress sehr interessant machen. Werden wir also sehen, wohin uns diese Reise führt.

89 Comments

  1. Sackstark erklärt das Dingens namens "Loop" 🙂 Selten sowas einfach erklärtes in Bezug auf den Loop gelesen, weiter so 🙂 Evtl. auch mal einen Beitrag wie man den Loop für "nicht Blogseiten" benutzt in Planung?

  2. kann ich nur beipflichten. klasse schreibstil und wieder sehr verständlich. danke schön!
    mfg, Marvin.

  3. Vielen Dank für die tolle Fortsetzung der Reihe!
    Wie gewohnt klasse geschrieben und extrem einfach nachzuvollziehen.
    Vor allem die Aussichten auf "die Variation des Loop, eigene und mehrfache Schleifen und die Beeinflussung per Funktionen im Theme" machen echt heiß auf den nächsten Teil 🙂
    mfg

  4. Diese Serie ist echt klasse!!! Möchten dir hier mal ein herzliches Danke Schön aussprechen! Komplexe Sachverhalte bringst du anschaulich auf den Punkt. Freue mich schon auf Teil 5 🙂

  5. Hallo,

    gibt es die möglichkeit nur ein Teil des Contents auszugeben?
    Ich habe mir ein Wp so eingerichtet das er mir die letzten Kommentare wieder gibt.
    Nun würde ich das ganz gerne so haben das er vom Content den Ersten satz oder so mit ausgibt.
    Leider finde ich dafür im codec keinen anderen Befehl als the_content().

    Wenn man aber im Content der Rss-Feeds schaut sieht man es in der kurzen Fassung.

    Weiß du zufällig wie ich das Realisieren kann?

    Danke!

  6. @Frank: Ich finde es toll, das du dein Wissen hier so mitteilst. Ich habe Freunde, die eigene Themes basteln und gerne hier reinschauen. Echt Klasse Arbeit, die du hier leistes!

  7. also ich hab dein tut mal anständig durchgearbeitet. leider fehlen ja noch sachen. ich freue mich, wenn die auch noch anbei gebracht werden, denn die art und weise, wie du hier grundlagen vermittelst sind einfach zu verstehen und machen es gerade anfängern wie mir wirklich leicht einen einblick in die thematik zu bekommen.

    dafür erstmal ein ganz dickes dankeschön

  8. @Frank:
    Du erklärst das hier alles echt super. Das kann sogar jeder Anfänger, der noch nie php, html oder ähnliches gesehen hat, sehr gut verstehen. Mach bitte weiter so!

  9. Ich finde es echt super dass du dir die Mühe machst ein so ausführliches tutorial zu erstellen da man eine menge an "Background" Wissen sich (nebenbei) aneignet. Ich bin schon echt gespannt auf (einen) weitere(n) Teil(e) MFG Muenchna

  10. Hi, hat mir wirklich viel gebracht und konnte einiges gebrauchen.
    Mir ist, abgesehen von einigen Rechtschreibfehlern, aufgefallen, dass bei deinen Zitaten
    die Anführungszeichen zum schließen fehlen.

    MfG Alex

  11. Das ist echt ein sehr geiles Tutorial, welches du da am schreiben bist. Ich hoffe sehr, dass du weitermachst.

    greetz Nico

Comments are closed.