Wordpress Theme Tutorial

WordPress-Loop und Blätterfunktion – WordPress Theme erstellen: Tutorial [Teil 3]

Wordpress Theme Tutorial
Wordpress Theme Tutorial: Teil 3

Es geht weiter mit dem Tutorial zur Erstellung eines eigenen WordPress-Themes. Nachdem ich im letzten Teil 2 Dateien, wie die Sidebar.php, Footer.php und Header.php, beschrieben hatte, die aus der index.php ausgelagert werden, geht es diesmal mit der WordPress-Loop weiter.

In der WordPress-Loop werden die einzelnen Artikel deines Blogs ausgegeben. Des Weiteren werden wir eine Funktion zum Blättern zwischen den Seiten einbinden.

Inhalt des Tutorials:

1. Artikel anzeigen: WordPress-Loop

Los geht es mit have_posts(). Damit prüft WordPress die Datenbank auf Vorhandensein von Blog-Artikeln. Befindest du dich auf der Startseite, so werden die letzten 10 Artikel angezeigt. Wenn du in einer Kategorie bist, werden nur die letzten 10 Artikel der Kategorie ausgegeben. Have_posts() ist also abhängig davon, wo du dich gerade befindest.

[codesyntax lang=“php“]
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href=“<?php the_permalink() ?>“><?php the_title(); ?></a></h2>
<div class=“meta“>
<p>
<?php the_time(‚d.m.Y‘); ?> |
<?php the_author(); ?> |
<?php the_category(‚, ‚); ?> |
<a href=“<?php the_permalink() ?>#comments“><?php comments_number(‚Schreibe einen Kommentar‘,’1 Kommentar‘,’% Kommentare‘); ?></a>
<?php edit_post_link(‚Bearbeiten‘, ‚ | ‚);?>
</p>
</div>
<div class=“entry“>
<?php the_content(); ?>
</div><br>
<?php endwhile; ?>
<?php endif; ?>
[/codesyntax]

Im h2-Tag befindet sich innerhalb unserer Loop die WordPress-Funktion „the_title()“. Damit wird der Titel ausgegeben. Darunter sind im DIV-Container mit der CSS-Klasse „meta“ einige Angaben zum Artikel. Dazu habe ich the_time(), the_author(), the_category(), the_permalink() und edit_post_link() eingefügt. Das entspricht dem Datum der Artikelveröffentlichung, dem Autor, dem Link zu den Kommentaren und einen Link zum Bearbeiten des Artikels (wird nur angezeigt, wenn eingeloggt als Admin).

Nachfolgend wird im DIV-Tag mit der ID „content“ der eigentliche Inhalt des Blog-Artikels angezeigt. Im Admin-Bereich von WordPress kannst du unter „Einstellungen->Lesen“ festlegen, ob nur die ersten Zeilen bis zum „<!–more–>“-Tag oder der vollständige Artikel angezeigt wird.

Der Quellcode von oben wird in die index.php in den DIV-Container mit der ID „content“ eingefügt. So sieht unsere index.php dann erstmal aus:

[codesyntax lang=“php“]
<?php get_header(); ?>
<div id=“content“>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href=“<?php the_permalink() ?>“><?php the_title(); ?></a></h2>
<div class=“meta“>
<p>
<?php the_time(‚d.m.Y‘); ?> |
<?php the_author(); ?> |
<?php the_category(‚, ‚); ?> |
<a href=“<?php the_permalink() ?>#comments“><?php comments_number(‚Schreibe einen Kommentar‘,’1 Kommentar‘,’% Kommentare‘); ?></a>
<?php edit_post_link(‚Bearbeiten‘, ‚ | ‚);?>
</p>
</div>
<div class=“entry“>
<?php the_content(); ?>
</div><br>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/codesyntax]

2. Blättern im Blog: Blätterfunktion in WordPress

Mit zunehmender Anzahl an Blog-Einträgen würde jeder Blog unübersichtlich werden, wenn alle Artikel einfach untereinander angezeigt werden. Daher muss eine Funktion eingebaut werden, um blättern zu können. Standardmäßig wäre dies folgende Funktion, die ohne Plugins funktioniert:

[codesyntax lang=“php“]
<p align=“center“><?php next_posts_link(‚« Ältere Einträge‘) ?> | <?php previous_posts_link(‚Neuere Einträge »‘) ?></p>
[/codesyntax]

Unterhalb den Artikeln würden zwei Links angezeigt, um die nächsten bzw. vorherigen Artikel anzuzeigen. Wer tiefer im Archiv wühlen möchte, muss allerdings ziemlich viel klicken. Stattdessen nutze ich ein Plugin, um auf einzelne Seiten direkt zugreifen zu können. WP-Pagenavi wäre so ein Plugin (Download unter WP-Pagenavi). Im WordPress-Theme wird es mit folgendem Code-Schnipsel eingebunden:

[codesyntax lang=“php“]
<?php if (function_exists(‚wp_pagenavi‘)) wp_pagenavi(); ?>
[/codesyntax]

Unsere Blätterfunktion binden wir nach der WordPress-Loop (endwhile;) und vor der if-Bedingung (endif;) ein. Abschließend sieht unsere index.php folgendermaßen aus:

[codesyntax lang=“php“]
<?php get_header(); ?>
<div id=“content“>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href=“<?php the_permalink() ?>“><?php the_title(); ?></a></h2>
<div class=“meta“>
<p>
<?php the_time(‚d.m.Y‘); ?> |
<?php the_author(); ?> |
<?php the_category(‚, ‚); ?> |
<a href=“<?php the_permalink() ?>#comments“><?php comments_number(‚Schreibe einen Kommentar‘,’1 Kommentar‘,’% Kommentare‘); ?></a>
<?php edit_post_link(‚Bearbeiten‘, ‚ | ‚);?>
</p>
</div>
<div class=“entry“>
<?php the_content(); ?>
</div><br>
<?php endwhile; ?>
<?php if (function_exists(‚wp_pagenavi‘)) wp_pagenavi(); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/codesyntax]

Nun haben wir unsere erste Ausgabe. Die index.php wird nämlich immer dann verwendet, wenn eine Template-Datei, wie die single.php, page.php oder archive.php, nicht vorhanden ist. Sie kann auch einzelne Blog-Artikel anzeigen. Da wir aber nicht jede Seite gleich gestalten wollen, werden wir im nachfolgenden Teil eine page.php für einzelne Seiten deines WordPress-Blogs anlegen.

<= Vorwärts zu Teil 4 =>
<= Zurück zu Teil 2

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert