Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Das eigene WordPress-Theme erstellen – #4: Die index.php und die Post-Loop

In dieser Serie geht es darum, ein WordPress-Theme zu erstellen – von Grund auf. Im vierten Teil geht es um die index.php und die Loop – einen elementaren Bestandteil eines WordPress-Themes.

Kein WordPress-Theme ohne index.php

Die index.php ist wie die style.css aus unserem zweiten Teil eine Pflicht-Datei für ein WordPress-Theme – ohne geht es nicht. In der Template-Hierarchie eines WordPress-Themes ist die index.php die allerletzte Fallback-Datei. Wenn also beispielsweise eine Seite angezeigt wird, euer Theme aber keine page.php und keine Datei für eine bestimmte Seite enthält, so wird auf die index.php zurückgegriffen.

In erster Linie ist die index.php aber für die Darstellung der Blog-Übersicht gedacht. Als Alternative für den Fall, dass das Blog als Startseite fungiert, gibt es noch die home.php. Ihr könntet also die Darstellung verändern, wenn das Blog als Startseite genutzt wird. So sieht unsere index.php aus:

<?php get_header(); ?>
    <main role="main">
        <?php if ( have_posts() ) {
            /* Start the Loop */
            while ( have_posts() ) {
                the_post();
                get_template_part( 'content', get_post_format() );
            }
        }
        the_posts_pagination( array( 'type' => 'list' ) ); ?>
    </main>
<?php get_sidebar();
get_footer();

Ziemlich übersichtlich, oder? Mit der get_header()-Funktion wird die header.php, die wir im letzten Teil der Reihe behandelt haben, eingebunden. Innerhalb des main-Elements findet ihr einen elementaren Teil von WordPress: Die Loop. Das ist das Standard-Prozedere, wie in WordPress eine Reihe von Beiträgen ausgegeben wird. Mit if ( have_posts() ) prüfen wir, ob Beiträge gefunden wurden.

Wenn das so ist, starten wir die Schleife und lassen sie so lange laufen, bis have_posts() nicht mehr wahr ist, es also nicht noch mehr Beiträge gibt. the_post() holt die Daten zu dem aktuellen Beitrag aus der Datenbank. Innerhalb dieser while-Schleife stehen uns jetzt nach dem the_post()-Aufruf Funktionen zur Verfügung, um Informationen zu dem Beitrag anzuzeigen, der gerade durchlaufen wird – zum Beispiel the_title() für die Ausgabe des Titels.

Theoretisch könnten wir uns jetzt bereits in der index.php um die Ausgabe des Beitrags für die Blog-Seite kümmern. Da wir aber eine unterschiedliche Darstellung für Beiträge vom Typ „Bild“ und „Galerie“ erreichen wollen, gehen wir einen anderen Weg:

get_template_part( 'content', get_post_format() );

Mit dieser Zeile sorgen wir dafür, dass eine Datei mit dem Präfix content- gefolgt von der Bezeichnung des Post-Formats eingebunden wird. Im Fall einer Galerie wäre das die content-gallery.php. Für Standard-Beiträge und solche, für die keine besondere content--Datei angelegt wurde, wird die Datei content.php eingebunden. In diesen Dateien, die wir in späteren Teilen besprechen werden, findet dann die Ausgabe der Beiträge für die Blog-Seite statt.

Mit dem Aufruf der the_posts_pagination()-Funktion geben wir bei Bedarf eine Pagination aus, damit auch ältere Beiträge angesehen werden können. Mit der get_sidebar()-Funktion binden wir die sidebar.php und mit get_footer() die footer.php ein.

Der Code auf GitHub

Im GitHub-Repository zu dieser Reihe gibt es den Tag „v0.3“. Dort findet ihr den Stand des Themes nach diesem Artikel.

Die weiteren Teile unserer WordPress-Reihe:

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

11 Reaktionen
Kompaktdesign

"Webdesigner", die irgendwelche Billig-Templates als Eigenentwicklung verkaufen gibt es auch bei jedem anderen CMS.
Da es den Eindruck macht, dass Du selbst in dem Bereich tätig bist, ist Deine Wut nachvollziehbar.
Dir sollte aber auch bewusst sein, dass 1. WordPress nichts für solche Geschäftspraktiken kann und 2. diese Kunden auch ohne WordPress nicht zu Dir kommen würden, da die Budgets in der Regel der Agenturleistung entsprechen.

Antworten
Karl

"Ziemlich übersichtlich, oder?" die Antwort ist nein. Insbesondere der sinnvolle Kommentar "Start the Loop" vor einer while-Schleife zeigt wie krank das WP System eigentlich ist von der Verwendung von Funktionen im Template reden wir besser nicht.

Wieso wird für diesen Krüppel immer wieder die Werbetrommel gerührt? Wieso bekommen Systeme, die Menschen zu besseren Code Paradigmen motivieren keine Tutorials? Ist der Author dieser vielleicht nicht mächtig und versteckt sich hinter einem Krüppel?

Antworten
Florian Brinkmann

„Wieso wird für diesen Krüppel immer wieder die Werbetrommel gerührt?“

Erstens rühre ich hier keine Werbetrommel und zweitens ist WordPress nun mal das meistverbreitete CMS.

„Ist der Author dieser vielleicht nicht mächtig und versteckt sich hinter einem Krüppel?“

Was genau hat dir WordPress angetan, dass du es wiederholt als „Krüppel“ bezeichnen musst? Gibt es da ein Ereignis, das du teilen möchtest? :)

Antworten
Karl

Man könnte meinen, dass das Publikum eines Fachmagazins, wenn es denn Interesse hat, sich mit den Basics von Wordpress auseinander gesetzt hat? Insofern verstehe ich den Aufwand nicht mit dem beständig Grundlagen vermittelt werden wollen während - in meinen Augen - interessante Ansätze wie bspw. Turbolinks (auch schon wieder ein alter Hut) nicht mal einen 3-Zeiler bekommen.

Was Wordpress für mich zu einem Krüppel macht?

Globals, Funktionen die ein print-Statement beinhalten, inkosistente Funktionsnamen, inkosistente Funktionsexistenz, Funktions Ping-Pong und das fehlen jeglichen roten Fadens was einheitliches Code Design angeht.

E.

Mit dem Wort Krüppel hast du dich eigentlich selbst disqualifiziert. :(

Antworten
Karl

Und mit "eigentlich" hast du die Aussage deines Satzes entwertet ;) Man sollte nicht immer jedes Wort auf die Goldwaage legen.

E.

Da das Wort »eigentlich« gerade in deiner Goldwaage liegt, sei dir hier der Sinn verraten. Das Wort »eigentlich« ist sinnverwandt mit dem Wort »wesentlich«.

Antworten
Quocopenquo

- "Ziemlich übersichtlich, oder?" die Antwort ist nein.
Genau das war auch mein Gedanke.

- "Wieso wird für diesen Krüppel immer wieder die Werbetrommel gerührt?"
Weil das für Agenturen die Lizenz zum Gelddrucken ist.

Alles was es braucht sind 50,- EURO Einsatz bei themeforest.net und einen Praktik... äh, ich meine natürlich Online-Redakteur der einen halben Nachmittag mal eben Texte und Bilder einsetzt.

Rasch noch rein mit dem unvermeidlichen Nivo-Slider und bloss nicht das
All-in-One-SEO-Pack vergessen. Schliesslich soll das Ganze ja bei Google
gut gefunden werden.

Jede noch so talentfreie BWL'er Klitsche, die nicht mal in der Lage ist
eine eigene Website zu entwickeln, generiert so im Handumdrehen 5-stellige Rechnungsbeträge: unser Grafiker hat..., unser Programmierer hat, unser Datenbank Experte, Suchmaschinenoptimierer etc. hat...

Kundenzitat: "Das verstehe ich nicht. Dabei haben die so einen guten Eindruck gemacht. Die haben doch so eine Super-Seite".

Wer mal herzlich lachen möchte, hier meine beiden derzeitigen Lieblings Surf-Tips:

Die beiden Links wurden von der Redaktion entfernt.

Antworten
Florian Brinkmann

Hi Quocopenquo,

deinen Ärger über ThemeForest-Themes kann ich gut nachvollziehen. Dennoch habe ich die beiden Links aus deinem Kommentar entfernt. Öffentlich vorgeführt werden muss hier doch keiner :)

Viele Grüße,
Florian

E.

Dafür kann weder WordPress noch ThemeForest etwas dafür. Ehrliche Menschen gibt es, aber man muss sie erst finden. Hier hilft nur sich vorher zu informieren. Und das ist in jedem Bereich wichtig, ob Arztbesuch oder Immobilienkauf.

Frank Hübner

Ha, ha. Hier das Problem auf den Punkt gebracht:

http://www.freepik.com/blog/wp-content/uploads/2015/07/Designer-joke-66.jpg

Bin zwar auch kein Fan von WP aber das tutorial gefällt mir - man merkt, dass dort jemand sein ganzes Herzblut reinlegt.

Frank Hübner
(Senior Programmer)
http://www.binary-garden.com

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.