Eigene Seitenvorlagen im WordPress Block-Theme erstellen

Nicht jede Seite einer Firmenwebsite soll gleich aussehen. Eine Landingpage für eine Aktion braucht oft keine Hauptnavigation, damit Besucher beim Angebot bleiben. Die Kontaktseite soll Telefonnummer und Öffnungszeiten immer an derselben Stelle zeigen, egal was Redakteure in den Inhalt schreiben. In Block-Themes lösen Sie das mit eigenen Seitenvorlagen, im Backend „Templates“ genannt. Diese Anleitung zeigt zwei Wege: eine frei wählbare Vorlage, die Redakteure pro Seite auswählen, und eine feste Vorlage für genau eine Seite. Beide legen Sie als Datei in einem Child-Theme an, damit Theme-Updates sie nicht löschen.

Voraussetzungen

• WordPress mit aktivem Block-Theme, etwa Twenty Twenty-Five. Getestet mit WordPress 7.1.2.
• Ein Child-Theme für das Block-Theme, oder Sie legen es in Schritt 1 an.
• Zugriff auf die Dateien per SFTP, FTP oder SSH und die Rolle Administrator im Backend.
• Einen Texteditor. Grundkenntnisse in HTML helfen, Block-Markup lässt sich aber auch im Website-Editor erzeugen und kopieren.
• Ein aktuelles Backup von Dateien und Datenbank, am besten arbeiten Sie zuerst auf einer Staging-Kopie.

Schritt 1: Child-Theme vorbereiten

Das Theme-Handbuch beschreibt, wo WordPress Block-Vorlagen sucht, und zwar in dieser Reihenfolge: zuerst in der Datenbank unter den vom Nutzer erstellten Templates, dann im Ordner templates des Child-Themes, zuletzt im Ordner templates des Eltern-Themes. Dateien im Eltern-Theme ersetzt jedes Update. Ihre Vorlagen gehören deshalb ins Child-Theme. Wie Sie ein Child-Theme anlegen, zeigt die Anleitung Child-Theme anlegen und Anpassungen bei Updates behalten. Für diese Anleitung genügt diese Struktur:

wp-content/themes/firma-child/
├── style.css
├── theme.json
├── parts/
│   └── header-minimal.html
└── templates/
    ├── landingpage.html
    └── page-kontakt.html

In der style.css stehen mindestens Theme Name: Firma Child und Template: twentytwentyfive, also der Ordnername des Eltern-Themes. Die Ordner templates für ganze Vorlagen und parts für wiederverwendbare Teile wie Kopf- und Fußbereich sind feste Namen, die WordPress erwartet.

Verifizieren: Unter Design > Themes erscheint das Child-Theme. Nach dem Aktivieren zeigt wp theme list es als active und das Eltern-Theme als parent.

Schritt 2: Eigenen Kopfbereich als Template-Teil anlegen

Eine Landingpage ohne Navigation braucht einen schlanken Kopfbereich. Statt ihn direkt in die Vorlage zu schreiben, legen Sie ihn als eigenen Template-Teil an. So können Sie ihn später in weiteren Vorlagen verwenden und an einer Stelle ändern. Erstellen Sie parts/header-minimal.html:

<!-- wp:group {"tagName":"div","layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:site-title {"level":0} /--></div>
<!-- /wp:group -->

Der Block site-title gibt den Namen der Website aus, den Sie unter Einstellungen > Allgemein festgelegt haben. "level":0 macht daraus einen Absatz statt einer Überschrift, damit auf der Landingpage nur der Seitentitel die Hauptüberschrift ist. Das hilft Suchmaschinen und Screenreadern bei der Orientierung.

Verifizieren: Die Datei liegt unter wp-content/themes/firma-child/parts/header-minimal.html und gehört demselben Benutzer wie die übrigen Theme-Dateien.

Schritt 3: Frei wählbare Vorlage anlegen und registrieren

Jetzt folgt die eigentliche Vorlage templates/landingpage.html. Sie bindet den schlanken Kopfbereich ein, zeigt Titel und Inhalt der Seite und übernimmt den normalen Fußbereich des Eltern-Themes:

<!-- wp:template-part {"slug":"header-minimal","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:post-title {"level":1} /-->
<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Der Teil footer stammt aus Twenty Twenty-Five. Weil das Child-Theme keinen eigenen Fußbereich hat, greift WordPress auf den des Eltern-Themes zurück. Damit die Vorlage in der Auswahl erscheint, registrieren Sie sie in der theme.json des Child-Themes:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "customTemplates": [
    { "name": "landingpage", "title": "Landingpage ohne Navigation", "postTypes": [ "page" ] }
  ]
}

name ist der Dateiname ohne Endung, title der Name, den Redakteure sehen. postTypes legt fest, bei welchen Inhaltstypen die Vorlage angeboten wird. Laut Handbuch gilt ohne Angabe nur page, für Beiträge ergänzen Sie post. Eine Beobachtung aus dem Test: Die Vorlage page-no-title des Eltern-Themes blieb in der Auswahl erhalten. Die customTemplates des Child-Themes kommen also hinzu, statt die des Eltern-Themes zu verdrängen.

Verifizieren: Öffnen Sie eine Seite im Editor. In der Seitenleiste unter Seite steht beim Eintrag Template jetzt „Landingpage ohne Navigation“ zur Auswahl. Per WP-CLI zeigt wp eval 'print_r(wp_get_theme()->get_page_templates(null, "page"));' den Eintrag [landingpage] => Landingpage ohne Navigation.

Schritt 4: Vorlage einer Seite zuweisen und prüfen

Im Editor wählen Sie die Vorlage in der Seitenleiste aus und speichern. WordPress hinterlegt die Wahl als Metafeld _wp_page_template an der Seite. Bei vielen Seiten oder für Tests geht das auch per WP-CLI:

wp post create --post_type=page --post_title="Aktion" --post_status=publish --page_template=landingpage --porcelain
wp post meta get 4 _wp_page_template

Die Zahl 4 ersetzen Sie durch die ID, die der erste Befehl ausgibt. Im Quelltext der Seite erkennen Sie die verwendete Vorlage an der CSS-Klasse im body-Tag. Im Test stand dort page-template-landingpage, und im Kopfbereich tauchte kein Navigationsblock mehr auf.

Verifizieren: Die Seite zeigt Website-Name, Titel und Inhalt, aber keine Hauptnavigation. Der Quelltext enthält page-template-landingpage.

Schritt 5: Feste Vorlage für eine einzelne Seite

Manche Seiten brauchen keine Auswahl, sondern immer denselben Aufbau. Hier hilft die Template-Hierarchie, die das Theme-Handbuch beschreibt: Für eine Seite sucht WordPress unter anderem nach page-SLUG.html, bevor es auf page.html zurückfällt. Der Slug ist der letzte Teil der Seitenadresse. Für die Seite /kontakt/ legen Sie also templates/page-kontakt.html an:

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:post-title /-->
<!-- wp:paragraph --><p>Telefon: 0351 000000</p><!-- /wp:paragraph -->
<!-- wp:post-content /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->

Diese Datei müssen Sie nicht in der theme.json registrieren. Der Vorteil: Redakteure können die Telefonnummer nicht versehentlich löschen, weil sie in der Vorlage steht und nicht im Inhalt. Der Nachteil: Ändert jemand den Slug der Seite, etwa auf kontakt-dresden, greift die Vorlage nicht mehr. Halten Sie das in Ihrer Website-Dokumentation fest.

Verifizieren: Die Seite /kontakt/ zeigt die Telefonnummer oberhalb des Inhalts, obwohl sie im Editor der Seite nicht vorkommt.

Schritt 6: Vorrang der Datenbank beachten

Im Website-Editor unter Design > Editor > Templates können Administratoren jede Vorlage bearbeiten. Das Theme-Handbuch hält fest, dass solche Änderungen in der Datenbank gespeichert werden. Nach der oben genannten Reihenfolge haben sie Vorrang vor Ihrer Datei. Im Test legten wir eine geänderte Fassung der Landingpage-Vorlage in der Datenbank an. Die Seite zeigte daraufhin nur noch diese Fassung, Änderungen an der Datei blieben wirkungslos. Erst nach dem Entfernen des Datenbankeintrags kam wieder die Datei zum Zug.

Welche Vorlagen angepasst sind, zeigt WP-CLI:

wp post list --post_type=wp_template --post_status=any --fields=ID,post_name
wp post list --post_type=wp_template_part --post_status=any --fields=ID,post_name

Im Website-Editor setzen Sie eine angepasste Vorlage über das Menü mit den drei Punkten auf die Fassung aus dem Theme zurück. Dabei gehen die Änderungen aus dem Editor verloren. Wer sie behalten möchte, kopiert das Block-Markup vorher über den Code-Editor in die Datei. Exportieren Sie außerdem vor dem Zurücksetzen die Datenbank, etwa mit wp db export. Die Anleitung WP-CLI installieren und die wichtigsten Befehle nutzen zeigt, wie das geht.

Eigene Vorlagen bleiben nur dann zuverlässig, wenn Sie nach Updates des Eltern-Themes prüfen, ob sich eingebundene Teile wie header oder footer verändert haben. Wer diese laufende Kontrolle nicht selbst übernehmen möchte, kann sie abgeben: Die WordPress-Wartung von wordpressupdate.de spielt Updates von WordPress, Plugins und Themes mit Kompatibilitätsprüfung ein und sichert die Website wöchentlich auf externen Speicher.

Verifizieren: Der erste Befehl liefert für Ihre Vorlagen keinen Eintrag, solange niemand sie im Editor geändert hat. Die Website zeigt dann genau das, was in Ihren Dateien steht.

Typische Fehler

Symptom	Ursache	Lösung
Vorlage fehlt in der Auswahl	Nicht in customTemplates registriert, name weicht vom Dateinamen ab oder theme.json ist ungültig	Name ohne .html prüfen, JSON validieren
Vorlage nur bei Seiten, nicht bei Beiträgen	postTypes fehlt oder enthält nur page	"postTypes": [ "page", "post" ] setzen
Änderungen an der Datei wirken nicht	Angepasste Fassung in der Datenbank hat Vorrang	Im Website-Editor zurücksetzen oder Eintrag vom Typ wp_template prüfen
Seite zeigt Standardlayout, obwohl Vorlage gewählt ist	Datei gelöscht oder umbenannt	Datei wiederherstellen. Im Test blieb die Zuordnung an der Seite erhalten
Feste Vorlage greift nicht mehr	Slug der Seite geändert	Slug zurücksetzen oder Datei umbenennen
Template-Teil fehlt auf der Seite	slug im Block passt nicht zur Datei in parts	Schreibweise prüfen, Dateiname ohne Endung

Häufige Fragen

Kann ich Vorlagen komplett im Website-Editor bauen?

Ja. Unter Design > Editor > Templates legen Sie über Template hinzufügen neue Vorlagen an. Sie liegen dann nur in der Datenbank. Für eine einzelne Website ist das bequem. Wenn Sie Vorlagen versionieren, dokumentieren oder auf eine zweite Website übertragen wollen, sind Dateien im Child-Theme die robustere Wahl.

Was unterscheidet eine Vorlage von einem Muster?

Eine Vorlage bestimmt den Rahmen der Seite: Kopfbereich, Inhaltsbereich, Fußbereich. Ein Muster (im Backend „Vorlagen“ unter den Blöcken) ist eine vorbereitete Gruppe von Blöcken, die Redakteure in den Inhalt einfügen. Die Übersetzung ist hier leider doppeldeutig, achten Sie auf den Zusammenhang.

Funktioniert das auch mit klassischen Themes?

Klassische Themes nutzen PHP-Dateien mit dem Kommentar Template Name: statt HTML-Dateien. Das Prinzip ist ähnlich, der Weg aus dieser Anleitung gilt aber nur für Block-Themes.

Wie viele eigene Vorlagen sind sinnvoll?

So wenige wie möglich. Das Handbuch weist selbst darauf hin, dass zu viele Wahlmöglichkeiten die Bedienung erschweren. Zwei bis drei klar benannte Vorlagen reichen für die meisten Firmenwebsites.

Testumfang

Wir haben auf einer Testinstallation mit WordPress 7.1.2 ein Child-Theme für Twenty Twenty-Five eingerichtet, und die Landingpage-Vorlage funktionierte im Frontend wie gewünscht ohne Navigation. Auffällig war, dass sich eine in der Datenbank gespeicherte Fassung gegen die Datei im Theme durchsetzt.

Die Bedienung im Website-Editor haben wir nicht im Browser durchgeklickt, die Menübezeichnungen stammen aus den deutschen Sprachdateien. Wenn Sie ein anderes Block-Theme nutzen, prüfen Sie die Namen der Template-Teile vorher auf einer Kopie.

Fazit

Eigene Seitenvorlagen im Child-Theme geben Landingpages und festen Seiten einen verlässlichen Aufbau, ohne dass Redakteure Layout bauen müssen. Registrieren Sie wählbare Vorlagen in der theme.json, nutzen Sie für Einzelseiten die Template-Hierarchie und behalten Sie im Blick, dass Änderungen im Website-Editor Vorrang haben. Die Updates von Themes und Plugins, nach denen Sie Ihre Vorlagen prüfen sollten, übernimmt auf Wunsch die WordPress-Wartung von Marcel Schönfelder.

Weiterführende Anleitungen und Quellen

• Block-Theme mit theme.json anpassen
• Child-Theme anlegen und Anpassungen bei Updates behalten
• WordPress-Website dokumentieren
• Theme-Handbuch: Custom Templates
• Theme-Handbuch: Template Hierarchy
• Theme-Handbuch: Introduction to Templates