Arbeiten mit Eigenschaften und Schlüssel-Wert-Paaren in theme.json

Das Verständnis für die Struktur und die Eigenschaften der theme.json Datei zu verstehen, ist grundlegend für die Entwicklung von Blockthemes. Diese Datei dient als zentraler Konfigurationspunkt für alle blockbasierten Themes.

Ganz gleich, ob du ein Theme von Grund auf neu erstellst, ein bestehendes Theme anpasst, eine Style-Variation entwickelst oder an einem Child-Theme arbeitest, es ist wichtig zu wissen, wie man mit theme.json arbeitet.

Glücklicherweise ist JSON (JavaScript Object Notation) ein für Menschen lesbares Format mit einer hierarchischen Struktur, die Informationen von allgemeinen zu spezifischen Eigenschaften ordnet. Im Zusammenhang mit theme.json ist die Vertrautheit mit Cascading Style Sheets (CSS) wichtiger als tiefgreifende Kenntnisse in JavaScript.

In diesem Artikel sollen die primären und sekundären (verschachtelten) Eigenschaften einer theme.json Datei aufgeschlüsselt werden, wobei der Schwerpunkt auf den wichtigsten Einstellungen und Stileigenschaften liegt. Dies sind die Kernelemente der Datei, für die wir ausführliche Erklärungen und Codebeispiele liefern.

Wir bauen auf dem Fundament auf, das wir in unserem vorherigen Artikel gelegt haben, Entfessle die Macht der theme.json: Dein WordPress-Theme wie ein Profi anpassen, insbesondere in dem Abschnitt Arbeiten mit den Eigenschaften der theme.json-Datei.

Wie Stile in einem Block-Theme gerendert werden

WordPress verwendet einen eingebauten kaskadierenden Prozess, um Stile für eine Website darzustellen. Wenn mehrere Quellen dieselbe Einstellung oder denselben Stil definieren, muss WordPress entscheiden, welche davon Vorrang hat. Im Folgenden ist die Rangfolge aufgeführt, nach der WordPress entscheidet, welche Stile angewendet werden:

1. WordPress-Kern – Die Fallback-Datei theme.json befindet sich im Verzeichnis wp-includes. Diese Datei wird bei größeren WordPress-Versionen aktualisiert und sollte nicht bearbeitet werden.
2. Theme – Die primäre theme.json Datei, die von Theme-Entwicklern verwendet wird, um die Einstellungen, Styles und andere Eigenschaften des Themes zu definieren.
3. Style-Variationen – Wenn ein Theme Style-Variationen enthält, hat jede ihre eigene theme.json Datei, die im Unterverzeichnis styles des Themes gespeichert ist.
4. Child-Theme – Wie bei klassischen Themes kann ein Child-Theme ein Parent-Theme modifizieren, ohne dessen Dateien zu verändern (optional).
5. Stilvariationen des Child-Themes – Ähnlich wie bei den regulären Stilvariationen kann ein Child-Theme seine eigene theme.json Datei in seinem styles-Unterverzeichnis haben (optional).
6. Benutzerdefinierte Stile – Dies sind benutzerdefinierte Stile, die mit WordPress-Editoren (für Seiten, Beiträge oder die gesamte Website) hinzugefügt und in der Datenbank gespeichert werden.

Die kaskadierende Reihenfolge stellt sicher, dass Stile aus Quellen mit höherer Priorität Vorrang vor denen aus Quellen mit niedrigerer Priorität haben. So haben z. B. die Einstellungen in der Datei des Themes theme.json Vorrang vor den Einstellungen des WordPress-Kerns theme.json. Ebenso hat die Style-Variation eines Child-Themes Vorrang vor der Style-Variation des Parent-Themes.

Vom Benutzer erstellte Stile (6) haben die höchste Priorität und setzen alle anderen Stile in der Kaskade außer Kraft.

In diesem Artikel konzentrieren wir uns auf die Datei theme.json, die sich im Stammverzeichnis eines jeden WordPress-Block-Themes befindet.

Eine Referenz für primäre Eigenschaften und ihre Schlüsselwerte

Schauen wir uns die sieben Top-Level-Objekte in theme.json an, die wir in drei Abschnitte unterteilt haben, um die Informationen leichter zu verstehen.

Ein paar Definitionen, bevor wir eintauchen

Wenn du mit theme.json arbeitest, wirst du wahrscheinlich verschiedene Definitionen für wichtige Komponenten finden. Der Klarheit halber definieren wir sie in diesem Artikel folgendermaßen:

1. Abschnitte – Gruppierungen von Top-Level-Optionen (in einigen Artikeln auch als „Top-Level-Objekte“ bezeichnet).
2. Objekte – Die Hauptelemente in der Datei theme.json, z. B. settings und styles.
3. Eigenschaften – Die Komponenten innerhalb der Objekte. Das Objekt settings enthält zum Beispiel 12 verschiedene Eigenschaften.
4. Schlüssel-Werte-Paare – Eigenschaften bestehen aus Schlüssel-Werte-Paaren. Ein „Schlüssel“ steht für ein Eigenschaftsattribut und wird in Anführungszeichen gesetzt. Ein „Wert“ kann ein Boolescher Wert, ein String oder ein Array sein.

Wenn wir von „standardmäßig“ sprechen, beziehen wir uns auf die Standardkonfigurationen in der Kerndatei theme.json, die sich unter wp-includes/theme.json befindet.

Mit „Benutzer“ sind alle Personen gemeint, die den WordPress-Admin benutzen und die Einstellungen in den Website-, Seiten- oder Beitragseditoren ändern können.

Überblick über die Syntax

1. Boolesche Werte werden nicht in Anführungszeichen gesetzt.
2. Zeichenketten werden in Anführungszeichen eingeschlossen.
3. Arrays werden in eckige Klammern [] eingeschlossen.
4. Objekte werden in geschweifte Klammern {} eingeschlossen, die mehrere Eigenschaften oder verschachtelte Objekte enthalten.
5. Kommas werden verwendet, um mehrere Schlüssel-Wert-Paare innerhalb eines Objekts zu trennen.

Hier ist ein Beispiel für eine typische Syntax:

{
    "house": {
        "rooms": "kitchen"
    }
}

Gruppierung der Eigenschaften

Wir haben die Eigenschaften in drei Abschnitte unterteilt, um die Navigation zu erleichtern:

1. Grundlegende Eigenschaften
2. Einstellungen und Stileigenschaften
3. Eigenschaften von Vorlagen und Mustern

Um die Beispiele zu vereinfachen, haben wir manchmal die äußeren Objektumhüllungen weggelassen. Anstatt die gesamte Struktur zu zeigen:

{
    "settings": {
        "appearanceTools": false,
        "background": {
            "backgroundImage": true
        }
    }
}

Wir könnten sie abkürzen zu:

"appearanceTools": false,
"background": {
    "backgroundImage": true
}

Grundlegende Eigenschaften

Am Anfang einer theme.json Datei findest du normalerweise zwei Schlüsseleigenschaften: $schema und version. Diese Eigenschaften stehen normalerweise am Anfang der Datei. Die aktuelle Schema-Version ist 3 und wurde mit WordPress 6.6 eingeführt.

"$schema": "https://schemas.wp.org/wp/6.6/theme.json", "version": 3

Einstellungen und Stileigenschaften

Wenn du mit klassischen Themes vertraut bist, kannst du dir vorstellen, dass es sich bei den Einstellungseigenschaften um Eigenschaften und Funktionen handelt, die normalerweise in der functions.php Datei festgelegt werden und im Abschnitt Erscheinungsbild > Benutzerdefiniert im WordPress-Admin zu finden sind.

Styles hingegen ähneln den CSS-Eigenschaften, die früher in der Datei styles.css zu finden waren und das Layout und Design des Themes steuern.

Einstellungen

Mit Ausnahme der Eigenschaften block und elements sind alle anderen Einstellungen global. Da es sich bei vielen dieser Einstellungen um Boolesche Werte handelt, fungieren sie als Umschalter, um eine Funktion der Benutzeroberfläche zu aktivieren oder zu deaktivieren.

Es ist wichtig zu wissen, dass nicht alle Tasten in jedem Kontext anwendbar sind. Es ist zum Beispiel nicht möglich, eine Mindesthöhe für einen Absatzblock festzulegen.

Werkzeuge für das Erscheinungsbild

Diese Einstellungen können gemeinsam oder einzeln über "appearanceTools": true aktiviert werden.

Wenn du diese Funktion aktivierst, werden verschiedene UI-Optionen im WordPress-Editor sichtbar, was Entwicklern Zeit spart. In der Standardeinstellung sind diese Werkzeuge deaktiviert ("appearanceTools": false).

Zu den Funktionen von appearanceTools gehören:

• background
  • backgroundImage – Ermöglicht es dem Nutzer, Blöcken ein Hintergrundbild hinzuzufügen.
  • backgroundSize – Legt fest, wie das Hintergrundbild skaliert wird (abdecken, einschließen, etc.).
• border
  • color – Ermöglicht die Farbauswahl für Ränder.
  • style – Ermöglicht die Auswahl des Rahmenstils (durchgezogen, gestrichelt, gepunktet usw.).
  • width – Steuert die Dicke des Rahmens.
  • radius – Ermöglicht es den Nutzern, abgerundete Ecken einzustellen, indem sie den Radius des Rahmens anpassen.
• color
  • link – Ermöglicht das Festlegen einer Farbe für Links innerhalb des Inhalts.
  • heading – Ermöglicht die Festlegung von Farben für Überschriften (<h1>, <h2>, etc.).
  • button – Steuert die Farbe der Schaltflächen im Theme.
  • caption – Ermöglicht das Festlegen einer eigenen Farbe für Überschriften.
• dimensions
  • aspectRatio – Ermöglicht die Einstellung des Verhältnisses von Breite zu Höhe der Blöcke.
  • minHeight – Ermöglicht das Festlegen einer Mindesthöhe für Blöcke.
• position
  • sticky – Ermöglicht es dem Nutzer, einen Block „klebrig“ zu machen, d.h. er bleibt beim Scrollen an seinem Platz.
• spacing
  • blockGap – Steuert den Abstand zwischen den Blöcken.
  • margin – Ermöglicht es den Nutzern, die Ränder um einen Block anzupassen.
  • padding – Steuert die Auffüllung innerhalb eines Blocks, d. h. den Abstand zwischen dem Inhalt und dem Rand.
• typography
  • lineHeight – Ermöglicht es den Nutzern, die Zeilenhöhe (Abstand zwischen den Textzeilen) für eine bessere Lesbarkeit anzupassen.

Beispiel: Wenn du möchtest, dass Benutzer ein Hintergrundbild hinzufügen, während andere Werkzeuge für das Erscheinungsbild deaktiviert bleiben, verwende diese Option:

"appearanceTools": false,
"background": {
    "backgroundImage": true
}

Blöcke

Mit der Eigenschaft blocks können die Nutzer/innen Einstellungen pro Block aktivieren, die die globalen Einstellungen außer Kraft setzen können.

Beispiel: Wenn appearanceTools auf false gesetzt ist, du aber trotzdem Rahmensteuerungen für einen Block freigeben möchtest, verwende:

"border": {
    "color": true,
    "style": true,
    "width": true,
    "radius": true
}

Farbe

Mit dieser Eigenschaft kannst du Farboptionen wie Hintergrundfarbe, Textfarbe oder Farbverläufe festlegen.

Schlüssel innerhalb der Eigenschaft color:

• background – Steuert die Hintergrundfarbe von Blöcken oder Elementen.
• custom – Aktiviert oder deaktiviert die Möglichkeit, benutzerdefinierte Farben auszuwählen.
• customDuotone – Ermöglicht es den Nutzern, benutzerdefinierte Duotone-Filter auf Bilder anzuwenden.
• customGradient – Ermöglicht benutzerdefinierte Optionen für Farbverläufe.
• defaultDuotone – Bietet Standardoptionen für Duotone-Bildfilter.
• defaultGradient – Legt die Standardoptionen für Farbverläufe fest, die den Nutzern zur Verfügung stehen.
• defaultPalette – Steuert die Standardfarbpalette für das Theme.
• duotone – Erlaubt Duoton-Filter für Bilder.
• gradient – Aktiviert Farbverlaufsoptionen für Hintergründe oder andere Elemente.
• link – Legt die Farbe für Links im Theme fest.
• text – Steuert die Optionen für Textfarben.
• heading – Legt die Farben für Überschriften fest (z.B. h1, h2, etc.).
• button – Steuert die Farboptionen für Schaltflächen.
• caption – Legt die Farbe der Beschriftung für Medienelemente fest.

Schauen wir uns einige Beispiele an:

Beispiel 1: Wenn du die Farbauswahl für Benutzer deaktivieren möchtest, kannst du Folgendes verwenden:

"color": {
    "custom": false
}

Beispiel 2: Um benutzerdefinierte primäre und sekundäre Themefarben festzulegen, kannst du diese Konfiguration verwenden:

"color": {
   "palette": [
       { "slug": "primary", "color": "#0000ff", "name": "Primary" },
       { "slug": "secondary", "color": "#ff0000", "name": "Secondary" }
   ]
}

Abmessungen

Diese Eigenschaft bietet Optionen zur Steuerung der Blockabmessungen, wie Breite, Höhe und Seitenverhältnis.

Schlüssel innerhalb der Eigenschaft dimensions:

• aspectRatio – Ermöglicht es den Nutzern, das Seitenverhältnis eines Blocks festzulegen oder zu sperren (z. B. 16:9, 4:3).
• defaultAspectRatios – Legt Standard-Seitenverhältnisse für Blöcke fest.
• minHeight – Ermöglicht es, eine Mindesthöhe für Blöcke festzulegen.

Wenn du z. B. eine Mindesthöhe für unterstützte Blöcke festlegen möchtest, verwende Folgendes:

"dimensions": {
    "minHeight": true
}

Layout

Mit der Eigenschaft layout können die Nutzer/innen layoutbezogene Optionen festlegen, wie z. B. die Breite des Inhalts und ob sie das Layout anpassen können. Mit diesen Schlüsseln können die Nutzer/innen Layout-Optionen festlegen:

• contentSize – Legt die Standardbreite der Blöcke fest .
• wideSize – Legt die Breite der Blöcke fest , wenn die Option „Breite Ausrichtung“ ausgewählt ist.
• allowEditing – Legt fest, ob die Benutzer Layout-Optionen bearbeiten können.
• allowCustomContentAndWideSize – Ermöglicht die Anpassung von contentSize und wideSize.

Beispiel: Konfiguriere die Layout-Einstellungen mit Standard- und breiten Blockbreiten:

"layout": {
    "contentSize": "620px",
    "wideSize": "1000px"
}

Lightbox

Mit der Eigenschaft lightbox kannst du die Funktion „Beim Anklicken erweitern“ für Bilder aktivieren, sodass sie sich beim Anklicken in einer größeren Ansicht öffnen.

Schlüssel innerhalb der Eigenschaft lightbox:

• enabled – Aktiviert oder deaktiviert die Funktion Lightbox.
• allowEditing – Ermöglicht es den Nutzern, die Lightbox-Einstellung umzuschalten.

Beispiel: Mit dieser Konfiguration kannst du die Lightbox-Funktion für Bilder ein- und ausschalten:

"blocks": {
    "core/image": {
        "lightbox": {
            "allowEditing": true
        }
    }
}

Position

Mit der Eigenschaft position kannst du die Position von Blöcken steuern, z. B. um einen Block auf der Seite zu fixieren.

Beispiel: Einen Block „sticky“ machen:

"position": {
    "sticky": true
}

Schatten

Mit dieser Eigenschaft kannst du Schatteneffekte auf Blöcke anwenden, entweder mit vordefinierten Voreinstellungen oder mit benutzerdefinierten Schatten.

Schlüssel innerhalb der Eigenschaft shadow:

• defaultPresets – Aktiviert oder deaktiviert die Standard-Schattenvorgaben.
• presets – Ermöglicht es den Nutzern, eigene Schattenvorgaben zu definieren.

Hier ein Beispiel, bei dem die Standardschatten deaktiviert sind und ein benutzerdefinierter Schatten mit dem Namen „Natürlich“ definiert ist:

"shadow": {
    "defaultPresets": false,
    "presets": [
        { "name": "Natural", "slug": "natural", "shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)" }
    ]
}

Die Zahlen zeigen die Klickschritte im Seiteneditor, um die Benutzeroberfläche zu demonstrieren. Der letzte Schritt zeigt den „natürlichen“ Schatten.

Abstände

Diese Eigenschaft legt fest, wie die Abstände (Padding, Margin, Gap) im Editor gesteuert werden.

Tasten innerhalb der Eigenschaft spacing:

• blockGap – Steuert den Abstand zwischen Blöcken.
• margin – Ermöglicht das Festlegen von Rändern um Blöcke.
• padding – Bietet Optionen zum Festlegen von Abständen innerhalb von Blöcken.
• units – Legt die verfügbaren Einheiten für Abstände fest (z. B. px, rem).
• customSpacingSize – Ermöglicht es den Nutzern, benutzerdefinierte Abstände festzulegen.
• spacingSizes – Legt eine Reihe von voreingestellten Abstandsgrößen fest .
• spacingScale – Ermöglicht die Skalierung der Abstandseinheiten.

Beispiel: Um die Benutzer/innen auf zwei Maßeinheiten (Pixel und rem) für Auffüllungen, Ränder, Breiten und Höhen zu beschränken und die Abstandskontrollen im Site-Editor freizugeben, setze appearanceTools auf true und konfiguriere wie folgt:

"spacing": {
    "units": ["px", "rem"]
}

Typografie

Diese Eigenschaft steuert die textbezogenen Einstellungen deines Themas, z. B. Schriftgröße, -stärke und Zeilenhöhe.

Schlüssel innerhalb der Eigenschaft typography:

• defaultFontSizes – Legt die Standardschriftgrößen fest , die den Nutzern zur Verfügung stehen.
• customFontSize – Aktiviert oder deaktiviert die Möglichkeit, eigene Schriftgrößen festzulegen.
• fontStyle – Steuert den Stil der Schrift (z. B. normal, kursiv).
• fontWeight – Ermöglicht es den Nutzern, die Stärke der Schrift einzustellen (z. B. fett, leicht).
• fluid – Ermöglicht eine fließende Typografie, die die Schriftgröße dynamisch an die Bildschirmgröße anpasst.
• letterSpacing – Steuert den Abstand zwischen den Buchstaben.
• lineHeight – Legt die Höhe der einzelnen Textzeilen fest .
• textAlign – Ermöglicht die Steuerung der Textausrichtung (z. B. links, mittig, rechts).
• textDecoration – Bietet Optionen für die Textdekoration (z. B. Unterstreichen).
• writingMode – Legt den Schreibmodus für den Text fest (z. B. horizontal oder vertikal).

Beispiel: Um sowohl die benutzerdefinierten Schriftgrößen als auch die ropCap-Optionen zu deaktivieren, verwende Folgendes:

"typography": {
    "customFontSize": false,
    "dropCap": false
}

In diesem Fall werden die beiden hervorgehobenen Tasten im Editor nicht angezeigt.

Roots-Padding bewusste Ausrichtungen

Wenn diese Eigenschaft auf true gesetzt ist, stellt sie sicher, dass die Ausrichtung von breiten oder breiten Blöcken die Auffüllung des Roots-Elements der Seite (z. B. <html> oder <body>) berücksichtigt, um eine korrekte Ausrichtung zu gewährleisten, auch wenn die Auffüllung angewendet wird.

Beispiel:

"useRootPaddingAwareAlignments": true

Wenn sie auf true gesetzt ist, musst du auch die Werte für die obere, rechte, untere und linke Auffüllung des Roots als Stil definieren. (Mehr über Stileigenschaften weiter unten).

"spacing": {
    "padding": {
        "top": "0",
        "right": "100px",
        "bottom": "0",
        "left": "100px"
    }
}

Wenn du die Einstellung useRootPaddingAwareAlignements zusammen mit dem rechten und linken Padding auf den Body anwendest (wie im obigen Code), ergibt sich folgendes Bild.

Formatvorlagen

Mit der Eigenschaft styles kannst du CSS-Stile auf den Stamm (Standard), bestimmte Elemente oder einzelne Blöcke in deinem Theme anwenden.

Hintergrundstile

Du kannst die Eigenschaften des Hintergrunds steuern, z. B. Bilder, Positionierung und Anhänge.

Allgemeine Schlüssel für den Hintergrund:

• backgroundImage – Legt das Hintergrundbild für den Block oder das Element fest .
• backgroundPosition – Legt die Position des Hintergrundbildes fest (z. B. Mitte, oben rechts).
• backgroundRepeat – Legt fest, ob das Hintergrundbild wiederholt wird (z. B. wiederholen, nicht wiederholen).
• backgroundSize – Legt die Größe des Hintergrundbildes fest (z. B. cover, contain).
• backgroundAttachment – Legt fest , ob das Hintergrundbild fixiert ist oder mit der Seite scrollt.

Du kannst zum Beispiel ein Hintergrundbild für dein Theme festlegen:

"background": {
   "backgroundImage": {
       "url": "https://joyofwp.com/wp-content/uploads/2024/09/dots.png"
   }
}

Spezifische Stile blockieren

Du kannst bestimmte Stile, wie Schatten, Typografie und Rahmen, auf einzelne Blöcke anwenden.

Tasten für Rahmen:

• color – Legt die Farbe des Rahmens fest .
• radius – Legt den Rahmenradius für abgerundete Ecken fest .
• style – Legt den Stil des Rahmens fest (z. B. durchgezogen, gepunktet).
• width – Legt die Breite des Rahmens fest .
• top, right,  bottom, left – Ermöglicht es dir, für jede Seite einen eigenen Rahmenstil festzulegen.

Im Folgenden wird zum Beispiel ein durchgehender roter Rahmen von 20 Pixel um die gesamte Seite herum festgelegt:

"border": {
   "color": "#ff0000",
   "width": "20px",
   "style": "solid"
}

Du kannst auch benutzerdefinierte CSS für einen bestimmten Block, ein Element oder den Stamm zuweisen.
Der folgende Code wendet zum Beispiel eine rote Textfarbe auf einen Tabellenblock an:

"border": {
   "color": "#ff0000",
   "width": "20px",
   "style": "solid"
}

Farbstile

Mit der Eigenschaft Farbe kannst du die Einstellungen für Hintergrund-, Farbverlaufs- und Textfarben festlegen.
Schlüssel für color:

• background – Legt die Hintergrundfarbe des Blocks oder Elements fest.
• gradient – Legt einen Hintergrundfarbverlauf für den Block fest.
• text – Steuert die Farbe des Textes.

Im folgenden Beispiel wird für jedes Element auf jeder Seite ein schwarzer Hintergrund mit weißem Text festgelegt:

"color": {
   "background": "#000000",
   "text": "#ffffff"
}

CSS

Mit der Eigenschaft css kannst du benutzerdefinierte Stile an bestimmte Klassen anhängen und so eine genauere Kontrolle über die Stile des Themes erhalten.

Beispiel: Wende benutzerdefinierte Stile auf wp-block-template-parts und wp-block-button an und füge einen Hover-Effekt für die Schaltfläche hinzu:

"css": ".wp-block-template-part { background-color: #777777; padding: 20px; } .wp-block-button__link:hover { background-color: #ffffff; color: #000000; }"

Wie du siehst, haben die Kopf- und Fußzeilenvorlagen die Stile background-color und padding, während der Hover-Status für die Schaltfläche einen weißen Hintergrund mit schwarzem Text hat.

Abmessungen

Mit der Eigenschaft dimensions kannst du die Breite, Höhe und das Seitenverhältnis von Blöcken festlegen.

Schlüssel für die Abmessungen:

• aspectRatios – Legt benutzerdefinierte Seitenverhältnisse für Elemente fest.
• minHeight – Legt die Mindesthöhe für Blöcke fest.

Beispiel: Erstelle ein benutzerdefiniertes Seitenverhältnis von 3:7 für einen Bildblock:

"blocks": {
   "core/image": {
       "dimensions": {
           "aspectRatio": "custom"
       }
   }
}

Das allein reicht jedoch nicht aus. Du musst den „benutzerdefinierten“ Stil in den Einstellungen registrieren.

"dimensions": {
   "defaultAspectRatios": true,
   "aspectRatios": [
       {
           "name": "Custom Ratio 3:7",
           "slug": "custom",
           "ratio": "3/7"
       }
   ]
}

Hier kannst du sehen, dass die Option „Benutzerdefiniertes Verhältnis“ hinzugefügt worden ist. Wenn du die sieben voreingestellten Seitenverhältnisse entfernen möchtest, entferne "defaultAspectRatios":true aus dem Einstellungsbereich.

Elementspezifische Stile

Mit der Eigenschaft elements kannst du Stile auf bestimmte HTML-Elemente wie Links, Schaltflächen oder Überschriften anwenden.

Der folgende Code schaltet zum Beispiel die Textverzierung (Unterstreichung) für alle Links aus:

"elements": {
   "link": {
       "typography": {
           "textDecoration": "none"
       }
   }
}

Filter

Mit der Eigenschaft filter kannst du CSS-ähnliche Filtereffekte (z. B. Unschärfe, Helligkeit) auf bestimmte Blöcke wie Bilder anwenden.

Beispiel: Einen Weichzeichner- und Helligkeitsfilter auf einen Bildblock anwenden:

"blocks": {
   "core/image": {
       "filter": {
           "duotone": "blur(5px) brightness(0.8)"
       }
   }
}

Hier wurden Unschärfe- und Helligkeitseffekte auf den Bildblock angewendet. Andere verfügbare Filterwerte sind:

• contrast – Passt den Kontrast des Elements an.
• grayscale – Wandelt das Element in Graustufen um.
• invert – Invertiert die Farben des Elements.
• opacity – Steuert die Transparenz des Elements.
• saturate – Erhöht oder verringert die Sättigung der Farben.
• sepia – Wendet einen Sepiaton auf das Element an.

Umriss

Die Eigenschaft outline legt Stile für Umrisse fest, die außerhalb des Elementrahmens gezeichnet werden, ohne den Layoutbereich zu beeinflussen.

Schlüssel für Umrisse:

• color – Legt die Farbe des Umrisses fest .
• offset – Bestimmt den Abstand zwischen dem Rahmen und dem Umriss.
• style – Legt den Stil des Umrisses fest (z. B. gepunktet, durchgezogen).
• width – Legt die Breite des Umrisses fest .

Beispiel: Einen roten gepunkteten Umriss auf eine Schaltfläche anwenden:

"elements": {
   "button": {
       "outline": {
           "color": "#ff0000",
           "style": "dotted",
           "width": "4px"
       }
   }
}

Schattenstile

Mit der Eigenschaft shadow kannst du Blöcken einen Kastenschatten zuweisen, der den Elementen Tiefe und Betonung verleiht.

Beispiel: Einen Schatten auf alle Bilder anwenden:

"blocks": {
   "core/image": {
       "shadow": "0 10px 20px 0 rgb(0 0 225 / 0.50)"
   }
}

Abstandsstile

Die Eigenschaft spacing verwaltet die Stile für Auffüllungen, Ränder und Blockabstände für dein Theme.

Tasten für Abstände:

• blockGap – Steuert den Abstand zwischen Blöcken.
• margin – Legt die Ränder um die Blöcke fest .
• padding – Steuert die Auffüllung innerhalb der Blöcke.

In diesem Beispiel unten wird der Abstand zwischen den Blöcken auf der linken und rechten Seite festgelegt:

"spacing": {
   "padding": {
       "left": "min(6.5rem, 8vw)",
       "right": "min(6.5rem, 8vw)"
   }
}

Typografische Stile

Die Eigenschaft typography verwaltet Schriftstile, -größen und andere textbezogene Einstellungen.

Übliche Schlüssel für Typografie:

• fontFamily – Legt die Schriftfamilie für den Text fest .
• fontSize – Legt die Schriftgröße fest .
• fontStyle – Legt den Schriftstil fest (z. B. kursiv, normal).
• fontWeight – Legt die Stärke (Dicke) der Schrift fest .
• letterSpacing – Passt die Abstände zwischen den Buchstaben an.
• lineHeight – Legt die Zeilenhöhe (Abstand zwischen den Textzeilen) fest .
• textAlign – Legt die Textausrichtung fest (z. B. links, mittig, rechts).
• textColumns – Legt die Anzahl der Textspalten fest .
• textDecoration – Legt die Textverzierung fest (z. B. Unterstreichen).
• writingMode – Legt den Schreibmodus fest (z. B. horizontal, vertikal).
• textTransform – Steuert die Umwandlung von Text (z. B. Großbuchstaben, Kleinbuchstaben).

Du kannst zum Beispiel für alle Überschriften eine Schriftstärke von 300 und einen kursiven Stil festlegen:

"blocks": {
   "core/heading": {
       "typography": {
           "fontWeight": "300",
           "fontStyle": "italic"
       }
   }
}

Eigenschaften von Vorlagen und Mustern

Diese drei Eigenschaften auf oberster Ebene werden verwendet, um benutzerdefinierte Elemente in deinem Theme zu registrieren.

1. Benutzerdefinierte Vorlagen

Die Eigenschaft templates wird verwendet, um benutzerdefinierte Vorlagen für verschiedene Beitragstypen zu registrieren.

• name – Der Name der Datei .html oder .php, die sich im Unterverzeichnis templates befindet.
• title – Der Titel, der der Vorlage zur leichteren Identifizierung zugewiesen wird.
• postTypes – Gibt die Art des Inhalts (z. B. Beiträge, Seiten) an, für den die Vorlage verwendet wird.

2. Vorlagenteile

Die Eigenschaft templateParts wird verwendet, um wiederverwendbare Teile von Vorlagen zu definieren (z. B. Kopf- und Fußzeilen).

• name – Der Name der Datei .html oder .php, die sich im Unterverzeichnis parts befindet.
• title – Der Titel, der dem Vorlagenteil zur leichteren Identifizierung gegeben wird.
• area – Gibt an, für welchen Teil der Seite der Vorlagenteil gilt (z. B. header, footer, sidebar).

3. Muster

Mit der Eigenschaft patterns kannst du eine Reihe von Patterns aus dem WordPress Patterns Directory registrieren und sie im Theme verfügbar machen.

Hier erfährst du, wie du ein Muster registrieren kannst:

"patterns": [
    "my-custom-pattern-slug"
]

Drei praktische Beispiele für die Arbeit mit theme.json

Hier sind ein paar Dinge, die du vielleicht für ein Theme, das du entwickelst, tun möchtest.

1. Ein Muster hinzufügen

Hier siehst du, wie du zwei Muster aus dem WordPress Patterns Directory einfügst. Hier ist das Muster „Fullscreen Cover Image Gallery“ zu sehen:

"patterns": [
   "fullscreen-cover-image-gallery",
   "hero-banner-with-overlap-images"
]

Anmerkungen:

• Muster, die aus dem Verzeichnis Patterns stammen, werden nicht im Bereich Patterns des Website-Editors angezeigt. Diese Muster sind nur über den Inserter verfügbar.
• In diesem Beispiel fügen wir die Top-Level-Eigenschaft patterns ein (im Gegensatz zu settings und styles, die wir in früheren Beispielen der Kürze halber weggelassen haben).

2. Hinzufügen einer benutzerdefinierten Schriftart

Wir haben zwei Schriftartendateien (Roboto-Regular.ttf und Roboto-Bold.ttf) aus der Google Fonts-Bibliothek heruntergeladen und in das Unterverzeichnis assets/fonts/ unseres Themas hochgeladen.

Der folgende Code registriert die beiden Schriftarten und macht sie für die gesamte Website verfügbar:

"settings": {
   "typography": {
       "fontFamilies": [
           {
               "fontFamily": "Roboto",
               "name": "Roboto",
               "slug": "roboto",
               "fontFace": [
                   {
                       "fontFamily": "Roboto Regular",
                       "fontWeight": "400",
                       "fontStyle": "normal",
                       "src": [
                           "file./assets/fonts/Roboto-Regular.ttf"
                       ]
                   },
                   {
                       "fontFamily": "Roboto Bold",
                       "fontWeight": "700",
                       "fontStyle": "bold",
                       "src": [
                           "file./assets/fonts/Roboto-Bold.ttf"
                       ]      
                   }  
               ]
           }
       ]
   }
}

3. Einstellen deiner Farbpalette

Wenn du deine Nutzer/innen auf eine bestimmte Farbpalette beschränken willst, kannst du sie so konfigurieren. (Auch Farbverläufe und Duotones können nach deinen Vorgaben konfiguriert werden.)

Beispiel:

"settings": {
   "color": {
       "custom": false,
       "defaultPalette": false,
       "palette": [
           {
               "slug": "primary",
               "color": "#1e8cbe",
               "name": "Primary"
           },
           {
               "slug": "secondary",
               "color": "#21759b",
               "name": "Secondary"
           },
           {
               "slug": "tertiary",
               "color": "#",
               "name": "Tertiary"
           },
           {
               "slug": "accent",
               "color": "#464646",
               "name": "Accent"
           }
       ]
   }
}

Erkennst du diese vier Farben? Sie sind Teil der Farbgeschichte von WordPress.

Zusammenfassung

Dieser Artikel beleuchtet die zentrale Rolle von theme.json in der modernen WordPress-Theme-Entwicklung. Wenn du theme.json beherrschst, kannst du das visuelle Design und die Benutzeroberfläche deines Themes vollständig anpassen, ohne komplexe PHP- oder CSS-Änderungen vornehmen zu müssen.

Wenn du verstehst, wie du Eigenschaften wie appearanceTools effektiv nutzen kannst, hast du mehr Kontrolle und Effizienz bei der Erstellung oder Verfeinerung von WordPress-Themes, was diese Datei zu einem unverzichtbaren Werkzeug für Entwickler macht, die flexible, benutzerfreundliche Themes erstellen wollen.