Eigenes WordPress-Theme erstellen

Von der HTML-Vorlage zum fertigen WordPress-Theme: Die Hauptdatei (index.php)

∅ 4.8 / 32 Bewertungen

Die Hauptdatei (index.php)

Auf dieser Seite

Nach drei Auslagerungsdateien wenden wir uns nun dem Herzstück eines WordPress-Themes zu: der index.php . Diese Datei muss in einem Theme vorhanden sein. Hier der Code unserer index.php :

<?php get_header(); ?>

        <div id="inhalt">

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

            <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Der Verweis (Permalink) zu: <?php the_title(); ?>"><?php the_title(); ?></a></h2>
            <div class="beitrags-info">Von <?php the_author(); ?> am <?php the_time('d. F Y'); ?> um <?php the_time('H:i'); ?><?php edit_post_link(); ?></div>

            <div class="der-beitrag">
                <?php the_content(); ?>
</div> <!-- Ende des jeweiligen Beitrags -->

            <div class="feedback">
                <?php comments_popup_link('Kommentare (0)', 'Kommentare (1)', 'Kommentare (%)'); ?>
</div>
            <!-- Ende des jeweiligen Beitrags -->
<?php comments_template(); /* Der Kommentarbereich */ ?>

<?php endwhile; else: ?>
<p>Tut mir leid, es wurde kein passender Beitrag gefunden.</p>
<?php endif; ?>

            <p><?php posts_nav_link(' - ', '« Zurückblättern', 'Weiterblättern »'); ?></p>

        </div><!-- /#inhalt -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Am Anfang sehen Sie schon den Include-Tag get_header(); . Mit diesem bindet man den kompletten Code der header.php an der entsprechenden Stelle ein. Danach folgt der Loop.

Der Loop

Die Stellen an denen der Loop anfängt und endet habe ich hervorgehoben. Der Loop fängt mit der Abfrage an, ob es Beiträge gibt ( if (have_posts() ). Wenn ja, wird die while -Schleife gestartet und es werden alle Beiträge aufgelistet. Die Funktion the_post(); ist dafür zuständig, dass die einzelnen Beiträge innerhalb des Loops verfügbar sind, und erst durch den Einsatz dieser Funktion können etliche Template-Tags überhaupt funktionieren.

Bei dieser Notierung handelt es sich um die alternative Syntax für Kontroll-Strukturen. Die Zeile könnte man auch folgendermaßen in der "konservativen" Schreibweise notieren:

<?php
if (have_posts()) {

 while(have_posts())) {

 the_post();

 }

}

?>

Bezüglich der alternativen Syntax steht in der PHP-Dokumentation Folgendes:

PHP bietet eine alternative Syntax für einige seiner Kontroll-Strukturen, als da sind if , while , for , foreach und switch . Die öffnende Klammer muss immer durch einen Doppelpunkt " : " und die schließende Klammer entsprechend durch endif; , endwhile; , endfor; , endforeach; oder endswitch; ersetzt werden.

Nach dem Loop-Anfang wird der eigentliche Titel des Beitrages mit einer Überschrift der zweiten Ordnung ( <h2> ) ausgezeichnet. Den Verweis bzw. den Permalink des Beitrages erhält man durch den Template-Tag the_permalink(); und der Inhalt der Überschrift wird durch the_title(); generiert.

Beitragsinformationen

In der Zeile danach befindet sich ein div -Block, dem man das Klassen-Attribut beitrags-info zugewiesen hat. Hier befinden sich einige Informationen zu dem jeweiligen Beitrag. Zum einen wäre dies der Name des Autors* the_author(); , zum zweiten das Datum the_time('d. F Y'); und zum dritten wäre dies die Uhrzeit the_time('H:i'); an dem der Beitrag publiziert wurde. 
 (*Hiermit ist der Name des Autors gemeint, welchen man in der Benutzerverwaltung unter "Name im Blog" einstellen kann.)

Wie Sie sehen, habe ich zwei Mal den Template-Tag the_time(); eingesetzt. Einmal für das Datum und einmal für die Uhrzeit . Es existiert zwar ein eigener Template-Tag für das Datum ( the_date(); ), allerdings hat dieser Tag einen Nachteil: er wird nur einmal pro Kalendertag angezeigt. Haben Sie am gleichen Tag mehrere Beiträge verfasst, wird das Datum in der Übersicht nur bei dem obersten Beitrag des gleichen Tages angezeigt.

Am Ende des div -Blocks sehen Sie den Template-Tag edit_post_link(); . Dieser Tag erstellt einen Bearbeitungslink , welcher nur von den eingeloggten Nutzern, welche die entsprechenden Rechte haben (Admin, Redakteur und Autor) gesehen werden kann. Wenn Sie diesen Link anklicken, gelangen Sie in den Bearbeitungsmodus des jeweiligen Blog-Artikels oder der Seite.

Der eigentliche Beitrag

Der eigentliche Beitrag – egal ob Blog-Artikel oder Seite – wird durch den Template-Tag the_content(); ausgegeben. Das war's. Dieser Tag hat zwar auch Parameter, aber diesen und einigen weiteren werden wir uns im nächsten Kursteil widmen.

Die Anzahl der Kommentare und der Kommentarbereich

Die Anzahl der Kommentare eines Beitrages gibt man durch den Tag comments_popup_link(); aus. Eigentlich ist die Angabe der Parameter zwar nicht zwingend notwendig, aber wenn man auf die Angabe der Paramter verzichtet, wird der Text nicht übersetzt und es steht dann im Frontend z. B. "1 Comment". Da wir es aber deutsch haben möchten, setzen wir drei Parameterwerte ein:

'Kommentare (0)', 'Kommentare (1)', 'Kommentare (%)'

Die Funktionsweise dürfte recht klar sein. Der erste Wert wird ausgegeben, wenn ein Beitrag keinen Kommentar besitzt. Der zweite Wert kommt zum Einsatz, wenn der Blog-Artikel einen und der dritte Wert ist zuständig, wenn der Artikel mehrere Kommentare hat.

Den Kommentarbereich binden wir durch den Include-Tag comments_template(); ein, so als ob wir hier die comments.php eingebunden hätten … welcher wir uns im nächsten Abschnitt annehmen werden.

Mit posts_nav_link(' – ', '« Zurückblättern', 'Weiterblättern »'); wird die Weiterblättern-Funktion realisiert. Diese Funktion wird am Ende jeder Seite eingebunden, wo die Blog-Artikel aufgelistet werden, vorausgesetzt es existiert eine Mindestanzahl an Beiträgen. Wenn Sie zum Beispiel in "Einstellungen" » "Lesen" » " Blogseiten zeigen maximal" den Wert 5 eingegeben haben, dann müssen mindestens sechs Blog-Artikel existieren, damit die Weiterblättern-Funktion angezeigt wird.

Dieser Template-Tag verfügt über drei Parameter. Diese Zeichen, die man im ersten Parameter einträgt dienen als Trennung zwischen "Zurückblättern" und "Vorblättern". Die anderen beeiden Parameter sind die Texte des Zurück- bzw. des Vor-Links.