Block-Themes und theme.json geben dir eine Menge Flexibilität, was den Anschein erwecken könnte, dass Child-Themes überflüssig sind. Aber sie sind in vielen Fällen immer noch unverzichtbar.
Ein Child-Theme ist immer noch die richtige Wahl, wenn du das Design deiner Website wirklich kontrollieren willst, ohne die Kerndateien des Parent-Themes anzufassen.
In diesem Artikel verwenden wir das Twenty Twenty-Five-Theme als Basis und zeigen dir, wie du ein Block-Chip-Theme mit eigenem style.css und functions.php. Du lernst, wie du Stile sicher überschreibst, eigene Blockstile definierst und sogar deine eigenen Stilvariationen einrichtest. Das ist nicht nur ein Styling-Trick, sondern ein solider Schritt auf dem Weg zu deinem eigenen vollständigen Block-Theme.
Auch wenn diese Übung einfach erscheint, gehen wir auf einige Feinheiten ein, über die du stolpern kannst. Beginnen wir mit der Erstellung eines benutzerdefinierten Child-Themes und der Implementierung einer benutzerdefinierten Stilvariation.
Registrierung eines Block Child Themes
Die Registrierung eines Block Child Themes ist viel einfacher als die Registrierung eines klassischen Themes.
Technisch gesehen musst du es gar nicht registrieren. Die Registrierung erfolgt automatisch, wenn ein richtig benannter Child-Theme-Ordner sowohl eine theme.json Datei als auch eine style.css Datei enthält.
Warum ist also die style.css Datei noch notwendig?
Wie bisher enthält sie einen erforderlichen Header (siehe unten), der Metadaten enthält, die WordPress zur Identifizierung des Themes verwendet, einschließlich seines Namens und des Parent-Themes, das es erweitert. Während Stile und Einstellungen jetzt in theme.json behandelt werden, spielt style.css immer noch eine wichtige Rolle dabei, dass WordPress dein Theme erkennt, auch wenn es kein eigentliches CSS enthält.
/*
Theme Name: Twenty Twenty-Five Child
Description: Child theme for the Twenty Twenty-Five theme
Template: twentytwentyfive
*/Eine functions.php Datei ist nicht erforderlich, es sei denn, du möchtest Skripte einbinden oder PHP-basierte Funktionen hinzufügen. Das werden wir später tun.
Wenn du dich mit theme.json nicht auskennst oder eine kurze Auffrischung brauchst, schau dir unseren Leitfaden zum Arbeiten mit Eigenschaften und Schlüssel-Wert-Paaren in theme.json an.
Wir nehmen drei grundlegende Änderungen an unserem Child-Theme vor.
Zunächst aktualisieren wir die globalen Hintergrund- und Textfarben und gestalten den Button-Block.
In der Datei theme.json des Child-Themes (die als Standardstil dient) definieren wir Folgendes:
{
"version": 3,
"settings": {
"color": {
"palette": [
{
"name": "Black",
"slug": "black",
"color": "#000000"
},
{
"name": "Yellow",
"slug": "yellow",
"color": "#FFFF00"
},
{
"name": "Purple",
"slug": "purple",
"color": "#800080"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--black)",
"text": "var(--wp--preset--color--yellow)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--purple)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--yellow)",
"width": "2px",
"style": "solid"
}
}
}
}
}Während die Hintergrund- und Textfarben für alle Stilvarianten gelten, gilt das Styling des Button-Blocks nur für die Standardvariante.
Stilvariationen außer Kraft setzen
Um das gleiche Button-Styling in verschiedenen Variationen anzuwenden, ist es am besten, eine .json Datei zu erstellen, die der Namenskonvention für die Variationen des Elternthemas entspricht.
Um z. B. die Umrandung der Schaltflächen in der Stilvariation Evening zu überschreiben, erstellst du eine Datei mit dem Namen 01-evening.json im Hauptverzeichnis deines Child-Themes (oder in einem Unterordner von /styles):
{
"version": 3,
"title": "Evening",
"styles": {
"blocks": {
"core/button": {
"border": {
"color": "var(--wp--preset--color--white)",
"width": "3px",
"style": "dashed"
}
}
}
}
}Hier haben wir einen breiteren, gestrichelten Rahmen verwendet, um die Schaltfläche hervorzuheben. Da es sich um spezifischere Stile handelt, setzen sie die allgemeinen Stile von theme.json außer Kraft.
Eine benutzerdefinierte Stilvariation erstellen
Gehen wir noch einen Schritt weiter und erstellen eine völlig neue Stilvariation namens Kinsta. Diese Variation erbt die globalen Einstellungen aus der theme.json Datei des Child-Themes und wendet ihre eigene Farbpalette und das Styling der Schaltflächen an:
Speichere die folgende Datei unter /styles/kinsta.json:
{
"version": 3,
"title": "Kinsta",
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#261e1e"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#ff2900"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--primary)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--white)",
"width": "4px",
"style": "dotted"
}
}
}
}
}Diese „Kinsta“-Variante gibt uns einen eigenen Look, der vollständig in die Struktur des Child-Themes integriert ist.
Wie und warum man die style.css in die Warteschlange stellt
In einem echten Block-Theme wie Twenty Twenty-Five müssen die Stylesheets weder für das Parent- noch für das Child-Theme manuell per PHP in die Warteschlange gestellt werden. Der WordPress-Kern generiert CSS dynamisch auf der Grundlage der Datei theme.json.
Wenn du jedoch benutzerdefinierte Styles in eine style.css Datei schreiben willst, musst du sie manuell einreihen.
// Frontend styles
add_action('wp_enqueue_scripts', function() {
// Enqueue parent theme stylesheet
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
// Enqueue child theme stylesheet
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array('parent-style')
);
});Dieser Code stellt sicher, dass sowohl die Parent- als auch die Child-Dateien style.css im Frontend geladen werden.
Um sicherzugehen, dass deine Styles richtig eingebunden werden, füge das folgende CSS in die style.css Datei deines Child-Themes ein:
body {
color: #ffff00;
background: #0000ff;
}Dadurch erhalten alle Style-Variationen einen blauen Hintergrund und eine gelbe Textfarbe – nur auf dem Frontend.
Ein einfacher Anwendungsfall für styles.css
Du fragst dich vielleicht: Warum überhaupt CSS verwenden? Ist es nicht theme.json, das alles regelt?
Nicht ganz.
Zum Beispiel unterstützt theme.json keine Pseudoklassen wie :hover. Um einen Hover-Effekt für alle Schaltflächen zu erstellen, kannst du dieses CSS verwenden:
.wp-block-button a:hover {
background: #ffffff;
color: #0000ff;
}Dies gilt für alle Schaltflächenblöcke in allen Varianten im Frontend.
Angenommen, du möchtest diesen Hover-Effekt auf eine bestimmte Variante oder einen bestimmten Block beschränken. In diesem Fall musst du fortschrittlichere Methoden verwenden, z. B. bedingte Body-Klassen, Blockfilter oder gezieltes blockspezifisches CSS.
Hinzufügen einer Blockstilvariation
Sehen wir uns nun an, wie du mit PHP und CSS eine neue Stilvariation zum Button-Block hinzufügen kannst.
Wenn du daran denkst, ein variations Array zu theme.json hinzuzufügen, wird das für diesen Anwendungsfall nicht funktionieren. Während theme.json das Styling auf globaler und Blockebene handhabt, müssen Blockstilvariationen – wie alternative Schaltflächenstile – anders registriert werden.
Wir erstellen eine neue Stilvariante mit dem Namen Alternative Outline, die neben den Standardstilen Fill und Outline in der Benutzeroberfläche des Editors erscheint und auf dem Frontend korrekt dargestellt wird.
Registriere den Stil in PHP
Füge den folgenden Code in die functions.php Datei deines Child-Themes ein. Er registriert den Stil nach dem Laden von Core, aber bevor eine Seite gerendert wird:
// Register "Alternative Outline" button style
add_action('init', function() {
register_block_style(
'core/button',
[
'name' => 'alternative-outline',
'label' => __('Alternative Outline', 'twenty-twenty-five-child'),
]
);
});Benutzerdefinierte Stile zur style.css hinzufügen
Definiere nun die Stile für diese Variante – einschließlich eines :hover Status – in der style.css Datei deines Child-Themes:
.wp-block-button.is-style-alternative-outline .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--yellow);
border: 2px dotted var(--wp--preset--color--yellow);
transition: all 0.7s ease-in-out;
}
.wp-block-button.is-style-alternative-outline .wp-block-button__link:hover {
background-color: var(--wp--preset--color--yellow);
color: var(--wp--preset--color--black);
}Die color Variablen, die hier verwendet werden, sind in deiner theme.json Palette definiert, um die Konsistenz auf der gesamten Website zu gewährleisten.
Blockstilvariationen mit JSON erstellen
Seit WordPress 6.6 kannst du Blockstil-Variationen vollständig mit JSON registrieren – kein PHP erforderlich.
Hier ist ein Beispiel, das dem Gruppenblock eine neue Variation namens Purple Background hinzufügt. Sie wird in der Seitenleiste des Editors mit einer gestylten Vorschau angezeigt:
Erstelle eine Datei namens block.json im Ordner /styles/purple-background/ deines Themes:
{
"version": 3,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"title": "Purple Background",
"slug": "section-purple",
"blockTypes": ["core/group"],
"styles": {
"border": {
"radius": "20px"
},
"color": {
"background": "#800080",
"text": "#eeeeee"
},
"spacing": {
"padding": {
"top": "var(--wp--preset--spacing--50)",
"right": "var(--wp--preset--spacing--50)",
"bottom": "var(--wp--preset--spacing--50)",
"left": "var(--wp--preset--spacing--50)"
}
}
}
}Die Variante mit lila Hintergrund erscheint in der Seitenleiste des Editors, wie in der Abbildung unten gezeigt:
Wenn du mit mehreren Stilvariationen arbeitest, ist es ratsam, sie in einem Unterordner /styles abzulegen. In diesem Fall lautet der Dateipfad: /styles/purple-background/block.json.
Hier sind noch ein paar Anmerkungen zur JSON-Methode:
- Diese Methode erfordert kein PHP und kann das Gewicht der Seite reduzieren, da WordPress die relevanten CSS nur bei Bedarf lädt.
- Da wir mit einem Child-Theme von Twenty Twenty-Five arbeiten, das bereits
theme.jsonund dynamisches Styling verwendet, müssen wir die Stile nicht manuell einreihen. - Einige Blöcke unterstützen möglicherweise noch nicht alle Styling-Optionen über JSON. Wenn du auf Abwärtskompatibilität Wert legst, kannst du optional einen PHP-Fallback mit
register_block_style()hinzufügen.
Zusammenfassung
Blockthemes bieten eine bemerkenswerte Flexibilität und eröffnen unzählige Entwicklungsmöglichkeiten. In diesem Artikel wollten wir dir die Welt der Child-Themes für Block-Themes vorstellen – und dich hoffentlich dazu inspirieren, deine eigenen Ideen zu verwirklichen.
Außerdem haben wir zwei Ansätze für das Hinzufügen von benutzerdefinierten Blockstilvariationen untersucht – einen mit PHP und CSS und einen anderen nur mit JSON.
Wie du dir vorstellen kannst, kann jedes Beispiel, das wir behandelt haben, zu mehreren alternativen Wegen führen. WordPress ist reich an Optionen und bietet oft mehrere Möglichkeiten, ein und dasselbe Problem zu lösen.
Du könntest z. B. ein Block-Theme erstellen, das theme.json für die Einstellungen verwendet, sich aber beim Styling ganz auf style.css verlässt und so die breiteren Möglichkeiten von CSS nutzt. Oder du kannst Stile in eine Warteschlange stellen, damit sie nur geladen werden, wenn eine bestimmte Variante verwendet wird.
Die Möglichkeiten sind endlos!
Bei Kinsta bieten wir eine ganze Reihe von grundlegenden und fortgeschrittenen Entwicklungstools an, mit denen du deinen WordPress-Workflow beschleunigen, bereinigen und verbessern kannst. Teste Kinsta 30 Tage lang kostenlos.
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
