Wissen WordPress-Entwicklung

Custom Templates über theme.json im WordPress-Theme registrieren

Seiten, Beiträge und eigene Inhaltstypen können unterschiedliche Layouts benötigen. customTemplates verbindet die Vorlagendateien eines Block-Themes mit verständlichen Namen und macht sie im WordPress-Editor auswählbar.

3 Min. von Matthias Ulrich

Eine Inhaltsseite mit grosszügiger Textfläche, ein Beitrag mit ergänzender Seitenleiste oder eine eigene Darstellung für einen Custom Post Type: Block-Themes können mehrere Layoutvarianten für einzelne Inhalte bereitstellen.

Die Eigenschaft customTemplates registriert diese Vorlagen in der theme.json. WordPress verbindet dabei eine Template-Datei mit einem verständlichen Titel und den Inhaltstypen, für die sie im Editor zur Auswahl steht.

Custom Templates verbinden HTML-Vorlagen im Theme mit der Layoutauswahl im WordPress-Editor.
theme.json registriert die Layoutvorlagen und legt fest, für welche Inhaltstypen sie im WordPress-Editor auswählbar sind.

Layoutvarianten im Theme organisieren

Custom Templates liegen als HTML-Dateien im Ordner /templates. Ein Theme mit einer breiten Inhaltsvorlage und einer Variante mit Seitenleiste kann beispielsweise so aufgebaut sein:

theme/
├── templates/
│   ├── index.html
│   ├── content-canvas.html
│   └── with-sidebar.html
└── theme.json

Der Dateiname bildet die technische Verbindung zur Registrierung. Das sichtbare Layout entsteht als Block-Markup innerhalb der jeweiligen HTML-Datei.

Custom Templates in theme.json registrieren

Die Eigenschaft customTemplates enthält die Liste der verfügbaren Vorlagen. Das folgende Beispiel stellt «Breites Layout» für Seiten sowie «Mit Seitenleiste» für Seiten und Beiträge bereit:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"customTemplates": [
		{
			"name": "content-canvas",
			"title": "Breites Layout",
			"postTypes": [ "page" ]
		},
		{
			"name": "with-sidebar",
			"title": "Mit Seitenleiste",
			"postTypes": [ "page", "post" ]
		}
	]
}

Jeder Eintrag verbindet Theme-Datei und Editor:

  • name entspricht dem Dateinamen im Ordner /templates, jeweils ohne die Endung .html.
  • title bezeichnet die Vorlage im WordPress-Editor mit einem verständlichen Namen.
  • postTypes legt fest, für welche Inhaltstypen die Vorlage verfügbar ist. Neben page und post können auch Slugs eigener Post Types eingetragen werden.

postTypes ist optional. WordPress ordnet eine Vorlage standardmässig dem Inhaltstyp page zu.

Layout mit Blöcken aufbauen

Die Template-Datei bestimmt die sichtbare Struktur. Eine reduzierte Vorlage für eine breite Inhaltsfläche kann Header, Hauptinhalt und Footer miteinander verbinden:

<!-- wp:template-part {"slug":"header","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"} /-->

Weitere Vorlagen können dieselben globalen Template Parts verwenden und den Hauptbereich um Spalten, eine Seitenleiste oder projektspezifische Blöcke ergänzen. Farben, Abstände und Typografie entstehen dabei über das Block-Markup und die globalen Theme-Stile.

Vorlage im Editor auswählen

Nach der Registrierung erscheint das Custom Template in den Vorlageneinstellungen der zugeordneten Inhaltstypen. Redakteurinnen und Redakteure wählen dort die Layoutvariante für die jeweilige Seite oder den jeweiligen Beitrag.

Die Auswahl gilt für den einzelnen Inhalt. Das Theme stellt dadurch eine überschaubare Gruppe benannter Layouts bereit, während die redaktionelle Zuordnung direkt im WordPress-Editor erfolgt.

Ergebnis

Layouts direkt am jeweiligen Inhalt auswählen

customTemplates verbindet Layoutdateien im Theme mit einer verständlichen Auswahl im WordPress-Editor. Redaktion und Theme greifen bei unterschiedlichen Seitentypen ineinander.

Vorlagen im Theme ablegen

Jede Layoutvariante liegt als eigenständige HTML-Datei im Ordner /templates.

Inhaltstypen zuordnen

Die Registrierung legt fest, für welche Seiten, Beiträge oder Post Types eine Vorlage bereitsteht.

Layout im Editor wählen

Redakteurinnen und Redakteure wählen die gewünschte Layoutvariante direkt beim jeweiligen Inhalt.