WordPress dekodieren: Neue Themenkonfigurationsoptionen mit der Theme.JSON-Datei

Neue Theme-Konfigurationsoptionen in WordPress erleichtern es mehr denn je, das Aussehen Ihrer Website nach Ihren spezifischen und einzigartigen Bedürfnissen zu ändern. Darüber hinaus macht die Möglichkeit, klassische Themes in Block-Themes umzuwandeln, die Funktionalität noch benutzerfreundlicher.

In diesem Blogbeitrag, dem vierten in unserer Serie „WordPress entschlüsseln“, werden wir beide Entwicklungen besprechen, einschließlich dessen, was sie sind und wie sie es Ihnen erleichtern können, eine schöne, maßgeschneiderte Website zu haben, egal ob Sie Anfänger oder fortgeschrittene WordPress-Entwicklungsfähigkeiten besitzen.

Übersicht über WordPress-Themes und -Templates

Bevor wir die neuesten Optionen zur Konfiguration Ihres Themes durch Nutzung der neuesten Möglichkeiten, die durch eine Datei namens theme.json ermöglicht werden, durchgehen, werden wir uns damit vertraut machen, was es eigentlich bedeutet, ein Theme zu konfigurieren. Um unser Verständnis dafür zu helfen, klären wir zunächst den Unterschied zwischen einem Theme und einer Vorlage in WordPress, da es oft einige Verwirrung darüber gibt, besonders wenn Sie ein Anfänger sind.

Ein Theme ist das vollständige Design und die Grundlage für das einheitliche Aussehen und Gefühl Ihrer Website. Es beinhaltet Dinge wie Farbpaletten, Typografie, Seitenlayouts, Ränder, Zeilenabstand, Kopf- und Fußzeilen, Positionierung der Seitenleiste und andere Elemente. Wenn Sie ein Theme auswählen und installieren, werden all diese Elemente ebenfalls automatisch installiert. Es gibt nahezu unzählige Anzahl von kostenlosen und kostenpflichtigen Themes.

Eine Vorlage ist jedoch ein Einzelseiten-Layout innerhalb eines Website-themas. Und obwohl Änderungen an einer Vorlage vorgenommen werden können, werden sie nur auf die Seiten angewendet, die diese Vorlage verwenden, nicht auf die gesamte Website. Elemente wie das Anpassen des Layouts Ihres Blogs, das Erstellen von Landingpages und das Verleihen eines unverwechselbaren Aussehens anderer Inhalte sind Beispiele für das, was Sie mit Vorlagen erreichen können.

Also, was sind dann Theme-Konfigurationsoptionen?

Die Konfigurationsoptionen für Themes sind Administrationsseiten, die bei einigen WordPress-Themes mitgeliefert werden. Diese Administrationsseiten ermöglichen es Ihnen, die Einstellungen Ihres installierten Themes anzupassen, ohne Theme-Dateien ändern oder sich mit Codeänderungen aufhalten zu müssen. Einige dieser Administrationsseiten bieten möglicherweise nur einige Optionen, während andere viele, viele weitere haben können. Wenn Sie Anfänger sind, kann die relative Einfachheit einer Administrationsseite im Vergleich zu dem komplizierteren Weg eine willkommene Zeit- und Nervenersparnis sein.

Wenn Ihr Ziel nur darin besteht, Funktionen innerhalb eines Themes zu verbessern oder zu ändern, können Sie die Dinge erheblich vereinfachen, indem Sie ein Plugin installieren, anstatt das gesamte Theme neu zu konfigurieren. Wenn Sie jedoch den Stil und die Blockeinstellungen Ihres gesamten Standorts ändern möchten, müssen Sie dies durch Anpassungen vornehmen.

Was zum Teufel ist JSON?

Um Ihr WordPress-Theme anzupassen, wenn es keine Admin-Seite enthält, müssen Sie eine erstellen und eine theme.json-Konfigurationsdatei zum Thema hinzufügen. Aber was ist JSON? Das Akronym steht für JavaScript Object Notation, ein offenes, textbasiertes Datenübertragungsformat, das sowohl von Menschen als auch von Maschinen gelesen werden kann und nicht an eine spezifische Programmiersprache gebunden ist. Sein häufigster Einsatz ist die Übertragung von Daten in Webanwendungen.

theme.json Unterstützung wurde in WordPress in der Version 5.8 hinzugefügt und funktioniert nicht mit älteren Versionen von WordPress, es sei denn, Sie aktivieren das Gutenberg-Plugin. (Der Gutenberg-Editor wurde offiziell im Jahr 2018 zusammen mit WordPress 5.0 veröffentlicht.)

Einige der Anpassungsoptionen, die Sie innerhalb von theme.json auswählen können, umfassen:

• Aktivieren oder Deaktivieren von Funktionen wie Initialen, Blockabstände, Ränder und benutzerdefinierte Zeilenhöhen
• Hinzufügen mehrerer Farbpaletten, Verläufe und Duotonfilter für Fotos
• Ändern von Schriftgrößen
• Hinzufügen von Standardbreiten für Inhalte
• Verwalten von benutzerdefinierten CSS (Cascading Style Sheets) Eigenschaften. CSS wird verwendet, um das visuelle Erscheinungsbild und die Formatierung von HTML-Dokumenten zu definieren.
• Zuweisen von Template-Teilen zu Template-Part-Bereichen

Da die Entwicklung von Gutenberg voranschreitet, unterscheiden sich die verfügbaren Optionen mit theme.json in WordPress zwischen Version 5.8 (wo Version 1 von theme.json verwendet wird) und Version 5.9+ (wo Version 2 von theme.json verwendet wird) sowie dem Gutenberg-Plugin.

Optionen erklärt

Mit diesen detaillierteren Anpassungsoptionen, die jetzt für Anfänger und fortgeschrittene WordPress-Entwickler verfügbar sind, sprechen wir sowohl darüber, welche sie sind als auch warum sie für Sie vorteilhaft sein könnten.

Aktivieren oder Deaktivieren von Funktionen wie Initialen, Blockabständen, Rändern und benutzerdefinierten Zeilenhöhen

Drop Caps (eine Stiltechnik, bei der der erste Buchstabe eines Absatzes eine größere Schriftgröße hat), Blockabstand (der Raum innerhalb des Blocks, der zwischen dem Element/Inhalt und der Blockgrenze liegt und alle Seiten des Elements umgibt), Ränder und benutzerdefinierte Zeilenhöhen können Ihren Seiten ein markanteres und sogar formelleres Aussehen verleihen, je nachdem, wie Sie es schaffen, sie zu gestalten.

Hinzufügen mehrerer Farbpaletten, Verläufe und Duotonfilter für Fotos

Die richtige Farbpalette – oder mehrere Paletten – kann dazu beitragen, die vermarktbare Identität Ihrer Marke und Ihrer Website zu definieren und zu verbessern, und Verläufe (Hintergründe aus zwei Farben, die ineinander übergehen) können Ihrer Website eine dynamischere Identität verleihen als die Verwendung von nur einfarbigen Seiten. Duotone-Filter können auf Fotos angewendet werden, die Sie auf Ihre Website hochgeladen haben, und reduzieren die Anzahl der Farben im Foto auf nur zwei – eine für die dunklen Teile des Fotos und eine weitere für die hellen Teile. Indem Sie diese Ressourcen in den Einstellungen Ihres WordPress-Themas verwenden, können die Farbschemata Ihrer Website formell, gemäßigt oder avantgardistisch sein – nur durch Ihre Vorstellungskraft begrenzt.

Schriftgrößen ändern

Manchmal können die Schriftarten in Ihrem gewählten Thema der spezifischen Identität, dem Ton oder der Haltung, die Sie vermitteln möchten, entsprechen, aber die verfügbaren Schriftgrößen sind möglicherweise nicht passend. Sie können zu klein oder zu groß sein. Indem Sie die Möglichkeit haben, die Größen zu ändern, können Sie jeden Aspekt des Aussehens der Kopie Ihrer Website genau auf das Image Ihrer Marke abstimmen.

Standardbreiten für Inhalte hinzufügen

Die Inhaltsbreite ist ein Thema-Merkmal, bei dem Sie die Standard- oder maximal zulässige Breite (Größe) für jeglichen Inhalt im Thema festlegen können, wie Einbettungen und zu Beiträgen hinzugefügte Bilder. Wenn Sie Standardbreiten festlegen, kann WordPress Einbettungscodes auf spezifische Größen im frontend skalieren und große Bilder einfügen, ohne den Hauptinhaltsbereich zu sprengen.

Verwalten von benutzerdefinierten CSS (Cascading Style Sheet)-Eigenschaften.

Wenn Sie Zeit damit verbracht haben, mit CSS zu arbeiten, fragen Sie sich sicherlich, warum Sie Ihre eigenen CSS in dem radikal anderen JSON-Format schreiben möchten. In einem Wort: Flexibilität.

Angenommen, Sie haben sich für eine Farbe, Waldgrün, für Ihre Website entschieden, die Ihnen wirklich gefällt. Mit CSS müssten Sie den Farbcode überall dort hinzufügen, wo Sie diese Farbe verwenden möchten. Kein großes Problem, oder?

Nun sagen wir, dass Sie einige Wochen später einen etwas dunkleren Farbton von Waldgrün finden, den Sie viel lieber verwenden würden. Mit CSS müssen Sie zurückgehen und alle Instanzen des „alten“ Waldgrün-Farbcode mit dem neuen ersetzen.

Aber indem Sie theme.json verwenden, müssten Sie die Farbdefinition nur einmal in der JSON-Datei aktualisieren, um sie auf Ihrer gesamten Website zu ändern.

Template-Teile den Template-Teilbereichen zuweisen

Seitenvorlagen sind Dateien, die steuern, wie eine bestimmte Seite aussieht, und sie können verwendet werden, um bestimmte Seitenlayouts auf verschiedene Seiten Ihrer Website anzuwenden. In WordPress gibt es auch Vorlagenteile, die als kleinere strukturelle Abschnitte einer Seitenvorlage fungieren.

Wenn Sie sich die Dateien Ihres Themes anschauen, werden Sie normalerweise Vorlagenteile für Dinge wie Kopfzeilen oder Fußzeilen sehen. theme.json ermöglicht es Ihnen, Vorlagenteile den drei verfügbaren Platzierungsbereichen innerhalb einer Vorlage zuzuweisen: Allgemein, Kopfzeile und Fußzeile.

Umzuwandeln oder nicht umzuwandeln – das ist hier die Frage

Nun, da Sie ein Verständnis für die Konfigurationsoptionen des WordPress-Themas durch die theme.json-Datei erlangt haben, möchten wir auf eine letzte Sache eingehen: die Umwandlung eines klassischen Themas in ein Block-Thema und die Probleme, die Sie beim Konvertieren berücksichtigen sollten.

Block-Themes in WordPress bieten eine Reihe von Vorteilen, da sie entwickelt wurden, um sowohl die Skalierbarkeit als auch die Leistung zu verbessern.

• Block-Themen verbessern die Ladeleistung, indem sie die Stile nur für die Blöcke laden, die auf einer Seite hinzugefügt wurden.
• Bei Block-Themen ist es nicht erforderlich, Stylesheets manuell für das frontend und die Editoren in die Warteschlange zu stellen.
• theme.json behandelt alle Aspekte von add_theme_support(), was zu weniger Zeitverlust beim Arbeiten in PHP führt.
• Zugänglichkeitsfunktionen wie „Zum Inhalt springen“, Tastaturnavigation und Landmarks werden automatisch generiert, ohne zusätzlichen Code hinzuzufügen.
• Mit einem Block-Thema kann ein Endbenutzer alle Teile seiner Website bearbeiten, ohne irgendeinen Code anzufassen.
• Mit der Styles-Schnittstelle können Benutzer Farben und Typografie für die Website und für alle Blöcke, die sie verwenden, anpassen.

Allerdings ist die Umwandlung eines klassischen Themes in ein Block-Theme nicht ohne Risiken.

• Das Umwandeln eines klassischen Themes in ein Block-Theme kann Child-Themes beeinflussen, die ein klassisches Theme erwarten. Berücksichtigen Sie die potenziellen Auswirkungen — oder erstellen Sie ein neues Projekt mit einem neuen Themennamen — bevor Sie die Umwandlung durchführen.
• theme.json erfordert WordPress Version 5.8 oder später. Infolgedessen wurde die Unterstützung für Internet Explorer 11 eingestellt, als WordPress 5.8 veröffentlicht wurde. Wenn also Ihr klassisches Theme IE11 unterstützt — oder Sie Besucher haben, die IE11 verwenden — kann das Umwandeln in ein Block-Theme potenziell die Erfahrung Ihrer Besucher beeinträchtigen.

Professionelle Hilfe verfügbar!

Obwohl das Anpassen Ihrer WordPress-Themes mit Optionen über eine theme.json Datei für einen Anfänger oder fortgeschrittenen WordPress-Entwickler durchaus machbar sein mag, sind Sie sich vielleicht noch nicht zu 100% sicher, dass dies ein Schritt ist, den Sie alleine gehen möchten. Keine Angst, denn wenn Sie sich für einen der drei DreamPress verwalteten WordPress-Hosting-Pläne von DreamHost anmelden, erhalten Sie automatisch Zugang zu unserem Elite-Team von vollständig internen WordPress-Experten, die rund um die Uhr verfügbar sind, um Ihnen bei diesem und jedem anderen Bestandteil Ihrer Entwicklungsreise zu helfen!