WordPress-Entwickler haben mehr Kontrolle als je zuvor, da sich das WordPress-Ökosystem ständig weiterentwickelt. Full Site Editing (FSE) ebnet allen Nutzern den Weg, ein Theme von Grund auf zu erstellen, vor allem wenn sie die Datei theme.json verwenden.
Entwickler können auch die Datei theme.json nutzen. Mit dieser Konfigurationsdatei kannst du dein WordPress-Theme detailliert anpassen, ohne dass du dich mit den komplizierten Programmiersprachen auseinandersetzen musst.
In diesem umfassenden Leitfaden erfahren wir, was die theme.json Datei zu bieten hat und wie sie mit der vollständigen Bearbeitung der Website zusammenhängt. Am Ende wirst du wissen, wie du ihre Fähigkeiten nutzen kannst, um moderne, leistungsfähige Websites zu erstellen, unabhängig von deinen Entwicklungsfähigkeiten.
Einführung in die Datei theme.json
Im Kern ist theme.json eine Konfigurationsdatei, die die Einstellungen und Stile für dein WordPress-Theme definiert. Sie verwendet die JavaScript Object Notation (JSON), also strukturierte Daten, die die Schlüssel-Wert-Paare der übergeordneten Sprache erben, damit du deinen Code schreiben kannst.
Die Datei theme.json ist der Schlüssel für die Kontrolle über verschiedene Aspekte deines Themes. Dazu gehören Farbpaletten, Typografie-Einstellungen, Layout-Optionen, Stile pro Block, benutzerdefinierte CSS-Eigenschaften und vieles mehr. Wir werden diese Aspekte im Laufe des Artikels genauer erläutern.
Das hört sich zwar noch nicht so revolutionär an, aber theme.json ist wichtig für die Zukunft der WordPress-Entwicklung. Der nächste Abschnitt erklärt, warum.
Warum theme.json für die WordPress-Theme-Entwicklung wichtig ist
Die typische Herangehensweise von WordPress an die Theme-Entwicklung und die Erstellung von Plugins dreht sich oft um die Bearbeitung von Vorlagendateien mit PHP, die Verwendung der Datei functions.php und andere technische Aufgaben.
Die Datei theme.json stellt eine bedeutende Veränderung dar, insbesondere für die Entwicklung von Themes. Hierfür gibt es einige Gründe:
- Die Datei stellt einen einzigen, organisierten Ort dar, an dem du die Einstellungen und Stile deines Themes definieren kannst. Dadurch werden die verstreuten CSS- und PHP-Dateien überflüssig.
- Dieser zentrale Ansatz der Deklaration von Stilen und Einstellungen in
theme.jsonbedeutet, dass WordPress effizienteres CSS generieren kann. Im Vergleich zur Verwendung eines Frameworks wie jQuery ist eine Leistungssteigerung möglich. - Du hast mehr Kontrolle über das Styling deiner Website und einzelner Blöcke als je zuvor. Dadurch wird die Themeentwicklung für Nutzer/innen mit weniger technischem Wissen demokratisiert.
- Mit der Weiterentwicklung von FSE wird die Datei
theme.jsoneine entscheidende Rolle dabei spielen, wie Themes, globale Stile und der Blockeditor zusammenspielen.
Die Kombination all dieser Aspekte führt zu einer standardisierten Methode, um Einstellungen und Stile für dein Theme zu definieren. Wer verschiedene Themes verstehen und mit ihnen arbeiten möchte, kann mit theme.json robustere, flexiblere und benutzerfreundlichere WordPress-Themes erstellen. Noch besser ist, dass diese Kreationen mit der zukünftigen Ausrichtung der Plattform übereinstimmen.
Wo du die Datei theme.json findest
Zunächst einmal wirst du in „traditionellen“ oder „klassischen“ Themes keine theme.json Datei finden. Um diese Datei zu finden und zu nutzen, brauchst du ein eigenes Block-Theme. Abgesehen davon kannst du die Datei in jedem Theme erstellen, solange du WordPress 5.8 oder höher verwendest.
Der typische Speicherort für die Datei theme.json befindet sich in wp-content/themes/[dein-theme]. Wenn die Datei dort nicht zu finden ist, solltest du deinen bevorzugten Code-Editor öffnen und die Datei wie erforderlich erstellen. Mach dir vorerst keine Gedanken über den Inhalt – dazu kommen wir gleich.
Wenn du eine neue Datei von Grund auf erstellen musst, aber auch die Feinheiten des Inhalts sehen willst, bevor du deine eigene anpasst, schau dir das Standard-Theme Twenty Twenty-Four an.
Als Block-Theme hat es eine theme.json Datei, die du dir ansehen kannst. Es kann nützlich sein, sie geöffnet zu haben, wenn wir uns in den nächsten Abschnitten die Struktur ansehen.
Was du brauchst, um mit theme.json zu arbeiten
Natürlich wird nicht jeder in der Lage sein, die Konfigurationsdatei zu öffnen und sich an die Arbeit zu machen. Du brauchst noch einige grundlegende Fähigkeiten und Kenntnisse, um ein Theme zu erstellen und anzupassen:
- Grundlegende JSON-Kenntnisse. Wir denken, dass du dir das schnell aneignen kannst, aber dennoch ist es wichtig, mit der JSON-Syntax und -Struktur vertraut zu sein.
- Verständnis von CSS. Du wirst feststellen, dass viele Objekte und Eigenschaften von
theme.jsonmit den entsprechenden CSS-Eigenschaften übereinstimmen. CSS-Kenntnisse sind hier von Vorteil. - Kenntnisse des WordPress-Block-Editors. Wenn du verstehst, wie Blöcke funktionieren und welche Anpassungsmöglichkeiten sie bieten, wird dir das beim Aufbau helfen.
Es ist zwar nicht unbedingt notwendig, aber wir empfehlen dir, zumindest die wichtigsten FSE-Konzepte zu verstehen, damit du die Datei theme.json effektiver nutzen kannst. Außerdem erfährst du vielleicht, wie sich deine Änderungen auf die Konfigurationen des Endnutzers auswirken werden. Es wird auch Fälle geben, in denen du weiterhin HTML und JavaScript verwenden musst, um deine Vision zu verwirklichen.
Schließlich gibt es noch ein paar technische „Extras“, die wir empfehlen würden:
- Einen Code-Editor. Mit einem guten Editor, der JSON-Syntaxhervorhebung und -validierung bietet, wird dein Arbeitsablauf noch angenehmer.
- Eine lokale Entwicklungsumgebung. Wenn du ein Tool wie DevKinsta für die Arbeit an deinem Theme verwendest, kannst du schnell experimentieren und deine Änderungen testen, ohne dass die Live-Site beeinträchtigt wird.
Mit diesen Tools und Kenntnissen bist du gut gerüstet, um dein WordPress-Theme mit theme.json anzupassen.
Ein Blick auf die Anatomie, Struktur und Hierarchie der theme.json
Die Datei theme.json hat natürlich eine Struktur, die du verstehen musst. Sie hat auch eine Hierarchie und einige einzigartige Elemente, die näher erklärt werden müssen.
Das ist wahrscheinlich der komplexeste Teil der Konfigurationsdatei, aber auch dann wirst du die Konzepte leicht verstehen.
Fangen wir mit der Struktur an und gehen dann zu den anderen Elementen von theme.json über.
Grundlegende Struktur
Da die Datei dem JSON-Format folgt, verstehst du vielleicht schon das allgemeine Konzept der Struktur. Zunächst einmal ist das gesamte Dateiobjekt in geschweifte Klammern eingeschlossen, ebenso wie einige der verschiedenen anderen Objekte darin. Jedes Objekt besteht aus Schlüssel-Wert-Paaren, wobei die Schlüssel in einfachen oder doppelten Anführungszeichen stehen und die Zeile mit einem Komma abgeschlossen wird.
Das absolute Minimum, das eine theme.json Datei braucht, sind die Objekte version, settings und styles:
{
"version": 2,
"settings": {
// Global settings go here
},
"styles": {
// Global styles go here
}
}Die Objekte settings und styles sind einfach, aber version erfordert mehr Erklärung. Dieser Wert ist eine ganze Zahl, die der API-Version entspricht, die du zum Lesen deiner Datei verwendest. Die aktuelle API-Version ist 3, aber auch die Version 2 ist üblich, und du kannst von älteren Versionen migrieren.
Die meisten theme.json Dateistrukturen enthalten auch ein Schema. Kurz gesagt, kannst du damit mit der Autovervollständigung in Code-Editoren arbeiten und die Datei validieren lassen. Du fügst es am Anfang der Datei hinzu:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
},
"styles": {
}
}Von hier aus fügst du verschiedene Eigenschaften und Objekte zu Einstellungen und Stilen hinzu, um deine Datei zu erweitern.
Hierarchie
Die Datei theme.json folgt einer hierarchischen Struktur und ist nur eine Ebene in der Gesamthierarchie der Einstellungen und Stile auf deiner Website. Wenn du über CSS-Kenntnisse verfügst, wird es dir leichter fallen, dies zu verstehen, denn diese Datei ist ähnlich komplex wie CSS.
Kurz gesagt, die Anpassungen, die du an theme.json vornimmst, werden nicht immer im Frontend deiner Website angezeigt. Die Benutzerkonfigurationen haben Vorrang vor allem anderen. Das bedeutet, dass alle Änderungen, die du im WordPress-Bildschirm Erscheinungsbild > Editor vornimmst, auch im Frontend angezeigt werden:
Wenn du ein Child-Theme verwendest und eine theme.json Datei einfügst, überschreibt diese alle Änderungen, die du nicht mit dem Site-Editor vorgenommen hast. Ebenso überschreibt alles, was du in der Konfigurationsdatei des Parent-Themes definierst, die Standardeinstellungen und -stile von WordPress. Auf diese Datei konzentrieren wir uns in diesem Beitrag, obwohl WordPress auch eine eigene theme.json Datei hat.
Auch wenn es in diesem Beitrag nicht im Mittelpunkt steht, kannst du die Werte auch mit Hooks und Filtern überschreiben. Mit diesen dynamischen Filtern kannst du Plugins und Themes erstellen, die auch die Einstellungen und Stile von Themen und Plattformen ändern.
Block-Grammatik
Wenn du in den WordPress-Block- oder Site-Editor gehst, einen Beitrag oder eine Seite öffnest und den Code-Editor einschaltest, wirst du viele HTML-Kommentare im Inhalt sehen:
Das liegt daran, dass Block-Themes keine PHP-Dateien verwenden, sondern HTML-Dateien zusammen mit Kommentaren und Block-Markup, um deine Seite zu erstellen. Die Kombination dieser Elemente ergibt die „Block-Grammatik“, die du brauchst, um deine theme.json Datei zu schreiben.
Bei Blöcken, die Inhalte enthalten, wie z. B. dem Absatzblock, umschließt du diese Inhalte:
<!-- wp:paragraph -->
<p>Content goes here!</p>
<!-- /wp:paragraph -->
In anderen Fällen brauchst du nur einzeilige Kommentare oder solche, die sich selbst schließen. Bei einigen Blöcken kombinierst du Typen, um deine Layouts und Designs zu erstellen. Du kannst diese Kommentare auch verschachteln:
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->Hier erstellen wir einen Spaltenblock mit einem Wrapper-Kommentar. Darin können wir HTML hinzufügen, um die Spalten zu gestalten und einzelne Spaltenumbrüche einzufügen. Am Frontend ist das ganz einfach, denn du wirst oft Blöcke ineinander schachteln.
Um das Markup für einen bestimmten Block zu finden, kannst du im Handbuch des Block-Editors herumstöbern, bis du das findest, was du brauchst. Am einfachsten ist es jedoch, wenn du den Block zu WordPress hinzufügst, den Code-Editor öffnest und das Markup von dort kopierst.
Auf die Änderungen, die du in diesem Markup vornehmen kannst, gehen wir in einem späteren Abschnitt ein.
Wie theme.json und die WordPress-Site-Bearbeitung zusammenpassen
Aus der Diskussion über die Hierarchie wirst du wissen, dass theme.json ein wichtiger Teil von FSE ist. Beide arbeiten zusammen, um dir eine umfassende Theme-Lösung für WordPress zu bieten. So ist zum Beispiel die Schnittstelle für globale Stile im Wesentlichen die visuelle Darstellung deiner theme.json Einstellungen.
Du kannst die Einstellungen entweder im Panel Globale Stile oder in der Konfigurationsdatei ändern und WordPress wird die entsprechenden Werte bei Bedarf aktualisieren. Während die Einstellungen im Site Editor Vorrang haben, dient theme.json als Grundlage für die eigenen Stile deines Themes. Der Endnutzer kann mit den Globalen Stilen die Standardeinstellungen durch seine eigenen Anpassungen ersetzen, ohne dass er Code eingeben oder die Datei theme.json bearbeiten muss.
Darüber hinaus werden die CSS-Eigenschaften, die du in theme.json definierst, in der Global Styles-Oberfläche verfügbar. So können die Nutzer/innen diese Eigenschaften für ein einheitlicheres Styling auf der gesamten Website nutzen. Außerdem kannst du auch spezifische Blockstile und -einstellungen definieren, die du über das WordPress-Dashboard weiter anpassen kannst.
Kurz gesagt: theme.json bietet eine detailliertere Kontrolle über Einstellungen, Stile und mehr. Es ist ein Tool für Entwickler, das unkomplizierter und übersichtlicher ist als klassische Ansätze. Im Gegensatz dazu gibt die Oberfläche der Globalen Stile jedem die Möglichkeit, ein Theme nach seinen eigenen Vorstellungen anzupassen. Bei der weiteren Entwicklung von Themes wirst du sehen, wie beide zusammenarbeiten, um Website-Designs und -Layouts zu erstellen.
Arbeiten mit den Eigenschaften der Datei theme.json
Wenn du die Grundlagen verstanden hast, kannst du mit den Objekten und Eigenschaften von theme.json arbeiten. Wir werden nicht alle Anwendungsfälle und Möglichkeiten abdecken können. Am Ende dieses Leitfadens wirst du jedoch in der Lage sein, Themes zu erstellen, die alle Funktionen bieten und im Frontend gut aussehen.
Settings
Mit der Eigenschaft settings kannst du festlegen, welche Funktionen du im Site-Editor anbietest und wie sie sich verhalten. Es handelt sich um eine Eigenschaft der obersten Ebene, die in der Regel mehrere Verschachtelungsebenen aufweist.
Wenn wir uns die Stile und ihre Variationen ansehen, wirst du sehen, dass es einige Überschneidungen zwischen diesen Optionen gibt, aber beide Arten spielen bei der Erstellung deines Themes eine Rolle.
Du hast eine bestimmte Anzahl von Eigenschaften zur Verfügung:
{
"version": 3,
"settings": {
"appearanceTools": false,
"blocks": {},
"border": {},
"color": {},
"custom": {},
"dimensions": {},
"layout": {},
"position": {},
"shadow": {},
"spacing": {},
"typography": {},
"useRootPaddingAwareAlignments": false
}
}Das offizielle WordPress-Handbuch für Theme-Entwickler enthält eine Referenz für alle diese Einstellungen (und Stile). Hier ist jedoch ein kurzer Überblick über ein paar wichtige Einstellungen, die einer näheren Erläuterung bedürfen:
appearanceTools. Diese Eigenschaft ermöglicht eine Reihe anderer Einstellungen und ist als Zeitersparnis gedacht. Mit ihr kannst du Rahmenoptionen, Zeilenhöhen für die Typografie, Auffüllungen, Ränder und vieles mehr einstellen.blocks. Während du dich bei deiner Arbeit hauptsächlich mit globalen Einstellungen und Stilen befassen wirst, kannst du dies mit der Eigenschaftblocksauf Blockbasis tun. Auf dieses Konzept gehen wir hier nicht näher ein, aber das Theme Developer Handbook enthält eine hervorragende Dokumentation zu diesem Aspekt vontheme.json.custom. Diese einzigartige Eigenschaft hat keine Funktionalität, da du entscheidest, was sie tut. Du verwendest sie, um benutzerdefinierte CSS-Eigenschaften für dein Theme zu erstellen, und der Spielraum, den du dabei hast, ist groß.useRootPaddingAwareAlignments. Auch hier handelt es sich um eine komplexe Eigenschaft, auf die wir nicht näher eingehen werden. Sie hilft dir im Wesentlichen dabei, die Stile für das horizontale Padding deines Themes zu platzieren und bietet dir eine Menge Möglichkeiten. Du verwendest sie, wenn du Elemente in voller Breite bis zum Rand des Bildschirms ausdehnen willst, während du das Root-Element mit einem Padding versiehst.
Beachte, dass du keine Eigenschaften zu theme.json hinzufügen musst, mit denen du nicht arbeiten möchtest. Wenn du zum Beispiel nicht mit appearanceTools arbeiten möchtest, kannst du es einfach weglassen, anstatt es mit false zu definieren.
Wie du Einstellungen in der theme.json definierst
Wenn es darum geht, Einstellungen zu definieren, hat jede Eigenschaft eine Reihe von Untereigenschaften aus Schlüssel-Wert-Paaren. Auf diese Weise kannst du zum Beispiel Farbpaletten erstellen:
{
"version": 3,
"settings": {
"color": {
"palette": [
{
"color": "#0073aa",
"name": "Primary",
"slug": "primary"
},
{
"color": "#23282d",
"name": "Secondary",
"slug": "secondary"
}
],
…Andere Eigenschaften haben einfache boolesche Werte, mit denen du diese Funktionen im Site Editor ein- oder ausschalten kannst:
{
"version": 3,
"settings": {
"color": {
"background": true,
"defaultPalette": true,
"link": true,
"text": true
}
}
}Sobald du deine Einstellungen festgelegt hast, kannst du ein Styling für sie einführen. Lass uns das jetzt untersuchen.
Stile und Stilvariationen
Während settings den Zugriff auf bestimmte Styling-Optionen definiert, kannst du mit der Eigenschaft styles die globalen Stile für dein Theme festlegen. Auch hier handelt es sich um eine Top-Level-Eigenschaft, die auf mehreren Ebenen verschachtelt wird. Du kannst auf bestimmte Elemente oder Blöcke abzielen oder sogar benutzerdefinierte CSS-Eigenschaften verwenden.
Es ist wichtig, dass du hier Themenstile definierst, damit du sie im Seiteneditor aufrufen und anpassen kannst. Du kannst mit einer Reihe von Elementen arbeiten:
{
"version": 3,
"styles": {
"border": {},
"color": {},
"dimensions": {},
"filter": {},
"shadow": {},
"spacing": {},
"typography": {},
"css": {}
}
}Viele davon wirst du jedoch nur selten als Eigenschaften der zweiten Ebene verwenden. Stattdessen werden einige hauptsächlich mit Blöcken oder Elementen arbeiten. Zum Beispiel:
…
"styles": {
"blocks": {
"core/group": {
"color": {
"text": "#000000",
"background": "#ffffff",
"link": "#777777"
}
…Für globale Stile bearbeitest du die Wurzel – das entspricht dem <body> Tag deiner Seite. Für bestimmte Elemente kannst du eine ähnliche Struktur wie bei den Blöcken verwenden, diesmal jedoch mit der Eigenschaft elements:
…
"styles": {
"elements": {
"button": {
"color": {
"text": "#ffffff",
"background": "#aa3f33"
}
…Wenn du dir die Änderungen im Seiteneditor ansiehst, solltest du sehen, dass sie umgesetzt wurden. Das Markup generiert auch CSS für alle Stile, die du erstellst:
Beachte, dass du auch Pseudo-Klassen für Elemente wie Hover- und Fokus-Stile erstellen kannst:
…
"elements": {
"button": {
"color": {
"text": "#ffffff",
"background": "#aa3f33"
},
":hover": {
"color": {
"background": "#822f27"
}
…Das Anwenden von Stilen geht noch weiter in die Tiefe, und das ist einer der fantastischen Vorteile der Verwendung von theme.json.
Stilvariationen
Bevor wir weitermachen, solltest du über Stilvariationen Bescheid wissen. Du kannst die verschiedenen Farbpaletten und Typografiestile in der FSE-Oberfläche sehen:
Diese kannst du jedoch nicht in theme.json programmieren. Stattdessen erstellst du alternative Versionen der Datei, gibst ihnen einen eindeutigen Namen und speicherst sie im Styles-Verzeichnis deines Themes:
Beachte, dass der Titel im Markup für jede alternative JSON-Datei einzigartig ist. Er ist jedoch ein optionales Feld – wir empfehlen dir jedoch, ihn aus Gründen der Übersichtlichkeit und der besten Erfahrung zu verwenden.
Benutzerdefinierte Vorlagen und Vorlagenteile
Ähnlich wie bei Stilvariationen kannst du auf theme.json benutzerdefinierte Vorlagen und zugehörige Vorlagenteile registrieren. Die Registrierung des Markups ist ganz einfach:
"customTemplates": [
{
"name": "my-template",
"title": "My Template",
"postTypes": [
"page",
"post"
]
}
]Über die Eigenschaft customTemplates musst du drei Elemente definieren:
name. Dies entspricht einer Vorlage, die du im Templates-Verzeichnis deines Themes erstellst, z. B. /template/my-template.html.title. Dies ist die lesbare Version des Namens der Vorlage.postTypes. Ohne Definition ist dies standardmäßig eine Seite, aber du kannst eine Reihe von Beitragstypen angeben, für die die Vorlage geeignet ist.
Die Nutzer können alle Vorlagen, die du registrierst, im Website- oder Block-Editor auswählen:
Wenn es um Vorlagenteile geht, musst du sie nicht registrieren, aber wir empfehlen es. Die Struktur ist ähnlich wie bei der Registrierung von Vorlagen:
…
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
…Hier entsprechen der Name und der Titel denselben Definitionen wie bei vollständigen Vorlagen. Der Bereich bezieht sich darauf, wo der Teil hingehört: header, footer oder uncategorized sind die Standardwerte, aber du kannst Vorlagenteile jedem beliebigen Bereich zuweisen.
Wir empfehlen dir, dich auch damit zu beschäftigen, wie du diese Vorlagenteile anzeigen kannst, da sie ohne zusätzlichen Code nicht angezeigt werden können. Trotzdem ist es ganz einfach, sie zu registrieren.
Patterns
Zum Schluss kommen wir zu den Blockmustern. Du kannst eine beliebige Anzahl von ihnen in deiner theme.json Datei mit einem Top-Level-Array bündeln. Du kannst jedes geeignete Muster aus der WordPress-Musterbibliothek in deine Datei aufnehmen:
Die Definition des Arrays ist einfach: Du verwendest die Eigenschaft patterns und den Slug des zugehörigen Musters aus der URL der Bibliothek:
Mit diesem Slug kannst du das patterns Markup auffüllen:
{
"version": 3,
"patterns": [
"fullwidth-vertically-aligned-headline-on-right-with-description-on-left"
]
}Du kannst sie aus dem Musterverzeichnis des Blockeditors auswählen:
Diese einfache Möglichkeit, die Assets der Musterbibliothek in deine Themes zu bringen, ist praktisch und wertvoll. Das ist ein weiterer Grund dafür, dass die theme.json Datei unter WordPress-Theme-Entwicklern immer beliebter wird.
Der Arbeitsablauf für die Anpassung deiner WordPress-Website mit theme.json
Wenn du die wichtigsten Komponenten von theme.json verstanden hast, ist die Entwicklung deines Arbeitsablaufs für die Verwendung der Datei ein wichtiger Schritt. Sie stellt eine neue Art der Theme-Entwicklung dar und muss daher anders gehandhabt werden als klassische Methoden.
Unser Ansatz wäre es, die Schema-URL einzurichten, eine API-Version auszuwählen und zuerst deine globalen Einstellungen zu definieren. Dazu gehören z. B. die Farbpalette, die Typografieoptionen und die Layouteinstellungen. In den meisten Fällen wäre es auch von Vorteil, die appearanceTools zu aktivieren:
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#0073aa"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#23282d"
}
]
},
"typography": {
"fluid": true,
"fontSizes": [
{
"size": "13px",
"slug": "small",
"name": "Small"
},
{
"size": "16px",
"slug": "normal",
"name": "Normal"
…Als Nächstes kannst du mithilfe der von dir definierten Slugs benutzerdefinierte CSS-Eigenschaften erstellen. Vielleicht hast du zum Beispiel eigene Schriftschnitte erstellt:
…
"custom": {
"fontWeight": {
"light": 300,
"regular": 400,
"medium": 500,
"bold": 700
},
…Wenn du mit deinen Einstellungen fertig bist, ist es an der Zeit, Stile festzulegen.
…
"styles": {
"color": {
"background": "var(--wp--preset--color--base)",
"text": "var(--wp--preset--color--main)"
},
…Die Anpassung der Blockstile ist der nächste Schritt, der einen großen Teil deiner theme.json Datei ausmachen kann.
…
"styles": {
"block": {
"core/separator": {
"color": {
"text": "var(--wp--preset--color--main)"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--large)"
}
},
"core/site-tagline": {
"spacing": {
"margin": {
"bottom": "20px"
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
}
},
"core/site-title": {
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)",
"fontWeight": "var(--wp--custom--font-weight--semi-bold)",
"lineHeight": "var(--wp--custom--line-height--none)"
},
…Schließlich musst du alle benutzerdefinierten Vorlagen und Vorlagenteile entwerfen und sie in theme.json registrieren. Dies ist auch der Zeitpunkt, um alle Block-Muster zu registrieren, die du verwenden möchtest, und sie gegebenenfalls zu erstellen.
Kinsta als Teil deines Workflows für die Entwicklung und Anpassung deines Themes nutzen
Bevor du deine Änderungen live schaltest, solltest du alles testen. Bislang hast du wahrscheinlich mit einem lokalen Entwicklungstool wie DevKinsta gearbeitet:
Es ist aber auch wichtig, dass du deine Entwicklung auf einer Live-Site überprüfst. Mit der Kinsta-Integration von DevKinsta kannst du eine Website in eine Standard- oder Premium-Staging-Umgebung übertragen:
Von dort aus kannst du dein Theme in unserer erstklassigen Cloud-Architektur testen und hast die volle Kontrolle über die Änderungen, die du live schaltest.
Außerdem kannst du unser komplettes Backup-Management nutzen, mit dem du tägliche automatische Backups sowohl in der Live- als auch in der Staging-Umgebung wiederherstellen kannst. Außerdem werden alle unsere Staging-Umgebungen mit DevTools ausgeliefert, mit denen du die Leistung deiner Website überwachen kannst, bevor du sie live schaltest.
theme.json oder Full Site Editing verwenden?
Angesichts der Überschneidungen zwischen theme.json und dem Full Site Editing fragst du dich vielleicht, warum du das eine dem anderen vorziehen solltest. Tatsächlich eignen sich beide für unterschiedliche Szenarien und sollten zusammen verwendet werden.
theme.json ist zum Beispiel in den folgenden Situationen die erste Wahl:
- Du entwickelst Themes und erstellst ein neues Theme von Grund auf.
- JSON ist eine Sprache, die du verstehst und mit der du gut umgehen kannst.
- Du möchtest eine programmatische Methode, um Standardstile und -einstellungen für dein Theme zu definieren.
- Die Stile und Einstellungen, die du implementieren willst, brauchen mehr Kontrolle als die Standardeinstellungen im Site Editor.
Zugegeben, der letzte Punkt ist eine Nische, denn FSE spiegelt die Funktionalität von theme.json fast genau wider. In den folgenden Szenarien ist Full Site Editing für die meisten Nutzer sinnvoller:
- Du bist ein Website-Betreiber, der ein bestehendes Theme anpassen möchte.
- Mit JSON bist du nicht vertraut.
- Visuelle Schnittstellen sind für deinen Anpassungs- und Entwicklungsworkflow sinnvoller.
- Du willst schnelle Anpassungen vornehmen, ohne dass du viel programmieren musst.
In der Praxis wird das Theme eine Konfigurationsdatei benötigen, um seine Grundlagen zu definieren. Von da an übernimmt die Hierarchie, und die Website-Betreiber können FSE nutzen, um weitere Anpassungen vorzunehmen.
Zusammenfassung
Die Konfigurationsdatei theme.json ist revolutionär für die Entwicklung von WordPress-Themes. Sie gibt dir ein zentrales Zuhause für die Einstellungen und Stile deines Themes und ermöglicht es dir, flexiblere, wartbare und anpassbare Themes zu erstellen.
Du verwendest die Datei zusammen mit dem Site-Editor in WordPress, um das endgültige Design einer Website zu erstellen. Die Optionen, die du in theme.json einstellst, dienen als Standard, den der Endnutzer weiter anpasst. Die gute Nachricht ist, dass das Kodieren dieser Datei einfacher ist als das Ändern einer Reihe von PHP- und CSS-Dateien – und sie ist die Zukunft des WordPress-Designs.
Hast du noch Fragen zur Verwendung der theme.json Datei in WordPress? Lass es uns in den Kommentaren unten wissen!
Schreibe einen Kommentar