Wenn du Themes anpassen oder von Grund auf neu erstellen willst, ist es wichtig zu verstehen, wie die Hierarchie der WordPress-Templates funktioniert.
In erster Linie hilft dieses WordPress-System dabei, alles organisiert zu halten. Sobald du weißt, was alle Theme-Template-Dateien sind, was sie tun und wie sie priorisiert sind, kannst du fast jeden Aspekt des Aussehens deiner Webseite verändern.
In diesem Artikel erklären wir dir, was die WordPress Template-Hierarchie ist und wie sie funktioniert. Dann bieten wir dir eine vollständige Aufschlüsselung der Template-Dateien, die in jedem WordPress-Seitentyp enthalten sind (einschließlich eines Spickzettels zum Nachschlagen), damit du sie zu deinem Vorteil nutzen kannst.
Los geht’s!
Eine Einführung in die WordPress Template Hierarchie
Typischerweise verwenden nicht-dynamische Webseiten statische HTML– und CSS-Dateien, um ihre Inhalte darzustellen. WordPress ist jedoch eine dynamische Plattform, die auf der Programmiersprache PHP basiert. Jede WordPress-Seite lädt mehrere .php-Dateien, von denen jede regelt, wie ein bestimmter Abschnitt oder eine Komponente aussieht.
Immer wenn du eine bestimmte Art von Seite lädst, sucht das Content Management System (CMS) nach den entsprechenden Template-Dateien, die ihr entsprechen.
Wenn du zum Beispiel die Suchfunktion von WordPress nutzt und eine Suchergebnisseite lädst, sucht das CMS nach zwei Template-Dateien:
- search.php, die bestimmt, wie deine Suchergebnisseiten aussehen
- index.php, welche die Standard-Vorlagendatei ist, die WordPress verwendet, wenn es die oberste Option innerhalb der Hierarchie nicht finden kann
Auf welche Template-Dateien du Zugriff hast, hängt davon ab, welches Theme du verwendest. Alle WordPress Themes sind eine Sammlung von Templates, Stylesheets und anderen Elementen, wie z.B. Bildern. Wenn dein Theme im obigen Beispiel ein search.php Template enthält, wird WordPress es finden und laden.
In manchen Fällen kann es sein, dass du ein Theme verwendest, das keine Template-Dateien für die Arten von Seiten enthält, die du laden möchtest. An dieser Stelle kommt die WordPress Template-Hierarchie ins Spiel. Es ist ein eingebautes System, das WordPress sagt, welche Template-Dateien in welcher Reihenfolge geladen werden sollen.
Wenn WordPress für eine Suchseite die Datei search.php nicht finden kann, wird es zur nächsten Datei in der Hierarchie wechseln, der index.php. Diese Datei ist der letzte Fallback für jeden einzelnen Zweig innerhalb der Template-Hierarchie.
Theoretisch kannst du ein voll funktionsfähiges Theme haben, das nur eine einzige Vorlagendatei enthält, und das ist index.php.
In der Praxis würde ein Theme mit einer einzigen Vorlagendatei jedoch kaum Stilanpassungen enthalten und jede Art von Seite würde ziemlich gleich aussehen. Wenn das nicht das ist, was du willst, ist das Verständnis der WordPress Template-Hierarchie einer der wichtigsten Schritte, die du als Theme-Entwickler machen kannst.
Wie die WordPress Template Hierarchie funktioniert
Wie du vielleicht weißt, kannst du in WordPress mehrere Arten von Seiten verwenden, je nachdem, was du veröffentlichen möchtest. Es gibt sieben Hauptkategorien, die du verwenden kannst:
- Titelseite
- Einzelne Beiträge
- Einzelne Seiten
- Benutzerdefinierte Beitragstypen
- Suchergebnis-Seiten
- Kategorie- und Tag-Seiten
- 404-Fehlerseiten
Jede dieser Seiten hat ihre eigene benutzerdefinierte Hierarchie, was bedeutet, dass sie ein bestimmtes Set von Vorlagendateien verwendet.
Wenn du einen kurzen Blick in einen beliebigen Ordner deines Themes wirfst, wirst du normalerweise eine Sammlung von Vorlagendateien finden. Im Folgenden siehst du ein Beispiel für Vorlagendateien, die im Theme-Verzeichnis für einen Blogbeitrag aufgelistet sind:
Dies ist ein Single-Post-Seitentyp, was bedeutet, dass er die Datei single.php als Vorlage für den Hauptinhalt auf der Seite (den Blogpost selbst) verwendet.
Zusätzlich hat er eine separate Vorlagendatei für jedes Seitenelement, von denen du die meisten auf den ersten Blick erkennen solltest, darunter:
- Header
- Footer
- Kommentare
- Seitenleiste
Es ist wichtig zu verstehen, dass, obwohl jeder Seitentyp seine eigene Hierarchie hat, sie sich oft gemeinsame Vorlagendateien teilen, wie z.B. header.php und footer.php.
Wenn du dein eigenes Theme erstellst, bedeutet das, dass du eigene Styles für jeden Seitentyp erstellen kannst, während du auch Template-Dateien zur Wiederverwendung erstellst.
Du kannst auch eigene Vorlagendateien für Elemente wie Seitenleisten und Fußzeilen erstellen, die nur für bestimmte Seitentypen gelten. Diese Flexibilität verdanken wir dem modularen Ansatz von WordPress bei Templates.
Wenn du das Theme wechselst, werden die Unterschiede in den Layouts, die du siehst, auf die neuen Template-Dateien zurückgeführt, die WordPress lädt. Child Themes spielen auch eine Rolle in der Hierarchie der WordPress Themes, die wir bald besprechen werden.
Wo man WordPress Template Dateien findet und ändert
Eine .php-Datei kann sowohl PHP-Code als auch HTML-Markup enthalten (die du alle bearbeiten kannst). Daher können WordPress Template-Dateien so komplex sein, wie du sie haben musst. In vielen Fällen sind die Template-Dateien, die WordPress verwendet, eine Sammlung von Funktionen für die Elemente, die sie steuern.
Um dir ein Beispiel zu geben, ist hier ein kurzer Blick auf die header.php Template-Datei, die das offizielle WordPress Twenty Twenty-One Theme verwendet:
Wie wir bereits erwähnt haben, enthält jedes WordPress Theme einen eigenen Satz an Template-Dateien. Du kannst sehen, welche Vorlagendateien dein Theme enthält, indem du mit einem File Transfer Protocol (FTP) Client auf den Ordner im Hauptverzeichnis deiner Webseite zugreifst.
Hier siehst du, wie das für das vorherige offizielle WordPress Theme, Twenty Twenty, aussieht:
Standardmäßig lädt WordPress Template-Dateien, die sich entweder im Hauptverzeichnis deines Themes (wp_content > themes) oder im Ordner template-parts befinden.
Wenn du vorhast, mehrere Template-Dateien zu erstellen, empfehlen wir dir, deine primären Seiten-Templates im Hauptverzeichnis zu belassen. Für spezifischere Vorlagendateien, wie z.B. eine Full-Width-Seite oder Sidebar-Layouts, kannst du Unterverzeichnisse verwenden.
Der beste Weg, um die komplette WordPress Template-Hierarchie zu verstehen, ist ein Spickzettel. In diesem Fall zeigen wir dir einen visuellen Überblick über die Template-Hierarchie, mit freundlicher Genehmigung des WordPress Codex:
Der WordPress Codex enthält eine Menge Informationen über die Template-Hierarchie, daher empfehlen wir dir, diese Ressource als Lesezeichen zu speichern. Nun wollen wir uns die einzelnen Seitentypen und die dafür verwendeten Template-Dateien genauer ansehen.
Eine Aufschlüsselung der WordPress Template Hierarchie nach Seitentyp
WordPress verwendet sieben Haupttypen von Seiten. In diesem Abschnitt werden wir über jede von ihnen sprechen und dir eine Aufschlüsselung der Vorlagendateien bieten, die sie verwenden. Beginnen wir mit der Titelseite.
Startseite Template Dateien
Deine WordPress-Startseite ist der erste Halt, den die meisten Nutzer machen, wenn sie deine Webseite besuchen. In der Praxis kann das Layout der Startseite von einer Seite zur anderen dramatisch variieren.
Für eine grundlegende Startseite sucht WordPress jedoch nach diesen drei Vorlagendateien in dieser Reihenfolge:
- front-page.php
- home.php
- index.php
Wenn dein Theme keine front-page.php-Vorlagendatei enthält, nimmt WordPress standardmäßig die zweite Option, und so weiter. Wie immer ist die index.php Datei die letzte Station, die WordPress im Template Entscheidungsbaum durchläuft.
Einzelne Beiträge
Einzelne WordPress-Artikel nutzen die Hierarchie des Single Post Templates. Für den Hauptinhalt eines jeden Blogposts sucht WordPress nach den folgenden Dateien:
- single.php
- singular.php
- index.php
Wenn du einen Blick auf den Template-Spickzettel wirfst, wirst du jedoch eine komplexere Hierarchie bemerken, die in einigen Fällen auftaucht.
Das liegt daran, dass WordPress dir die Möglichkeit gibt, Vorlagendateien für einzelne Beiträge und einzelne Kategorien zu erstellen und dann standardmäßig die single.php zu verwenden, wenn es keine dieser Optionen findet.
Neben den primären Vorlagendateien gibt es noch Elemente wie den Header, den Footer, die Sidebars und den Kommentarbereich. Wie wir bereits erwähnt haben, kann jedes dieser Elemente seine eigene Vorlagendatei haben.
Einzelne Seiten
Nach den Beiträgen sind die einzelnen Seiten das A und O für die meisten WordPress Webseiten. In den meisten Fällen verwenden sie ein anderes Template als deine Startseite, es sei denn, beide Seitentypen sind standardmäßig auf index.php eingestellt.
Hier siehst du, wie die Hierarchie der Einzelseitenvorlagen aussieht:
- page.php
- singular.php
- index.php
Obwohl die Vorlagenhierarchie für einzelne Beiträge und Seiten ähnlich ist, gibt es einige wichtige Unterschiede.
Erstens, wenn es um Seiten geht, verwendet WordPress den get_page_templates() Pfad für benutzerdefinierte Dateien, die du verwenden kannst, um die Standard-Seitenvorlage zu ändern oder umzuleiten.
Zusätzlich kannst du Templates für bestimmte Slugs und IDs erstellen. Wenn du entweder eine page-{slug}.php oder eine page-{id}.php Datei hast, wird WordPress versuchen, jede Datei in der Reihenfolge zu laden, bevor es auf page.php zurückgreift.
Benutzerdefinierte Post-Typen
Du kannst benutzerdefinierte Beitragstypen für verschiedene Arten von Inhalten erstellen, die du vielleicht nicht mit Seiten oder Beiträgen bündeln möchtest. Benutzerdefinierte Beitragstypen bieten dir einen höheren Grad an Organisation für deine Inhalte und sie haben auch ihre eigene Vorlagenhierarchie:
- archive-{post_type}.php
- archive.php
- index.php
Die Template-Hierarchie für benutzerdefinierte Beitragstypen ist nicht so komplex wie die für vollständige Seiten oder Beiträge. Allerdings kannst du in WordPress für jeden benutzerdefinierten Beitragstyp eine eigene Vorlagendatei erstellen, sodass sie nicht dasselbe Layout haben müssen.
Suchergebnis-Seiten
Wir haben dir bereits die Template-Hierarchie vorgestellt, die WordPress für Suchergebnisseiten verwendet, also lass uns kurz rekapitulieren, wie sie aussieht:
- search.php
- index.php
Wenn wir uns von „komplexen“ Seitentypen wie Beiträgen oder deiner Startseite wegbewegen, wird die WordPress Template-Hierarchie viel geradliniger.
Bei einer Suchseite musst du in der Regel nicht allzu viele Elemente außer den Ergebnissen selbst einbauen. Je einfacher die Struktur ist, desto kürzer ist in der Regel auch die Hierarchie.
Kategorie- und Tag-Seiten
Obwohl viele Webseiten nicht direkt auf sie verlinken, erstellt WordPress Sammelseiten für deine Tags und Kategorien. Außerdem gibt es spezifische Unterseiten für jedes Element innerhalb dieser Taxonomie.
Wenn man bedenkt, wie komplex Taxonomien für Webseiten mit großen Inhaltsbibliotheken werden können, beinhaltet diese Hierarchie mehr ‚Schritte‘ als üblich:
- category–{slug}.php
- category-{id}.php
- category.php
- archive.php
- index.php
Beachte, dass die gleiche Hierarchie für Tags verwendet wird, außer dass „Tag“ in allen Fällen „Kategorie“ ersetzt.
Theoretisch kannst du für jede Kategorie oder jeden Tag auf deiner WordPress Webseite eine eigene Vorlagendatei erstellen und sie entweder durch Slugs oder IDs identifizieren. Allerdings machen sich nur wenige Webseiten diese Mühe.
Wenn du nicht vorhast, deine Besucher durch deine Kategorieseite blättern zu lassen, kannst du das archive.php Template verwenden.
404 Fehler Seiten
Manchmal versuchen Besucher, eine Seite aufzurufen, die nicht existiert. Wenn das passiert, gibt WordPress eine 404-Fehlerseite zurück.
Standardmäßig bietet WordPress keine Optionen, um das Aussehen dieser Seite anzupassen. Du kannst das Aussehen jedoch selbst über die Template-Datei anpassen. Die Template-Hierarchie ist recht kurz:
- 404.php
- index.php
Wenn deine Webseite wächst, werden auch die Fälle zunehmen, in denen die Nutzer auf 404-Fehler stoßen können. Eine benutzerdefinierte Fehlerseite für solche Situationen zu haben, kann dir helfen, die Besucher zu informieren, warum die Seite nicht geladen wird, sie in eine andere Richtung zu leiten und Frustration zu reduzieren.
Wenn du eine 404-Vorlagendatei lädst, wird WordPress nach deiner benutzerdefinierten Datei suchen und diese laden, bevor es die Standarddatei verwendet.
Wo Child Themes in die WordPress Template Hierarchie passen
Wenn du deine WordPress Themes gerne anpasst, ist es eine gute Idee, ein Child Theme zu verwenden. Auch Child Themes haben ihren Platz in der WordPress Template-Hierarchie, aber das ist nicht offensichtlich, wenn du dir den Spickzettel ansiehst, den wir dir zuvor geboten haben.
Kurz gesagt, die Verwendung eines Child-Themes fügt der Template-Hierarchie für jeden Seitentyp, den du verwendest, eine zweite Ebene hinzu.
Nehmen wir an, du verwendest ein Child Theme, das benutzerdefinierte Template-Dateien für einzelne Seiten enthält. Hier ist die Reihenfolge, in der WordPress versuchen wird, die Dateien zu laden:
- page.php innerhalb des Child Themes
- page.php innerhalb des Parent Themes
- singular.php innerhalb des Child Themes
- singular.php innerhalb des Parent Themes
- index.php innerhalb des Child Themes
- index.php innerhalb des Parent Themes
Wenn WordPress eine Version einer Vorlagendatei in deinem Child-Theme finden kann, wird diese geladen, auch wenn es ein Gegenstück im Parent-Theme gibt. In manchen Fällen kann es vorkommen, dass du die Template-Dateien für ein von dir verwendetes Theme anpassen möchtest. In diesen Fällen ist die Verwendung eines Child-Themes perfekt.
Wie bei anderen Arten von Anpassungen, gehen Änderungen an den Template-Dateien eines Themes verloren, wenn du es aktualisierst. Das Hinzufügen dieser Änderungen über ein Child Theme bewahrt dich vor dieser Situation.
WordPress Template Tags für die Entwicklung von Themes verwenden
In der WordPress-Entwicklung wirst du oft auf Template-Tags stoßen, das sind PHP-Funktionen, mit denen du Daten dynamisch generieren und abrufen kannst. Template-Tags sind oft Teil von Template-Dateien, aber sie sind nicht austauschbar.
WordPress baut Dutzende von Template-Tags in seinen Code ein, die du bei der Entwicklung von Themes verwenden kannst. Einige Beispiele sind:
- get_header()
- get_footer()
- get_sidebar()
- get_search_form()
- get_template_part()
Diese Tags ermöglichen es dir, Templatedateien aus dem von dir verwendeten Theme zu sammeln. In der Praxis bedeutet das, dass du bestimmte Elemente zu primären Template-Dateien hinzufügen kannst, wie z.B. front-page.php oder index.php.
Wenn du eine vollständige Liste aller Template-Tags haben möchtest, die du in der WordPress-Entwicklung verwenden kannst, schau dir den WordPress Codex an.
Dort findest du Anleitungen zur Verwendung der einzelnen Template-Tags, ihre individuellen Parameter und Beispiele für den Code in Aktion.
Zusammenfassung
Obwohl die WordPress Template-Hierarchie auf den ersten Blick komplex aussieht, besteht sie aus einer Reihe von einfachen Entscheidungsbäumen. Immer wenn du eine WordPress Webseite besuchst, erkennt das CMS, auf welche Art von Seite du zugreifen willst und verwendet dann die Hierarchie, um zu bestimmen, welche Template-Datei geladen werden soll.
Neben den Hauptvorlagen für jeden Seitentyp kannst du auch Vorlagendateien für einzelne Elemente wie Header, Footer und Sidebars haben.
Dieser modulare Ansatz gibt dir die volle Kontrolle darüber, wie jede Seite auf deiner Seite aussieht und hilft dir, während des WordPress-Entwicklungsprozesses Zeit zu sparen.
Hast du Fragen dazu, wie die WordPress Template-Hierarchie funktioniert? Teile sie im Kommentarbereich unten mit!
Chefredakteur bei Kinsta und Content Marketing Berater für WordPress Plugin-Entwickler. Verbinde dich mit Matteo auf Twitter.
Schreibe einen Kommentar