WordPress-Theme-Entwickler können eine theme.json Datei verwenden, um einen Prozess zu rationalisieren, der früher weitgehend auf PHP basierte. Du kannst aber auch weiterhin deine HTML-, JavaScript- und PHP-Kenntnisse nutzen, um deine Themes zu erstellen – und CSS ist dabei keine Ausnahme. Du verwendest die benutzerdefinierten CSS-Eigenschaften in theme.json. Das kann die Designphase verbessern und bietet mehr Flexibilität.
In diesem Leitfaden befassen wir uns mit den benutzerdefinierten CSS-Eigenschaften und untersuchen, wie sie mit WordPress und theme.json zusammenarbeiten. Doch bevor wir dazu kommen, fassen wir theme.json und Full Site Editing (FSE) zusammen und erklären, wie CSS in diesen neuen Designansatz passt.
Wie theme.json mit WordPress funktioniert
Die Datei theme.json wurde erstmals in WordPress 5.8 eingeführt. Sie ist eine revolutionäre Art, WordPress-Themes zu gestalten, indem sie die JSON-Syntax nutzt, um eine Konfigurationsdatei zu erstellen. WordPress liest diese und wendet die Ergebnisse an, ohne dass viel PHP, CSS oder JavaScript nötig ist.
Die globalen Einstellungen und Stile in FSE steuern verschiedene visuelle Aspekte deines Themes. Dazu können typische Farbpaletten und Typografie gehören, aber auch Layout-Optionen und individuelle Block- und Elementstile.
Während FSE intuitiv, leistungsstark, anpassungsfähig und einfach zu bedienen ist, kann theme.json dazu beitragen, die Lücke zwischen den Rollen des Endnutzers und des Entwicklers zu schließen. Fast jede Option, die dir theme.json bietet, ist auch im Site Editor sichtbar.
Die Verwendung von theme.json bietet viele Vorteile bei der Erstellung von WordPress-Themes. Dafür gibt es ein paar Gründe:
- Du hast einen zentralen Ort für die Designkonfiguration deines Themes, was die Verwaltung und Aktualisierung erleichtert.
- Es gibt weniger Unklarheiten zwischen dem Frontend, dem Site Editor und der Codebasis des Themes.
- Die Verwendung von
theme.jsonbietet Kompatibilität mit der Zukunft der WordPress-Entwicklung und des Designs. - Die in WordPress integrierte Funktionalität bedeutet, dass der Nutzer weniger benutzerdefiniertes CSS anwenden muss.
Werfen wir einen Blick darauf, wie theme.json mit den globalen Einstellungen und Stilen von FSE zusammenhängt.
Eine Einführung in die globalen Einstellungen und Stile von FSE
FSE steht für eine neue Ära der WordPress-Theme-Entwicklung, und die globalen Einstellungen und Stile stehen dabei im Vordergrund. Sie ermöglichen es den Nutzern, fast jeden Aspekt des Erscheinungsbildes einer Website über den Site Editor anzupassen.
Hier kannst du Aspekte des Layouts deines Themes mit Optionen anpassen, für die früher CSS oder ein Plugin eines Drittanbieters für den Seitenaufbau erforderlich waren. Das Ändern von Rändern, Auffüllungen und Umrandungen sind Beispiele, aber es gibt noch viel mehr.
Du kannst viele dieser Funktionen sogar auf theme.json (oder in der eigenen block.json Datei eines Blocks) aktivieren oder deaktivieren. So kannst du nicht nur die Benutzeroberfläche, sondern auch das gesamte Design der Website anpassen.
Die Optionen, die dir zur Verfügung stehen, sind zwar umfangreich, decken aber möglicherweise nicht alle Bedürfnisse ab. Das gilt besonders, wenn du ein Theme von Grund auf neu erstellst. Hier können benutzerdefinierte CSS-Eigenschaften Abhilfe schaffen.
Benutzerdefinierte CSS-Eigenschaften verstehen
In PHP, JavaScript und fast allen anderen Programmiersprachen werden die Werte der verschiedenen Elemente in deinem Code in Variablen gespeichert. Du kannst zum Beispiel Werte wie Namen, Daten und Zahlen speichern und sie in deinem Programm verwenden.
CSS3-Variablen – oder benutzerdefinierte CSS-Eigenschaften, wie wir sie in diesem Beitrag nennen – werden von den meisten aktuellen Browsern unterstützt. Der Internet Explorer unterstützt sie nicht, ebenso wenig wie Opera Mini. Die großen Browser unterstützen sie jedoch alle.
Mit benutzerdefinierten CSS-Eigenschaften kannst du Werte speichern, die du in deinem Stylesheet wiederverwenden kannst. Auf diese Weise kannst du ein dynamischeres und flexibleres CSS erstellen. Du kannst mehrere Stilregeln aktualisieren, indem du einen einzigen Wert änderst.
Das Konzept der CSS-Variablen ist nicht ganz neu. Preprozessoren wie Sass nutzen ähnliche Funktionen. Nimm zum Beispiel die folgende Sass:
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-colorDies wird zu typischem CSS verarbeitet:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}Bei den benutzerdefinierten CSS-Eigenschaften wird dies jedoch direkt an den Browser weitergegeben. Das bietet einige Vorteile:
- Dynamische Aktualisierungen. Im Gegensatz zu den meisten Präprozessorvariablen kannst du die benutzerdefinierten CSS-Eigenschaften mit JavaScript „on the fly“ aktualisieren.
- Kaskadierender Charakter. Die benutzerdefinierten Eigenschaften folgen der CSS-Kaskade, was dir mehr Flexibilität und eine kontextbewusste Gestaltung ermöglicht.
Benutzerdefinierte Eigenschaften sind auch leistungsfähiger, da sie weniger Code-Redundanz aufweisen. Kleinere Stylesheets bedeuten schnellere Ladezeiten.
Die Syntax für benutzerdefinierte CSS-Eigenschaften
Wie bei typischen Präprozessorvariablen ist die Syntax für benutzerdefinierte CSS-Eigenschaften einfach. Sie verwendet doppelte Bindestriche anstelle von Dollarzeichen, um eine Eigenschaft anzugeben:
:root {
--primary-color: #007bff;
}Mit der Funktion var() kannst du diese Eigenschaften dann den Elementen zuweisen:
.button {
background-color: var(--primary-color);
}Beachte, dass du benutzerdefinierte Eigenschaften auch mit der Eigenschaft @ zuweisen kannst. Aber wie du gleich sehen wirst, vereinfacht WordPress diesen Prozess.
Wo du benutzerdefinierte CSS-Eigenschaften verwenden kannst
Vielseitigkeit ist das Gebot der Stunde, wenn es um benutzerdefinierte CSS-Eigenschaften geht. Mit WordPress und theme.json hast du mehrere Möglichkeiten, sie zu verwenden:
- Voreinstellungen: Du kannst Voreinstellungen für Farben, Schriftarten und Abstände festlegen.
- Blockstile: Einzelne Blöcke können benutzerdefinierte Eigenschaften für ein einheitliches Styling verwenden.
- Globale Stile: Benutzerdefinierte Eigenschaften sind von unschätzbarem Wert für die standortweite Gestaltung.
Du kannst vollständig benutzerdefinierte Eigenschaften für jeden gewünschten Zweck erstellen. Sehen wir uns ein praktisches Beispiel dafür an, wie du benutzerdefinierte Eigenschaften in deiner theme.json Datei verwenden kannst:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"line-height": {
"body": 1.5,
"heading": 1.2
}
}
},
"styles": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--body)"
},
"blocks": {
"core/heading": {
"typography": {
"lineHeight": "var(--wp--custom--line-height--heading)"
}
}
}
}
}Hier definieren wir eine Farbvorgabe und verwenden die Eigenschaft custom, um line-height Werte für die Seitenüberschriften und den Textkörper zu definieren. WordPress generiert CSS-Eigenschaften für die Elemente, die du mit custom definierst. Weiter unten können wir diese benutzerdefinierten Eigenschaften verschiedenen Stilen, Einstellungen, Blöcken und mehr zuweisen.
Die Vorteile der benutzerdefinierten CSS-Eigenschaften
Vielleicht hast du schon eine Vorstellung davon, wie dir die benutzerdefinierten CSS-Eigenschaften bei der Entwicklung von Themes helfen können. Trotzdem gibt es eine ganze Reihe von Vorteilen zu beachten.
Wir haben bereits über Modularität und Wiederverwendbarkeit gesprochen. Alle gemeinsamen Werte, die du als benutzerdefinierte Eigenschaften definierst, fördern die Konsistenz und verringern die Redundanz. Diese Redundanz führt zu einer besseren potenziellen Leistung deines Themes.
Für den Endnutzer bieten die benutzerdefinierten Eigenschaften mehrere Vorteile:
- Vereinfachte Anpassung. Nutzer und Websitebesitzer können ein Theme anpassen, ohne komplexe CSS-Kenntnisse haben zu müssen. Sobald du Variablen über
theme.jsonfreigibst, können die Nutzer über den Site Editor auf die Einstellungen zugreifen. - Bessere Kompatibilität mit FSE. Die benutzerdefinierten Eigenschaften entsprechen den FSE-Prinzipien, sodass du flexiblere und dynamischere Themes entwerfen kannst.
- Einfachere Wartung und Updates. Wenn du gemeinsame Werte in deinem Theme aktualisieren musst, bedeutet eine benutzerdefinierte Eigenschaft, dass du sie nur an einer Stelle ändern musst. Das vereinfacht die Wartung und macht Aktualisierungen und Optimierungen überschaubarer.
Insgesamt können benutzerdefinierte Eigenschaften den Workflow bei der Entwicklung deines Themes verbessern. Ihre Festlegung ist außerdem einfacher als die Verwendung typischer CSS-Variablen.
So definierst du CSS-Eigenschaften in der theme.json
Kommen wir nun zu den praktischen Aspekten der Definition und Verwendung von benutzerdefinierten CSS-Eigenschaften in theme.json. Der erste Schritt besteht darin zu lernen, wie man sie schreibt.
Syntax und Benennungskonventionen
WordPress bietet die Eigenschaft custom an, um bei der Definition zu helfen. Sie ist etwas einfacher zu verwenden als die Eigenschaft @ oder Definitionen innerhalb von Pseudoklassen und verwendet das Standardformat Schlüssel/Wert:
{
"settings": {
"custom": {
"property-name": "value"
}
}
}Hinter den Kulissen verarbeitet WordPress diese Definition und erzeugt eine benutzerdefinierte CSS-Eigenschaft mit doppelten Bindestrichen:
--wp--custom--<custom-element>--wp--custom-- wird immer Teil deiner CSS-Eigenschaft sein und keine Groß- und Kleinschreibung verwenden. Wenn du z. B. lineHeight als benutzerdefinierte Eigenschaft definierst, macht WordPress daraus „Groß- und Kleinschreibung:“
--wp--custom--line-heightWenn es um die Namenskonventionen geht, kannst du die Groß- und Kleinschreibung verwenden, wenn du möchtest. Wir empfehlen jedoch die Groß- und Kleinschreibung für deine benutzerdefinierten Eigenschaftsnamen. Das entspricht den WordPress-Namenskonventionen, verbessert die Lesbarkeit und verringert die Anzahl der Verarbeitungsfehler.
Hinweis: Bei den benutzerdefinierten CSS-Eigenschaften werden doppelte Bindestriche verwendet, weil die CSS-Arbeitsgruppe des W3C dich ermutigen möchte, Sass zu verwenden (das Dollarzeichen zur Definition von Eigenschaften verwendet). Auf diese Weise hast du die Möglichkeit, deine Designs mit beidem zu verbessern.
WordPress definiert bereits einige benutzerdefinierte Eigenschaften – oder zumindest haben Themes diese Option, dies zu tun. Das bedeutet, dass du CSS-Variablen in theme.json ohne explizite Deklaration sehen wirst:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "var(--wp--preset--color--primary)",
"name": "Primary"
}
]
},
"custom": {
"spacing": {
"small": "1rem",
"medium": "2rem",
"large": "3rem"
}
}
},
"styles": {
"spacing": {
"blockGap": "var(--wp--custom--spacing--medium)"
}
}
}In diesem Beispiel definieren wir eine Primärfarbe, indem wir eine bestehende Farbvoreinstellung verwenden. Dann definieren wir einige benutzerdefinierte Abstandseigenschaften und setzen sie mit var().
Das bedeutet, dass wir die Werte nicht in theme.json fest einprogrammieren müssen. Außerdem können die Nutzer/innen diese Werte im Site-Editor aktualisieren und im gesamten Theme übernehmen.
Voreinstellungen vs. benutzerdefinierte Eigenschaften
Natürlich kannst du auf theme.json auch Voreinstellungen für Farben, Schriftgrößen und andere gängige Theme-Elemente definieren. Andererseits kannst du benutzerdefinierte Eigenschaften für jeden Wert verwenden, den du in deinem Theme wiederverwenden möchtest.
Der größte Unterschied liegt hier in den Namenskonventionen und der Zugänglichkeit. Die Nutzer können auf die benutzerdefinierten Eigenschaften im Site-Editor nicht zugreifen, ohne dass du etwas dafür tun musst. Mit Voreinstellungen generiert WordPress CSS, das ähnlich aussieht wie die benutzerdefinierten Eigenschaften:
{
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#007bff",
"name": "Primary"
}
]
},
"custom": {
"fontFamily": {
"base": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
"headings": "'Helvetica Neue', Helvetica, Arial, sans-serif"
}
}
}
}Sobald WordPress dies verarbeitet hat, kannst du die Unterschiede erkennen:
--wp--preset--primary: #007bff;
--wp--custom--font-family--base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
--wp--custom--font-family--headings: "'Helvetica Neue', Helvetica, Arial, sans-serif";Beachte, dass bei der weiteren Verschachtelung von Eigenschaften doppelte Bindestriche verwendet werden, auch wenn die Groß- und Kleinschreibung in Kamelschreibweise umgewandelt wurde.
Globales und blockspezifisches CSS versus benutzerdefinierte CSS-Eigenschaften
Bei klassischem WordPress würdest du zusätzliche und benutzerdefinierte CSS im Frontend verwenden, um Elemente innerhalb deines Themes zu gestalten. Das ist bei theme.json und FSE immer noch der Fall, obwohl der Ansatz anders ist als bei den benutzerdefinierten CSS-Eigenschaften.
Wenn du den Website-Editor aufrufst und den Bildschirm Stile aufrufst, wirst du den Abschnitt Zusätzliches CSS sehen. Dieser Bereich funktioniert ähnlich wie das benutzerdefinierte CSS-Panel in klassischen WordPress-Installationen:
Hier kannst du globale CSS-Anpassungen zu einem Theme hinzufügen. In Wirklichkeit ist es aber eine Möglichkeit, den Nutzern die Möglichkeit zu geben, CSS hinzuzufügen. Du kannst dies auch nutzen, um kleine Änderungen vorzunehmen, die kein ganzes Stylesheet erfordern.
Innerhalb von theme.json verwendest du die Eigenschaft css, um zusätzliches CSS zu definieren, das du hinzufügen möchtest:
{
"version": 3,
"styles": {
"css": "margin: 0"
}
}Beachte, dass du am Ende von CSS-Anweisungen keine Semikolons verwenden musst. Du kannst auch benutzerdefinierte CSS-Anweisungen für Blöcke festlegen:
{
"version": 2,
"styles": {
"blocks": {
"core/post-title": {
"css": "letter-spacing: 1px;"
}
}
}
}Jedes Mal, wenn du eine solche CSS-Anweisung in theme.json einstellst, wird sie in den zusätzlichen CSS-Feldern des Site Editors angezeigt. Bedenke jedoch, dass nichts, was du mit css deklarierst, eine benutzerdefinierte CSS-Eigenschaft ist.
Der Ampersand-Selektor (&) verwenden
Ähnlich wie Sass unterstützt auch WordPress den Ampersand-Selektor, allerdings mit ein paar Unterschieden. In diesem Fall ist es eine gute Möglichkeit, verschachtelte Elemente und Eigenschaften zu definieren. Das kann wichtig sein, wenn du CSS-Eigenschaften für einzelne Blöcke deklarieren willst.
Nimm zum Beispiel das Folgende:
…
"styles": {
"blocks": {
"core/table": {
"css": "color:#333 & th{ background:#f5f5f5; }"
}
…Hier wird eine Textfarbe und eine Hintergrundfarbe für das Tabellenkopfelement definiert. Wenn WordPress das verarbeitet, erhältst du sauberes, einfaches CSS:
.wp-block-table > table {
color: #333;
}
.wp-block-table > table th {
background: #f5f5f5;
}Ampersand-Selektoren eignen sich hervorragend, wenn du das CSS, das du anvisierst, erweitern möchtest. Eine verständliche Art, sich den Selektor vorzustellen, ist, dass er hilft, deine CSS-Elemente zu trennen. Nimm zum Beispiel das Folgende:
{
"version": 3,
"styles": {
"blocks": {
"core/avatar": {
"css": "& img {border-radius: 999px}"
}
}
}
}Das fügt einem Avatar einen Rahmenradius hinzu und gibt das CSS so aus, wie du es dir vorstellst:
.wp-block-image img {
border-radius: 999px;
}Ohne den Ampersand-Selektor würde WordPress deine Deklarationen jedoch miteinander verbinden:
…
.wp-block-imageimg
…Die Verwendung des Ampersand-Selektors für deine benutzerdefinierten CSS-Eigenschaften wird etwas sein, das du regelmäßig verwenden wirst.
Die Rolle von Kinsta bei der Unterstützung der modernen WordPress-Entwicklung
Die Wahl deines Hostings ist genauso wichtig wie jede Programmiersprache, jeder Präprozessor oder jedes andere technische Element. Ohne einen guten Hosting-Anbieter an deiner Seite wirst du nicht von der Leistung und den Tools von theme.json oder FSE profitieren können.
Kinsta kann dank unserer Entwicklungstools ein zentraler Bestandteil deines gesamten Workflows sein. Du kannst mit DevKinsta beginnen – unserer lokalen Entwicklungsumgebung, die Docker-Container nutzt, um deine WordPress-Installation zu isolieren:
Eine nützliche Funktion von DevKinsta ist die Möglichkeit, Daten zwischen deinem lokalen Rechner und deinen Kinsta-Staging-Umgebungen zu pushen und zu ziehen:
So kannst du deine Themes in einer produktionsähnlichen Umgebung testen, bevor du sie verteilst. Wenn du mit benutzerdefinierten CSS-Eigenschaften arbeitest, kannst du sicherstellen, dass sie in verschiedenen Kontexten funktionieren. Die API von Kinsta kann deine CI/CD-Pipeline unterstützen, wenn du bereit bist, live zu gehen.
Andere Aspekte der Kinsta-Architektur helfen dir bei deiner gesamten Entwicklungsarbeit. Kinsta unterstützt zum Beispiel Git, was die Versionskontrolle deiner Themedateien, einschließlich theme.json, erleichtert. Wenn du benutzerdefinierte Eigenschaften iterierst oder einfach mit verschiedenen Konfigurationen experimentierst, solltest du wissen, dass du eine Rollback-Option hast.
Und wenn du dich entscheidest, dein Theme auf einem Kinsta-Server zu verwenden, erhöht unser Edge Caching die Leistung von theme.json um bis zu 80 Prozent. Eine Website, die unabhängig vom Browser des Nutzers schnell läuft, stellt sicher, dass die benutzerdefinierten Ergänzungen sofort angezeigt werden.
Zusammenfassung
So wie theme.json eine leistungsstarke Konfigurationsdatei für die Erstellung flexibler und wartbarer WordPress-Themes ist, sind auch die benutzerdefinierten CSS-Eigenschaften entscheidend für den Arbeitsablauf. So erstellst und deklarierst du CSS für Elemente, die der Site Editor nicht erreicht. Sie sind auch wichtig, wenn du deine eigenen Blöcke erstellst oder einfach einzigartige WordPress-Themes mit der ultimativen Anpassungstiefe entwickeln willst. Außerdem hast du die Möglichkeit, diese CSS über den Seiteneditor mit den Nutzern zu teilen.
Werden benutzerdefinierte CSS-Eigenschaften ein Teil deines Arbeitsablaufs bei der Theme-Entwicklung sein? Wenn ja, wie wirst du sie nutzen? Teile deine Erkenntnisse in den Kommentaren unten mit!
Schreibe einen Kommentar