WordPress Templates, Vorlagen & Stile

🗺️ Was sind Templates, Vorlagen und Stile?

Alle Level

📄

Templates (Vorlagen)

Definieren das Layout einer ganzen Seite: Header, Inhalt, Footer. Jede Seitenart hat ein eigenes Template (Startseite, Archiv, 404, etc.).

🧩

Template Parts

Wiederverwendbare Teile eines Templates, z. B. Header und Footer. Ändern Sie den Header-Part einmal — er aktualisiert sich auf allen Seiten.

🎨

Global Styles / Stile

Farben, Schriften, Abstände für die gesamte Website. Verwaltet im Site Editor unter „Stile“ (das Pinsel-Symbol).

🔲

Block Patterns (Muster)

Vorgefertigte Gruppen von Blöcken — z. B. ein „Hero-Bereich“ oder ein „Kontaktformular-Layout“. Per Klick einfügbar.

⚙️

theme.json

Die Konfigurationsdatei des Block-Themes. Definiert Farbpaletten, Schriftgrößen, Layout-Breiten und Block-Standardwerte.

🏠

Block Theme vs. Klassisch

Nur Block-Themes (FSE-Themes) haben einen Site Editor. Klassische Themes arbeiten mit PHP-Templates und dem Customizer.

ℹ️

Voraussetzung: Block-Theme aktiv Unter Design → Themes prüfen, ob ein FSE-Theme (z. B. Twenty Twenty-Four, Kadence, GeneratePress) aktiv ist. Nur dann ist Design → Editor verfügbar.

⚖️

Klassisches Theme vs. Block-Theme

Überblick

Merkmal	Klassisches Theme	Block-Theme (FSE)
Templates bearbeiten	PHP-Dateien (FTP / Code)	✅ Im Browser, kein Code nötig
Header & Footer	Customizer oder Widget-Bereiche	✅ Template Parts im Site Editor
Farben & Schriften	Customizer (begrenzt)	✅ Global Styles, theme.json
Wiederverwendbare Layouts	Shortcodes, Page Builder	✅ Block Patterns (Muster)
Lernkurve Einsteiger	Mittel–hoch	✅ Niedrig (visuell)
Lernkurve für Anpassungen	PHP, CSS erforderlich	Mittlere Kurve (theme.json)
Page Builder nötig?	Oft ja (Elementor, Divi)	✅ Nein, Blöcke reichen

Level 01 · Einsteiger-Admin

🌱

Einsteiger · Schritt 1

Den Site Editor öffnen & verstehen

~15 MinKein Code

Dashboard öffnen

WordPress-Dashboard aufrufen. In der linken Seitenleiste: Design → Editor klicken. Falls der Punkt fehlt → falsches Theme aktiv (kein Block-Theme).

Die drei Bereiche kennenlernen

Linke Seitenleiste: Navigation (Templates, Parts, Stile, Muster) · Mittlere Fläche: visueller Editor · Rechte Seitenleiste: Einstellungen des ausgewählten Blocks oder Templates

Templates-Übersicht aufrufen

Links oben auf das Hamburger-Menü (☰) klicken → Vorlagen wählen. Hier sehen Sie alle verfügbaren Templates: Index, Startseite, Einzelner Beitrag, Seite, Archiv, 404, Suche usw.

Ein Template bearbeiten

Auf ein Template klicken (z. B. „Seite“) → Bleistift-Symbol oben rechts oder direkt auf den Bearbeiten-Button. Jetzt befindet man sich im Template-Editor.

Speichern und zurücksetzen

Nach Änderungen: Speichern (oben rechts). Fehler gemacht? Im Template auf die drei Punkte (⋯) → Template zurücksetzen — setzt auf Theme-Standard zurück.

⚠️

Welches Template wird angezeigt? WordPress wählt das Template nach einer Hierarchie. Eine einzelne Seite verwendet zunächst „Seite“, dann „Einzelne Einträge“, zuletzt „Index“. Spezifischere Templates haben immer Vorrang.

🌳

Einsteiger · Wissen

Die WordPress Template-Hierarchie

WordPress entscheidet automatisch, welches Template für welche Seite verwendet wird. Je spezifischer das Template, desto höher die Priorität:

Spezifisches Seiten-Template

z. B. eine Seite mit ID 42 → Template „page-42“ — höchste Priorität

Template nach Slug

z. B. Seite mit Slug „kontakt“ → Template „page-kontakt“

Allgemeines Seiten-Template

„Seite“ (page) — gilt für alle Seiten ohne spezifisches Template

Einzelner Eintrag (singular)

Gilt für Seiten UND Beiträge, wenn kein spezifischeres Template existiert

Index — niedrigste Priorität

Das Fallback-Template. Wird verwendet, wenn kein spezifischeres Template gefunden wird.

✅

Praktisch: Im Site Editor können Sie unter „Vorlagen → Vorlage hinzufügen“ jederzeit neue Templates für bestimmte Seiten, Kategorien oder Beitragstypen erstellen.

Level 02 · Fortgeschrittener Admin

🧩

Fortgeschritten · Template Parts

Template Parts: Header, Footer & Co. verwalten

~20 MinKein Code

Template Parts sind wiederverwendbare Blöcke, die in mehrere Templates eingebunden werden. Ändern Sie den Header-Part einmal — alle Templates, die ihn verwenden, sind automatisch aktualisiert.

Template Parts aufrufen

Site Editor → Menü (☰) → Vorlagenteile. Die häufigsten: Header, Footer, Comments.

Header bearbeiten

„Header“ Part öffnen → bearbeiten. Navigationsmenü anpassen, Logo einfügen, Suchfeld ergänzen. Einmal ändern, überall wirksam.

Neuen Template Part erstellen

In Vorlagenteile → „Neu anlegen“ → Name vergeben (z. B. „Sidebar-Promo“) → Blöcke einfügen → Speichern. Dann in beliebigen Templates über „Vorlagenteil“ Block einbinden.

Template Part in Template einbinden

Im Template-Editor: Block hinzufügen (+) → „Vorlagenteil“ suchen → gewünschten Part auswählen. Der Block zeigt immer den aktuellen Inhalt des Parts.

💡

Unterschied: Template Part vs. Wiederverwendbarer Block Ein Template Part ist für strukturelle Elemente (Header/Footer). Ein Wiederverwendbarer Block (Sync Pattern) ist für Inhaltsbausteine (z. B. ein CTA-Banner). Beide aktualisieren sich automatisch überall.

🔲

Fortgeschritten · Muster

Block Patterns (Muster) einsetzen & erstellen

~25 Min

Muster verwenden

Beim Hinzufügen eines Blocks (+) → Tab „Muster“ öffnen. Fertige Layouts für Hero, Features, Preise, Testimonials, etc. per Klick einfügen.

Eigenes Muster erstellen

Layout im Editor aufbauen

Mehrere Blöcke zu einem schönen Layout zusammenstellen, z. B. Gruppe → darin Bild + Überschrift + Text + Button.

Gruppe auswählen und als Muster speichern

Den übergeordneten Block (Gruppe) auswählen → Drei-Punkte-Menü (⋯) → „Als Muster/Vorlage erstellen“ → Name vergeben.

Synced oder Unsynced wählen

Synced (synchronisiert): Änderungen wirken sich überall aus. Unsynced: Jede Kopie ist unabhängig — gut für Layouts, die unterschiedliche Inhalte haben.

Muster verwalten

Site Editor → Menü → Muster. Hier alle eigenen Muster einsehen, umbenennen, löschen oder exportieren.

Level 03 · Gestalter-Admin

🎨

Gestalter · Global Styles

Global Styles: Farben, Schriften, Abstände

~30 MinKein Code

Global Styles ist die zentrale Steuerstelle für das visuelle Erscheinungsbild der gesamten Website — erreichbar über das Pinsel-Symbol (🎨) oben rechts im Site Editor.

Die drei Bereiche der Global Styles

🎨

Farben

Eigene Farbpalette definieren (Palette). Hintergrund- und Textfarbe der gesamten Site. Verlaufs-Presets erstellen. Block-spezifische Standardfarben setzen.

🔤

Typografie

Standard-Schriftfamilie, Schriftgrößen-Presets (xs, s, m, l, xl, xxl), Zeilenabstand und Buchstabenabstand global festlegen.

📐

Layout & Abstände

Content-Breite (Standard und Breit), Block-Abstände (Padding, Margin) als Presets, Block-Lücken (Gap) global definieren.

Schritt: Eigene Farbpalette anlegen

Global Styles öffnen

Site Editor → Pinsel-Icon (🎨) → „Farben“ aufklappen → „Palette“

Benutzerdefinierte Farbe hinzufügen

Unter „Benutzerdefiniert“ → (+) → Hex-Wert eingeben → Namen vergeben (z. B. „Markenfarbe Blau“)

Farbe in Blöcken verwenden

Eigene Farben erscheinen überall im Block Editor als Farbauswahl. Konsistentes Branding ohne Hex-Codes auswendig lernen.

⚠️

Achtung: Benutzer-Stile vs. Theme-Stile Änderungen in Global Styles werden als Benutzer-Stile gespeichert und überschreiben das Theme. Bei einem Theme-Update bleiben sie erhalten — aber bei einem Theme-Wechsel gehen sie verloren. Empfehlung: Anpassungen in theme.json eines Child-Themes vornehmen.

⚙️

Gestalter · theme.json

theme.json: Das Herzstück des Block-Themes

FortgeschrittenEtwas Code

Die theme.json ist eine JSON-Konfigurationsdatei im Theme-Ordner. Sie definiert alle Design-Tokens: Farben, Schriften, Abstände, Layout-Breiten und Block-Standardwerte — und macht sie im Site Editor verfügbar.

🔑

Goldene Regel: Niemals die theme.json des Parent-Themes bearbeiten! Immer ein Child-Theme erstellen und dort eine eigene theme.json anlegen. Änderungen im Parent gehen bei jedem Update verloren.

Minimales Child-Theme mit theme.json

Dateistruktur: /wp-content/themes/mein-child-theme/

mein-child-theme/
├── style.css         ← Pflicht: Theme-Infos & CSS
├── theme.json        ← Design-Konfiguration
└── functions.php     ← Optional: PHP-Anpassungen

style.css — Child-Theme Deklaration

/*
 Theme Name:   Mein Child Theme
 Template:     twentytwentyfour
 Version:      1.0.0
*/

theme.json — Vollständiges Beispiel

{
  "version": 2,
  "settings": {

    /* ── Layout-Breiten ── */
    "layout": {
      "contentSize": "720px",   // Standard-Breite
      "wideSize":    "1200px"   // "Breit"-Breite
    },

    /* ── Eigene Farbpalette ── */
    "color": {
      "palette": [
        { "name": "Primär",   "slug": "primary",   "color": "#1d4ed8" },
        { "name": "Sekundär", "slug": "secondary", "color": "#0d9488" },
        { "name": "Akzent",   "slug": "accent",    "color": "#d97706" },
        { "name": "Hell",     "slug": "light",     "color": "#f8fafc" },
        { "name": "Dunkel",   "slug": "dark",      "color": "#0f172a" }
      ]
    },

    /* ── Schriftgrößen-Presets ── */
    "typography": {
      "fontSizes": [
        { "name": "Klein",  "slug": "small",  "size": "0.875rem" },
        { "name": "Mittel", "slug": "medium", "size": "1.125rem" },
        { "name": "Groß",   "slug": "large",  "size": "1.5rem"   },
        { "name": "XL",     "slug": "x-large","size": "2.25rem"  },
        { "name": "XXL",    "slug": "xx-large","size": "3rem"     }
      ]
    },

    /* ── Abstands-Presets ── */
    "spacing": {
      "spacingSizes": [
        { "name": "XS",  "slug": "20", "size": "0.5rem"  },
        { "name": "S",   "slug": "30", "size": "1rem"    },
        { "name": "M",   "slug": "40", "size": "1.5rem"  },
        { "name": "L",   "slug": "50", "size": "2.5rem"  },
        { "name": "XL",  "slug": "60", "size": "4rem"    }
      ]
    }
  },

  /* ── Block-Standardwerte ── */
  "styles": {
    "typography": {
      "fontFamily": "'DM Sans', sans-serif",
      "fontSize":   "1rem",
      "lineHeight": "1.7"
    },
    "color": {
      "background": "#ffffff",
      "text":       "#1e293b"
    }
  }
}

✅

Tipp: Nach dem Anlegen der theme.json erscheinen die definierten Farben, Schriftgrößen und Abstände automatisch im Block Editor — ohne CSS schreiben zu müssen. CSS-Custom-Properties werden automatisch generiert: var(--wp--preset--color--primary).

✨

Gestalter · Stilvariationen

Stilvariationen erstellen & nutzen

theme.json

Stilvariationen (Style Variations) sind alternative Design-Presets für ein Theme — z. B. ein „Dunkel-Modus“ oder eine „Sommeredition“. Im Site Editor unter Stile → Variationen wählbar.

Variations-Ordner erstellen

Im Child-Theme-Ordner: /styles/ Ordner anlegen.

Variation als JSON anlegen

Datei /styles/dunkel.json erstellen. Enthält nur die überschriebenen Werte — alle anderen Werte kommen aus der Haupt-theme.json.

Variation im Site Editor aktivieren

Site Editor → 🎨 → „Variationen durchsuchen“ → eigene Variation auswählen → Speichern.

/styles/dunkel.json — Dark Mode Variation

{
  "version": 2,
  "title": "Dunkel",
  "styles": {
    "color": {
      "background": "#0f172a",
      "text":       "#e2e8f0"
    }
  }
}

WP Meetup · Workshop-Agenda

Workshop-Agenda: WordPress Templates & Stile

Alle Level

🎯 Block 1: Einstieg

Grundlagen & Orientierung

Vorstellung: Wer ist dabei, welches Level?

Live-Demo: Site Editor Überblick

Templates vs. Klassisch: Was ist neu?

Übung: Site Editor erkunden, erstes Template öffnen

Q&A Runde

🧩 Block 2: Template Parts & Muster

Wiederverwendbare Bausteine

Template Hierarchie erklärt (5 Min)

Demo: Header-Part bearbeiten

Hands-on: Eigenes Muster erstellen

Synced vs. Unsynced Patterns

Pattern-Bibliothek erkunden

☕ Pause + Networking

Austausch & Fragen

Kaffee & Getränke

Informeller Austausch

Individuelle Fragen an die Referenten

🎨 Block 3: Global Styles & theme.json

Design-System aufbauen

Live-Demo: Farbpalette in Global Styles

Child-Theme erstellen (Live-Coding)

theme.json: Farben, Fonts, Spacing

Hands-on: Eigene theme.json schreiben

Style Variations: Dunkel-Modus Demo

Übungen für Teilnehmende

🌱

Einsteiger-Übung

Öffnet den Site Editor eurer lokalen WordPress-Instanz. Ändert das „Index“-Template: fügt eine farbige Trennlinie zwischen Header und Inhalt ein. Speichert und betrachtet das Ergebnis im Frontend.

🔧

Fortgeschritten-Übung

Erstellt einen eigenen „Promo-Banner“ als Synced Pattern (Gruppe mit Hintergrundfarbe, Icon, Text und Button). Bindet ihn in zwei verschiedene Templates ein und ändert den Text — prüft, ob er sich überall aktualisiert.

🎨

Gestalter-Übung

Legt ein Child-Theme mit theme.json an. Definiert: 3 Markenfarben, 2 Schriftgrößen (large, x-large), wideSize 1200px. Erstellt eine Style-Variation „Rose Mode“ mit alternativer Primärfarbe.

Glossar

📖

Referenz

Wichtige Begriffe im Überblick

Full Site Editing (FSE)

Bezeichnung für das Konzept, die gesamte Website (inkl. Header, Footer, Archivseiten) visuell im Block Editor zu bearbeiten.

Site Editor

Das WordPress-Interface für FSE. Erreichbar unter Design → Editor. Enthält Templates, Parts, Styles und Patterns.

Template (Vorlage)

HTML/Block-Struktur für eine bestimmte Seitenart. Definiert das Gesamtlayout: Was steht wo auf der Seite?

Template Part (Vorlagenteil)

Wiederverwendbarer Template-Abschnitt. Typisch: Header und Footer. Einmal ändern → überall aktuell.

Block Pattern (Muster)

Vorgefertigtes Block-Layout, das per Klick eingefügt wird. Kann synced (geteilt) oder unsynced (unabhängig) sein.

Global Styles

Zentrale Stileinstellungen der gesamten Website: Farben, Schriften, Abstände. Pinsel-Icon im Site Editor.

theme.json

JSON-Konfigurationsdatei im Theme-Ordner. Definiert Design-Tokens, die im Site Editor als Presets erscheinen.

Style Variation

Alternative Design-Variante eines Themes (z. B. Dunkel-Modus). Als JSON-Datei im /styles/-Ordner des Themes.

Child-Theme

Ein Theme, das ein Parent-Theme erbt. Eigene Anpassungen (CSS, theme.json, PHP) bleiben bei Parent-Updates erhalten.

Query Loop Block

Block zum dynamischen Laden und Anzeigen von Beiträgen. Basis für Blog-Übersichten, Archive, Grid-Layouts.

Block Bindings

Ab WP 6.5: Blöcke können dynamisch mit Daten verknüpft werden (Custom Fields, Post Meta) — ohne PHP.

CSS Custom Properties

WordPress generiert automatisch CSS-Variablen aus theme.json: var(--wp--preset--color--primary) usw.

Interaktive Checkliste

✅

Lernfortschritt

Was habe ich bereits gemeistert?

Lernfortschritt0 / 12

Site Editor gefunden und geöffnet
Templates-Übersicht durchgeschaut
Erstes Template bearbeitet und gespeichert
Template-Hierarchie verstanden
Header-Part bearbeitet
Eigenen Template Part erstellt
Ein Block Pattern eingefügt (aus der Bibliothek)
Eigenes Muster erstellt und gespeichert
Farbpalette in Global Styles angepasst
Child-Theme angelegt
theme.json mit eigenen Farben & Schriftgrößen erstellt
Style Variation (z. B. Dunkel-Modus) erstellt

🔗

Ressourcen

Weiterführende Links

📚

WordPress Dokumentation

Site Editor Guide
theme.json Referenz
Block Patterns API

🎓

Lernplattformen

learn.wordpress.org
fullsiteediting.com
Pattern-Bibliothek

🇩🇪

Deutsche Community

de.wordpress.org
WP Meetups weltweit
WordPress.tv Vorträge

Keine Vektordaten für diesen Beitrag oder keine Beiträge vektorisiert.

Clipperton

WordPress

🗺️ Was sind Templates, Vorlagen und Stile?

Klassisches Theme vs. Block-Theme

Level 01 · Einsteiger-Admin

Level 02 · Fortgeschrittener Admin

Muster verwenden

Eigenes Muster erstellen

Level 03 · Gestalter-Admin

Die drei Bereiche der Global Styles

Schritt: Eigene Farbpalette anlegen

Minimales Child-Theme mit theme.json

Gestalter · Stilvariationen

WP Meetup · Workshop-Agenda

🎯 Block 1: Einstieg

🧩 Block 2: Template Parts & Muster

☕ Pause + Networking

🎨 Block 3: Global Styles & theme.json

Übungen für Teilnehmende

Wichtige Begriffe im Überblick

Lernfortschritt

Ressourcen

How can we help?