Was ist die theme.json-Datei in WordPress und wie verwendet man sie

Die theme.json-Datei ist ein wichtiger Bestandteil von WordPress Block Themes und steuert viele Aspekte des Erscheinungsbilds und der Funktionalität Ihrer Website. Wenn Sie kürzlich von einem klassischen Theme zu einem Block-Theme gewechselt sind, fragen Sie sich vielleicht, worum es bei dieser Datei geht und ob Sie sie bearbeiten sollten.

Sie sind nicht allein. Wir und viele WPBeginner-Benutzer haben sich genau dasselbe gefragt. Deshalb haben wir uns entschieden, dieses Thema eingehend zu untersuchen, um einen umfassenden Leitfaden zu erstellen.

In diesem Artikel erklären wir, was eine theme.json-Datei ist, warum sie wichtig ist und wie Sie sie zur Anpassung Ihrer WordPress-Website verwenden können. 

Was ist die WordPress theme.json-Datei?

Die Datei theme.json ist eine spezielle Theme-Datei, die in WordPress 5.8 eingeführt wurde. Sie spielt eine Schlüsselrolle im Erlebnis der Full Site Editing (FSE), mit dem Sie jeden Aspekt Ihres WordPress-Block-Themes visuell anpassen können.

Im Wesentlichen fungiert die Datei theme.json als Bauplan, der das Styling und die Funktionalität Ihres Block-Themes steuert. Sie enthält Code, der WordPress mitteilt, wie verschiedene Elemente wie Farben, Typografie, Layouts und Vorlagen aussehen und sich verhalten sollen.

Warum brauchen WordPress Block Themes eine theme.json-Datei?

Das Bearbeiten eines Block-Themes in WordPress unterscheidet sich vom Bearbeiten eines klassischen Themes.

Klassische Themes verwenden die Datei functions.php, um Funktionen wie benutzerdefinierte Menüs oder Beitragsbilder mit der Funktion add_theme_support() zu aktivieren. Anschließend können Sie diese Funktionen mit CSS-Regeln in der CSS-Stylesheet-Datei (style.css) gestalten.

In Block-Themes fungiert theme.json als zentrale Anlaufstelle für alles, was das Aussehen und Gefühl Ihres Block-Themes definiert. Es ermöglicht Ihnen, Dinge wie Schriftarten, Farben und Layoutoptionen an einem Ort zu definieren, wodurch die Notwendigkeit von add_theme_support() in functions.php entfällt.

Deshalb ist die Datei functions.php in Block-Themes oft kleiner als die entsprechende Datei in klassischen Themes.

Eine dedizierte theme.json-Datei bietet einige großartige Vorteile gegenüber dem früheren System klassischer Themes.

Zuerst arbeitet theme.json Hand in Hand mit dem Full Site Editor von WordPress. Dies ermöglicht es Ihnen, die Stile und Einstellungen Ihres Themes einfach direkt im Editor anzupassen, ohne Code anfassen zu müssen.

Darüber hinaus zielt theme.json darauf ab, eine konsistente Erfahrung für Entwickler und Benutzer zu schaffen. Einige Benutzer finden es sehr frustrierend, wenn sie Themes wechseln müssen, da sie völlig neue Layouts und Styling-Optionen erlernen müssen.

Mit theme.json wird der Wechsel von Themes zu einem reibungsloseren Prozess, da alles auf ähnliche Weise organisiert ist.

Schließlich können Theme-Entwickler und Benutzer durch die Verwendung von theme.json ihre Arbeit zukunftssicher machen, während WordPress seine Full-Site-Editing-Funktionen weiter ausbaut.

Jetzt, da wir behandelt haben, was eine theme.json-Datei ist, tauchen wir tiefer in das Thema ein. Sie können die folgenden Schnelllinks verwenden, um durch diese Anleitung zu navigieren:

• Wo finden Sie die WordPress theme.json-Datei?
• Wie sieht die theme.json-Datei aus?
• Was Sie tun sollten, bevor Sie die theme.json-Datei bearbeiten
• So bearbeiten Sie die WordPress theme.json-Datei
• Bonustipp: Verwenden Sie WPCode, um benutzerdefinierten Code zu Ihrem Theme hinzuzufügen

Wo finden Sie die WordPress theme.json-Datei?

Die Datei theme.json befindet sich in Ihrem Theme-Verzeichnis auf Ihrem Webserver. Der typische Dateipfad wäre public_html » wp-content » themes » Ihr-Theme-Name » theme.json.

Um darauf zuzugreifen, müssen Sie sich zuerst über FTP oder den Dateimanager Ihres Hosting-Kontos mit Ihrer Website verbinden.

Wenn Sie Bluehost verwenden, können Sie sich anmelden und zum Tab 'Websites' wechseln. Klicken Sie dann unter Ihrer Website auf die Schaltfläche 'Einstellungen'.

Stellen Sie nun sicher, dass Sie auf dem Tab 'Übersicht' bleiben.

Scrollen Sie dann nach unten und klicken Sie auf die Schaltfläche „Dateimanager“.

Wenn Sie den Dateimanager auf diese Weise öffnen, befinden Sie sich automatisch im Stammordner Ihrer Website.

Suchen Sie hier nach dem Verzeichnis 'wp-content' und öffnen Sie es. Dort finden Sie den Ordner 'themes', der alle Ihre installierten WordPress-Themes enthält.

Öffnen Sie den Ordner für das spezifische Blockthema, das Sie verwenden. Die Datei theme.json befindet sich direkt in diesem Theme-Verzeichnis neben anderen Theme-Dateien.

Sobald Sie sie gefunden haben, können Sie die theme.json-Datei mit einem Code-Editor anzeigen.

Wie sieht die theme.json-Datei aus?

Die theme.json-Datei hat eine bestimmte Struktur, die alle globalen Einstellungen für Ihr WordPress-Block-Theme organisiert.

Je nachdem, wie komplex oder einfach Ihr Theme aussieht, kann die Datei sehr kurz oder lang sein. Sie können diese Datei jedoch leicht in 7 übergeordnete Abschnitte unterteilen:

{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {},
"patterns": []
}

Hier ist eine vereinfachte Aufschlüsselung:

Schema

Dieser Teil ist in Block-Themes optional, daher sehen Sie ihn möglicherweise in Ihrem Theme oder auch nicht.

Die Eigenschaft schema verknüpft die URL mit dem WordPress JSON-Schema, das die globalen Einstellungen, Stile und andere Konfigurationen für Ihr Theme definiert.

Version

Dieser Abschnitt gibt an, welche API-Version des theme.json-Formats von der Datei verwendet wird und stellt sicher, dass sie der richtigen Struktur folgt.

Zum Zeitpunkt der Erstellung dieses Artikels befindet sich die API in Version 2.

Einstellungen

Diese Eigenschaft definiert die Optionen und Steuerelemente, die Benutzern zur Verfügung stehen, um ihr Theme anzupassen. Dazu gehören Voreinstellungen für die Farbpalette des Themes, Typografie, Abstände, Verläufe, Schatten, Rahmen und so weiter.

Hier ist ein sehr einfaches Beispiel dafür, wie die Eigenschaft 'settings' aussieht:

{
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "base",
          "color": "#ffffff",
          "name": "White"
        },
        {
          "slug": "contrast",
          "color": "#222222",
          "name": "Dark"
        },
        {
          "slug": "accent",
          "color": "#f08080",
          "name": "Pink"
        },
        {
          "slug": "accent-2",
          "color": "#90ee90",
          "name": "Light Green"
        },
        {
          "slug": "accent-3",
          "color": "#e0ffff",
          "name": "Light Blue"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Open Sans, sans-serif",
          "slug": "open-sans",
          "name": "Open Sans"
        },
        {
          "fontFamily": "Arial, sans-serif",
          "slug": "arial",
          "name": "Arial"
        },
        {
          "fontFamily": "Times New Roman, serif",
          "slug": "times-new-roman",
          "name": "Times New Roman"
        }
      ],
      "fontSizes": [
        {
          "name": "Extra Small",
          "slug": "xx-small",
          "size": "0.75rem"
        },
        {
          "name": "Small",
          "slug": "small",
          "size": "0.875rem"
        },
        {
          "name": "Medium",
          "slug": "medium",
          "size": "1rem"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "1.125rem"
        },
        {
          "name": "Extra Large",
          "slug": "x-large",
          "size": "1.25rem"
        },
        {
          "name": "XX-Large",
          "slug": "xx-large",
          "size": "1.5rem"
        }
      ],
      "spacing": {
        "units": ["rem"],
        "values": {
          "small": "1rem",
          "medium": "1.5rem",
          "large": "2rem"
        }
      }
    }
  }
}

Wenn Sie sich den Code ansehen, ist die verwendete Sprache ziemlich einfach zu verstehen. Sie können erkennen, dass die Einstellungen die Farben, Schriftarten, Schriftgrößen und Abstände definieren, die im Theme verwendet werden.

Wenn Sie hier oder in Ihrem Theme auf Referenzen stoßen, die Sie nicht verstehen, können Sie die offizielle WordPress-Referenz für Einstellungen konsultieren.

Einige Elemente, wie Farben und Schriftfamilien, haben Slugs, wie diesen:

{
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "base",
          "color": "#ffffff",
          "name": "White"
        },

Diese werden sich später für den Styles-Bereich als nützlich erweisen, um Voreinstellungen zu erstellen, die wir im nächsten Teil erklären werden.

Stile

Während der Abschnitt 'Einstellungen' die Standard-Anpassungsoptionen des Themes definiert, wendet der Abschnitt 'Stile' diese auf das Theme an.

Hier können Sie die Anpassungseinstellungen mit Voreinstellungen auf die gesamte Website oder auf Blockebene anwenden.

Schauen wir uns das folgende Beispiel an:

{
  "settings": {
    // Existing settings from the previous example
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--contrast)"
    },
    "elements": {
      "link": {
        "color": {
          "text": "var(--wp--preset--color--accent-2)"
        }
      },
      "h1": {
        "fontSize": "var(--wp--preset--font-size--xx-large)",
        "lineHeight": "1.2",
        "marginBottom": "1rem"
      },
      "h2": {
        "fontSize": "var(--wp--preset--font-size--x-large)",
        "lineHeight": "1.2",
        "marginBottom": "1rem"
      },
      "h3": {
        "fontSize": "var(--wp--preset--font-size--large)",
        "lineHeight": "1.2",
        "marginBottom": "1rem"
      }
    }
  }
}

Wie Sie sehen können, erscheint diese Codezeile in diesem Ausschnitt: var(--wp--preset--xxx). Dies sind Voreinstellungen, Abkürzungen im Abschnitt Stile, die sich auf die im Abschnitt Einstellungen definierten Werte beziehen.

Betrachten Sie zum Beispiel {"slug": "base", "color": "#ffffff", "name": "White"} im Abschnitt settings. Hier ist "base" der Slug, und das entsprechende Preset für diese Farbe ist var(--wp--preset--color--base).

Daher besagt der Code "color": {"background": "var(--wp--preset--color--base)" in den Stilen, dass die Hintergrundfarbe dieses Themes weiß ist.

Benutzerdefinierte Vorlagen

In der Entwicklung von WordPress-Block-Themes können Entwickler vordefinierte Layouts für benutzerdefinierte Seiten, Beiträge oder benutzerdefinierte Beitragstypen erstellen, die Benutzer verwenden können.

Zum Beispiel hat das Twenty Twenty-Four Theme mehrere benutzerdefinierte Vorlagen, die in der Datei theme.json definiert sind: Page No Title, Page With Sidebar, Page with wide Image und Single with Sidebar.

Sie können eine dieser Optionen verwenden, um Ihre Inhalte zu erstellen.

],
"customTemplates": [
  {
    "name": "page-no-title",
    "postTypes": ["page"],
    "title": "Page No Title"
  },
  {
    "name": "page-with-sidebar",
    "postTypes": ["page"],
    "title": "Page With Sidebar"
  },
  {
    "name": "page-wide",
    "postTypes": ["page"],
    "title": "Page with wide Image"
  },
  {
    "name": "single-with-sidebar",
    "postTypes": ["post"],
    "title": "Single with Sidebar"
  }
]

Eine Sache, die man beachten sollte, ist, dass die theme.json-Datei die Vorlagen nur nach Namen referenziert und Metadaten über sie bereitstellt, wie z. B. ihren Titel und die Post-Typen, für die sie bestimmt sind.

Das tatsächliche Aussehen und die Funktionalität der benutzerdefinierten Vorlagen werden jedoch in separaten Vorlagendateien innerhalb des Theme-Ordners definiert.

Um sie anzuzeigen, können Sie zu public_html » wp-content » themes » Ihr-Theme-Name » templates navigieren.

Vorlagenteile

Vorlagenbestandteile sind wiederverwendbare Bereiche, die Sie in Ihren benutzerdefinierten Vorlagen verwenden können. Dies sind Elemente wie Header, Footer, Seitenleisten und so weiter.

So sehen diese Vorlagenteile in der theme.json registriert aus:

"templateParts": [
  {
    "area": "header",
    "name": "header",
    "title": "Header"
  },
  {
    "area": "footer",
    "name": "footer",
    "title": "Footer"
  },
  {
    "area": "sidebar",  // Removed "uncategorized"
    "name": "sidebar",
    "title": "Sidebar"
  },
  {
    "area": "post-meta",  // Removed "uncategorized"
    "name": "post-meta",
    "title": "Post Meta"
  }
]

Wie benutzerdefinierte Vorlagen verweist die theme.json-Datei nur auf die Vorlagen.

Ihr tatsächliches Aussehen wird in ihren eigenen Vorlagenteil-Dateien im Ordner parts definiert.

Muster

Muster sind vorgefertigte Sammlungen von Blöcken, mit denen Sie benutzerdefinierte Inhaltslayouts auf Ihren Seiten, Beiträgen oder an anderen Stellen in Ihrem Theme erstellen können.

Wenn Sie den Full Site Editor öffnen, bemerken Sie möglicherweise das Menü „Muster“. Hier finden Sie alle verfügbaren Muster für Ihr Gutenberg-Block-Theme.

Mit theme.json können Theme-Entwickler Muster aus dem öffentlichen Pattern-Verzeichnis referenzieren. Dies ist eine großartige Möglichkeit, mehr Anpassungsoptionen anzubieten, ohne diese wiederverwendbaren Blöcke selbst zu entwerfen.

Zum Beispiel verweist das Twenty Twenty-Four Theme auf zwei Muster aus dem offiziellen Verzeichnis: drei Spalten mit Diensten und einen Kundenbereich:

"patterns": [
  "three-columns-of-services",
  "clients-section"
]

Das wissen wir, weil diese Muster im Menü Muster im Voll-Site-Editor vorhanden sind.

Sie befinden sich jedoch nicht im Ordner patterns im Theme-Verzeichnis.

Was Sie tun sollten, bevor Sie die theme.json-Datei bearbeiten

Da theme.json eine Kern-Theme-Datei ist, birgt die direkte Bearbeitung auf Ihrer Live- WordPress-Website einige Risiken. Versehentliche Fehler könnten Ihr Theme oder Ihre Website potenziell beschädigen.

Ein sichererer Ansatz ist die Verwendung eines Child-Themes.

Ein Child-Theme erbt alle Stilvariationen und Funktionalitäten Ihres Parent-Themes (des Block-Themes, das Sie verwenden), erlaubt Ihnen aber, Dinge anzupassen, ohne das Parent-Theme selbst zu ändern. Auf diese Weise werden Ihre Anpassungen nicht überschrieben, wenn das Parent-Theme Updates erhält.

Sie können unseren Leitfaden zum Erstellen eines Child-Themes in WordPress unter Erstellen eines Child-Themes in WordPress lesen, um weitere Informationen zu erhalten. Dieser Artikel zeigt eine einfache Methode mit dem Plugin Create Block Theme, das automatisch eine neue theme.json-Datei für Ihr Child-Theme generiert.

Um eine reibungslose Bearbeitung zu gewährleisten und Ausfallzeiten Ihrer Website zu vermeiden, empfehlen wir außerdem, ein neues Backup Ihrer WordPress-Website zu erstellen. Auf diese Weise können Sie Ihre Website bei Problemen einfach in ihren vorherigen Zustand zurückversetzen.

Wir empfehlen die Verwendung eines Plugins wie Duplicator für eine schnelle und zuverlässige Backup-Lösung.

Es wird auch empfohlen, in einer lokalen WordPress-Entwicklungsumgebung oder einer Staging-Umgebung zu arbeiten. Dies erstellt eine exakte Kopie Ihrer Live-Website, auf der Sie Änderungen sicher testen können, ohne Ihre Besucher zu beeinträchtigen.

Hier sind einige weitere Tipps, die Sie beachten sollten:

• Beginnen Sie mit kleinen Änderungen in Ihrer theme.json-Datei und testen Sie diese gründlich, bevor Sie komplexere Änderungen vornehmen.
• Wenn Sie sich bezüglich einer bestimmten Eigenschaft oder Einstellung innerhalb der theme.json-Datei unsicher sind, konsultieren Sie die offizielle WordPress-Dokumentation.
• Zögern Sie nicht, sich an das Support-Team des Theme-Entwicklers oder die WordPress.org-Supportforen zu wenden, wenn Sie auf Probleme stoßen. Lesen Sie unseren Leitfaden zum richtigen Stellen von WordPress-Supportanfragen für weitere Informationen.

So bearbeiten Sie die WordPress theme.json-Datei

Basierend auf unseren Recherchen und Tests haben wir zwei Möglichkeiten entdeckt, eine WordPress theme.json-Datei zu bearbeiten: über den Full-Site-Editor oder über Code. Die erste Option ist viel einfacher und sicherer und ermöglicht es Ihnen, Ihre Änderungen auf der Vorderseite Ihrer Website zu sehen.

Die zweite Option wird empfohlen, wenn Sie mit der fortgeschrittenen WordPress-Entwicklung vertraut sind.

theme.json ohne Code bearbeiten (für Anfänger)

Um Ihre theme.json-Datei zu bearbeiten, ohne den Code direkt zu berühren, können Sie das Plugin Create Block Theme verwenden. Dieses Plugin wurde vom offiziellen WordPress.org-Team veröffentlicht, damit Benutzer ein benutzerdefiniertes Block-Theme erstellen, bearbeiten und/oder die Stilvarianten ihres Block-Themes speichern können.

Installieren Sie zunächst das WordPress-Plugin in Ihrem Admin-Bereich. Öffnen Sie dann den Full-Site-Editor, indem Sie zu Design » Editor navigieren.

Sie sehen nun mehrere Menüs zur Bearbeitung Ihres Themes.

Wählen Sie hier „Stile“ aus.

Klicken Sie anschließend auf das Stift-Symbol 'Stile bearbeiten'.

Dies bringt Sie zum Block-Editor, um die globalen Einstellungen und Stile Ihrer Website zu bearbeiten.

Jetzt können Sie den Stil Ihres Themes wie gewohnt ändern. Weitere Informationen finden Sie im Abschnitt So ändern Sie die globalen Stile Ihrer Website in unserem Leitfaden zum Full-Site-Editing von WordPress.

Versuchen wir als Beispiel, eine benutzerdefinierte Farbpalette zu erstellen.

Das Farbschema oder die Palette ist eine Reihe von Standardfarben für Elemente wie Text, Hintergründe und Schaltflächen. Es sorgt für ein zusammenhängendes Erscheinungsbild Ihrer gesamten Website.

Elemente, die dasselbe Farbpreset verwenden, stimmen immer überein, sodass das Design Ihrer Website poliert und professionell aussieht.

Um die Palette zu bearbeiten, wählen Sie 'Farben' in der Seitenleiste der Stileinstellungen aus.

Auf dem nächsten Bildschirm sehen Sie einige Einstellungen, um die Farben Ihres Themes anzupassen.

Klicken Sie hier auf die Farben im Abschnitt 'Palette'.

In diesem Beispiel hat das Twenty Twenty-Four Theme bereits 5 Farben in der Palette definiert, aber Sie können jede davon ändern, um eine benutzerdefinierte von Grund auf neu zu erstellen.

Klicken Sie dazu auf eine der Farben unter „Theme“. Wählen Sie dann eine beliebige Farbe im Farbwähler-Tool aus.

Wenn Sie nun Ihre Website in der Vorschau anzeigen, sehen Sie, dass die spezifischen Blöcke oder Elemente, die die vorherige Farbe verwendet haben, durch die Farbe ersetzt wurden, die Sie gerade in Ihrer Palette ausgewählt haben.

Sie können die gleichen Schritte für jede Farbe wiederholen. Klicken Sie dann auf „Speichern“.

Nach dem Speichern Ihrer Änderungen klicken Sie auf die Schaltfläche Block Theme erstellen (das Schraubenschlüsselsymbol).

Wählen Sie dann 'Änderungen am Theme speichern'.

Auf dem nächsten Bildschirm müssen Sie nach unten scrollen.

Klicken Sie danach auf „Änderungen speichern“. Daraufhin fordert WordPress Sie auf, alle von Ihnen vorgenommenen Änderungen an Ihrem Theme in der theme.json-Datei zu speichern.

Sobald Sie dies getan haben, wird der Block-Editor aktualisiert.

Klicken Sie nun erneut auf die Schaltfläche 'Create Block Theme' und wählen Sie 'theme.json anzeigen'.

Um den Code für Ihre benutzerdefinierte Farbpalette zu sehen, suchen Sie nach palette, das innerhalb von color und settings verschachtelt ist, wie folgt:

"settings": {
  // Some code...
  "color": {
    // Some code...
    "palette":  
  }
}

Darunter sollten Sie die neuen Hex-Codes Ihrer benutzerdefinierten Farbpalette sehen.

theme.json mit Code bearbeiten (für fortgeschrittene Benutzer)

Diese Methode wird empfohlen, wenn Sie ein angehender WordPress-Theme-Entwickler sind oder bereits etwas Erfahrung mit Code haben.

Öffnen Sie zunächst die theme.json-Datei Ihres Block-Themes in Ihrem WordPress-Verzeichnis. Sie können entweder den Code-Editor im Dateimanager Ihres Webhosters verwenden oder die Datei herunterladen, auf Ihrem Computer bearbeiten und wieder auf Ihren Server hochladen.

Wir verwenden das Twenty Twenty-Four Theme und den Dateimanager von Bluehost zu Demonstrationszwecken. Wenn Sie ein Bluehost-Benutzer sind und den Dateimanager verwenden, können Sie einfach mit der rechten Maustaste auf Ihre theme.json-Datei klicken und 'Bearbeiten' auswählen.

Wenn Sie FTP verwenden, können Sie unseren Leitfaden zur Verwendung von FTP zum Hochladen von Dateien nach WordPress lesen.

Versuchen wir ein einfaches Beispiel für die Bearbeitung Ihrer theme.json-Datei: Erstellen benutzerdefinierter Schriftgrößen.

Denken Sie noch einmal daran, dass die Eigenschaft 'settings' die Standardstile Ihres Themes angibt, während die Eigenschaft 'styles' diese implementiert. Aus diesem Grund bearbeiten wir die Eigenschaft 'settings' in der Datei theme.json.

Wenn Sie ein Child-Theme verwenden, können Sie einfach den folgenden Code kopieren und in Ihre theme.json-Datei einfügen und die Schriftgrößen nach Belieben in Pixeln ändern:

{
  "settings": {
    "typography": {
      "fluid": false,
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "16px"
        },
        {
          "name": "Medium",
          "slug": "medium",
          "size": "24px"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "40px"
        },
        {
          "name": "Extra Large",
          "slug": "x-lagrge",  // Typo fixed (large -> large)
          "size": "48px"
        }
      ]
    }
  }
}

Hinweis: Wenn Sie die Datei Ihres übergeordneten Themes direkt bearbeiten, müssen Sie den Code finden, der fontSizes lautet.

Sie sollte unter typography und settings verschachtelt sein, wie hier:

{
  "settings": {
    // Some code...
    "typography": {
      // Some code...
      "fontSizes": [
        // Font size definitions here
      ]
    }
  }
}

Ersetzen Sie danach diese Codezeilen durch den obigen Codeausschnitt. Stellen Sie nur sicher, dass keine Syntaxfehler darin enthalten sind.

Wenn Sie fertig sind, speichern Sie die Datei und rufen Sie Ihre Website auf, um Ihre Änderungen anzuzeigen. Für Bluehost-Benutzer können Sie einfach auf „Änderungen speichern“ im Code-Editor des Dateimanagers klicken.

Wenn Sie Ihre theme.json weiter bearbeiten möchten, empfehlen wir Ihnen dringend, sich mit der Struktur der Datei vertraut zu machen, wie im vorherigen Abschnitt erläutert.

Wir empfehlen außerdem, die offizielle WordPress-Referenz für Einstellungen zu lesen, die eine vollständige Liste der verfügbaren Eigenschaftseinstellungen und Anleitungen zu deren Verwendung enthält.

Bonustipp: Verwenden Sie WPCode, um benutzerdefinierten Code zu Ihrem Theme hinzuzufügen

In dieser Anleitung haben Sie etwas über theme.json und sein Potenzial für die Theme-Anpassung gelernt. Aber vielleicht fühlt es sich immer noch etwas überwältigend an, direkt zu bearbeiten.

Glücklicherweise gibt es eine weitere benutzerfreundliche Option zum Hinzufügen von benutzerdefiniertem Code und für erweiterte Anpassungen: WPCode.

Mit WPCode können Sie benutzerdefinierte Code-Snippets einfügen, ohne jemals Ihre Theme-Dateien selbst anfassen zu müssen. Dies reduziert das Risiko, Ihre Website während der Anpassung zu beschädigen, erheblich.

Wenn Sie mehr über dieses Code-Snippet-Plugin erfahren möchten, lesen Sie unsere vollständige WPCode-Bewertung.

Hier sind auch einige hilfreiche Tutorials, die Ihnen den Einstieg in die Verwendung von WPCode erleichtern:

• Nützliche WordPress-Code-Snippets für Anfänger (Expertenauswahl)
• So heben Sie neue Beiträge für wiederkehrende Besucher in WordPress hervor
• Text in WordPress hervorheben
• So fügen Sie ganz einfach einen Box-Schatten in WordPress hinzu

Wir hoffen, dieser Artikel hat Ihnen geholfen, mehr über die theme.json-Datei in WordPress zu erfahren. Vielleicht möchten Sie auch unseren Leitfaden für Anfänger zum Thema Bearbeiten einer WordPress-Website und unsere Expertenauswahl der besten Drag-and-Drop-Page-Builder für WordPress lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.