Mit WordPress 5.9 wurde eine neue Art und Weise eingeführt, Websites zu erstellen: Full Site Editing. Das war ein Wendepunkt für WordPress-Nutzer/innen, denn es hat die Art und Weise, wie WordPress-Themes erstellt werden und funktionieren, komplett verändert.
Mit der Einführung von FSE wurde auch eine Unterscheidung zwischen Themes getroffen, die die neuen Funktionen zur Website-Erstellung vollständig unterstützen, auch bekannt als Block-Themes, und den traditionellen PHP-basierten Themes, die wir jetzt Classic Themes nennen.
Im Laufe der Zeit wurden viele Funktionen, die für Block-Themes entwickelt wurden, auf Classic-Themes ausgeweitet. So entstand eine dritte Kategorie von Themes, die Hybrid-Themes, die immer noch mit der Logik und Struktur der klassischen Themes aufgebaut sind, aber verschiedene Funktionen unterstützen, die für Block-Themes entwickelt wurden.
In diesem Artikel geht es um Hybrid-Themes, ihre wichtigsten Funktionen, wie Entwickler sie verbessern können und wann man sie den Block-Themes vorziehen sollte.
Lasst uns eintauchen!
Klassische oder hybride Themes?
Vor der Einführung von Block-Themes mit Twenty Twenty-Two und WordPress 5.9 gab es keine so genannten klassischen Themes. Der Begriff wurde eingeführt, um sie von Block-Themes zu unterscheiden. Klassische Themes sind alle WordPress-Themes ohne Unterstützung für Blockfunktionen.
Heute ist es nicht mehr so einfach, reine Classic Themes zu finden, denn seit Version 5.9 wurden diese Themes um viele Funktionen erweitert, die für Block Themes entwickelt wurden, so dass sich die Bearbeitungs- und Gestaltungserfahrungen der beiden Theme-Kategorien im Laufe der Zeit immer mehr angenähert haben.
Trotzdem unterscheidet sich die Art und Weise, wie du mit Hybrid-Themes arbeitest, immer noch von Block-Themes.
Grundlegende Funktionen von Hybrid-Themes
Mit Hybrid-Themes kann deine Website die Bearbeitungsmöglichkeiten des WordPress-Blockeditors nutzen, während sie gleichzeitig mit herkömmlichen WordPress-Plugins und Funktionen wie Widgets, Menüs und Seitenvorlagen kompatibel bleibt.
Der WordPress Customizer
Hybrid-Themes unterstützen in der Regel den WordPress Customizer, eine visuelle Konfigurationsumgebung, mit der du das Erscheinungsbild deiner WordPress-Website feinabstimmen und deine Änderungen in Echtzeit in der Vorschau anzeigen kannst.
Das Standard-Theme Twenty Twenty-One ist ein gutes Beispiel für ein Hybrid-Theme, das die gängigsten Customizer-Einstellungen bietet, darunter Site Identity, Farben & Dark Mode, Hintergrundbild, Menüs, Widgets, Homepage-Einstellungen und mehr.
Themes können bestimmte Customizer-Steuerelemente registrieren, sodass die Funktionalität je nach Theme variiert. Die folgende Abbildung zeigt den Customizer für Neve, ein leichtes Hybrid-Theme von ThemeIsle.
Themes können auch fortgeschrittene Funktionen registrieren, die den Nutzern eine detaillierte Kontrolle über bestimmte Aspekte des Website-Designs geben. Neve bietet zum Beispiel einen leistungsstarken Builder für die Erstellung von Kopf- und Fußzeilen.
Widgets blockieren
In Hybrid-Themes kannst du dank des blockbasierten Widgets-Editors Widget-Bereiche mit Blöcken anpassen. Er wurde erstmals mit WordPress 5.8 eingeführt und du kannst ihn mit jedem klassischen Theme ausprobieren, das Widgets verwendet.
Die Oberfläche des Widgets-Editors ist ähnlich wie die des Beitragseditors. Das folgende Bild zeigt einen Bildblock im Footer-Widget-Bereich des Twenty Twenty-One-Themes.
Klassische Widgets wie Kategorien, Archive, Letzte Beiträge oder Letzte Kommentare werden in Hybrid-Themes weiterhin unterstützt. Der Widget-Editor ergänzt die klassischen WordPress-Widgets, indem er es Nutzern ermöglicht, ihre eigenen Widgets über seine blockbasierte Oberfläche zu erstellen.
Style Book und Blockmuster
Mit den jüngsten Änderungen, die mit WordPress 6.8 eingeführt wurden, können Hybrid-Themes, die Editorstile unterstützen, das Style Book verwenden, eine visuelle Schnittstelle, die es Nutzern ermöglicht, eine Vorschau aller Blöcke zu sehen, die auf ihren Websites verwendet werden können, ohne dass sie diese Blöcke in ihren Inhalten verwenden müssen.
Du kannst auf das Style Book in Hybrid-Themes über Erscheinungsbild > Design > Stile zugreifen.
Die folgende Abbildung zeigt das Style Book für das Hybridtheme Kadence.
In der gleichen Oberfläche kannst du Muster durchsuchen und verwalten.
Für Hybrid-Themes, die sie unterstützen, sind Muster für die Verwendung im Post-Editor verfügbar. Dieser ist bei allen WordPress-Installationen seit 5.0 standardmäßig aktiviert, es sei denn, du hast ihn mit dem Classic Editor Plugin deaktiviert.
Theme-Struktur: Ein Überblick für Entwickler
Classic und Block Themes unterscheiden sich nicht nur in Bezug auf die Funktionalität für den Endnutzer. Sie unterscheiden sich auch aus struktureller Sicht.
Klassische Themes
Klassische Themes beruhen auf einigen wenigen Schlüsseldateien, von denen die wichtigste die Datei style.css ist. Sie enthält die Metadaten des Themes und bestimmt das Erscheinungsbild der Seite im Frontend.
Zusätzlich zum Theme-Stylesheet haben klassische Themes in der Regel eine functions.php datei , mit der die Funktionalität und der Support des Themes aufgebaut werden.
Klassische Themes basieren auch auf PHP-Vorlagen, die die Struktur einer Seite und ihre Hauptbereiche definieren: Header, Body, Sidebars und Footer. Wenn ein/e Nutzer/in einen Beitrag oder eine Seite aufruft, bestimmt WordPress anhand eines strengen Regelsystems, der so genannten Vorlagenhierarchie, welche Vorlage verwendet wird, um den Inhalt auf dem Bildschirm darzustellen. Zu den am häufigsten verwendeten Vorlagen gehören index.php, page.php, single.php, und viele andere.
Klassische Themes können bestimmte PHP-Funktionen (Action- und Filter-Hooks) verwenden, die zu bestimmten Zeitpunkten im Leben von WordPress ausgeführt werden und es Entwicklern ermöglichen, die Funktionalität eines Themes mit PHP-Code in der functions.php Datei eines Child-Themes zu erweitern.
Du kannst dir vorstellen, dass die Anpassung eines klassischen Themes für Benutzer/innen ohne Programmierkenntnisse besonders schwierig ist.
Block-Themes
Block Themes benötigen ebenfalls eine style.css, um WordPress die Theme-Metadaten zur Verfügung zu stellen, aber sie verlassen sich stark auf eine theme.json Datei, eine Konfigurationsdatei, die globale Stile und Einstellungen für ein Theme definiert. Sie enthält ein JSON-Objekt, dessen Eigenschaften die anfänglichen Einstellungen festlegen, die für die Erstellung des Layouts und das Aussehen der Seiten der Website benötigt werden.
Block Themes verwenden auch Vorlagen und Vorlagenteile, die sich jedoch strukturell von den klassischen Theme-PHP-Vorlagen unterscheiden. In Block Themes sind Vorlagen und Vorlagenteile HTML-Dateien, die bestimmte Markups und JSON-Objekte enthalten. Nehmen wir zum Beispiel die Vorlage home.html des Standardthemes Twenty Twenty-Five:
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:pattern {"slug":"twentytwentyfive/hidden-blog-heading"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/template-query-loop"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->Diese Vorlage besteht aus strukturierten Elementen in Form von HTML-Tags und Kommentaren. Die Kommentare können sich auf andere typische Elemente eines Block-Themes beziehen, z. B. auf Template-Teile und Muster, die aus Blöcken oder anderen verschachtelten Elementen bestehen.
Hinzufügen von Blockfunktionen zu Hybridthemen
Wie bereits erwähnt, musst du bei klassischen Themen benutzerdefinierten Code hinzufügen, um das Layout oder die Funktionalität einer Website zu ändern, was oft mit Vorlagendateien oder functions.php verbunden ist. Im Gegensatz dazu ermöglichen Blockthemen auch Nicht-Entwicklern eine größere Kontrolle über das Layout und das Aussehen einer Website.
Hybrid-Themes bieten weniger Blockfunktionen als Block-Themes, können aber durch Muster und globale Stile eine bessere Kontrolle über Layout und Stil bieten.
Sehen wir uns einige leistungsstarke Blockfunktionen an, die du in dein klassisches Theme integrieren kannst, und lernen wir, wie du sie effektiv einsetzt.
Globale Stile
Mit WordPress 5.8 wurden die Globalen Stile eingeführt, eine visuelle Schnittstelle, die es Nutzern ermöglicht, das Aussehen ihrer Website über eine zentrale Schnittstelle zu steuern, und Entwicklern, die Stile ihrer WordPress-Websites über eine theme.json Datei zu kontrollieren.
Um diese Funktion in deinem Hybrid-Theme zu aktivieren, fügst du einfach eine theme.json Datei in den Stammordner des Themes ein. Schauen wir uns einige der wichtigsten Funktionen an, die du mit theme.json zu deinem Hybrid-Theme hinzufügen kannst.
Typografie
Nehmen wir an, du möchtest dein klassisches Theme um die Unterstützung für drei Schriftfamilien erweitern. In diesem Beispiel werden wir Twenty Twenty-One verwenden.
Erstelle zunächst einen Ordner fonts unter assets und lade einige Schriftarten deiner Wahl hoch. Wir fügen drei Schriftarten hinzu: Manrope, Fira Code und Beiruti. Du kannst diese Schriftarten aus dem Twenty Twenty-One-Theme beziehen.
Öffne deinen Texteditor und erstelle die folgende theme.json:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
},
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
],
"fontWeight": "200 800",
"fontStyle": "normal",
"fontFamily": "Manrope"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": ""Fira Code", monospace",
"fontFace": [
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
],
"fontWeight": "300 700",
"fontStyle": "normal",
"fontFamily": ""Fira Code""
}
]
},
{
"name": "Beiruti",
"slug": "beiruti",
"fontFamily": "Beiruti, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/beiruti/Beiruti-VariableFont_wght.woff2"
],
"fontWeight": "300 700",
"fontStyle": "normal",
"fontFamily": "Beiruti"
}
]
}
]
}
}
}Mit der Eigenschaft settings.typography.fontFamilies kannst du eine beliebige Anzahl von benutzerdefinierten Schriftfamilien registrieren. Für jede Schriftart musst du die folgenden Eigenschaften deklarieren:
name: Einen menschenlesbaren Titel für die Schriftfamilie.slug: Ein erforderlicher Slug für die Schriftfamilie. Er wird an eine generierte CSS-Eigenschaft angehängt:--wp--preset--font-family--{slug}.fontFamily: Ein erforderlicher Wert, der auf den CSS-Wert font-family abgebildet wird.fontFace: Ein optionales Array von Schriftarten, die auf die CSS-At-Regel@font-faceabgebildet werden. Dies ist nur bei benutzerdefinierten Webfonts erforderlich.
Speichere deine theme.json und rufe dein WordPress-Dashboard auf. Erstelle einen neuen Beitrag oder eine neue Seite, füge einen Absatz mit einem Beispieltext hinzu und öffne die Block-Seitenleiste. Klicke auf die Schaltfläche Typografieoptionen und wähle Schriftart. Du solltest Optionen für die Schriftfamilien finden, die du gerade zu deinem Theme hinzugefügt hast.
Die folgenden Bilder zeigen, wie die Seitenleiste des Absatzblocks vor und nach dem Hinzufügen der oben gezeigten theme.json aussieht.
Die globalen Stileigenschaften variieren je nach Theme. Abgesehen vontypography ermöglichen es dir die allgemein unterstützten Eigenschaften, die Farbpalette, das Layout und die benutzerdefinierten Stile zu steuern. Die folgenden Beispiele wurden mit Twenty Twenty-One getestet.
Farbpalette, Farbverläufe und Duotone-Filter
Mit der Eigenschaft settings.color kannst du auf der Ebene des Themes oder einzelner Blöcke Unterstützung für benutzerdefinierte Farben hinzufügen. Der folgende Code fügt zum Beispiel zwei Farben zur Standardpalette hinzu:
settings: {
"color": {
"palette": [
{
"name": "Dark blue",
"slug": "dark-blue",
"color": "#1e73be"
},
{
"name": "Bright green",
"slug": "bright-green",
"color": "#81d742"
}
]
},
}Du kannst die Eigenschaft settings.color.palette verwenden, um so viele Farben zu registrieren, wie du möchtest.
Du kannst auch Unterstützung für Farbverläufe und Duotone-Filter hinzufügen:
settings: {
"color": {
"gradients": [
{
"gradient": "linear-gradient(135deg, #0073e6, #8fceff)",
"name": "Clear Sky",
"slug": "clear-sky"
},
{
"gradient": "linear-gradient(to right top, #ff8c00, #ff0080)",
"name": "Vivid Sunset",
"slug": "vivid-sunset"
}
]
}
}
settings: {
"color": {
"duotone": [
{
"colors": [ "#0A2F51", "#F5D04E" ],
"name": "Deep Sea Gold",
"slug": "deep-sea-gold"
},
{
"colors": [ "#3A0CA3", "#FFB703" ],
"name": "Purple Amber",
"slug": "purple-amber"
},
{
"colors": [ "#1B4332", "#BAE6C4" ],
"name": "Forest Mist",
"slug": "forest-mist"
},
{
"colors": [ "#000000", "#FFFFFF" ],
"name": "Black and White",
"slug": "black-and-white"
}
]
}
}
Layout
Du kannst auch die Standard-Layouteinstellungen anpassen. Mit der Eigenschaft settings.layout kannst du die Standardbreite des Inhalts und die Breite der Ausrichtung festlegen. Hier ist ein Beispiel:
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
}
}Einen detaillierteren Überblick übertheme.json findest du in unserem umfassenden Tutorial zu theme.json und in der offiziellen WordPress-Dokumentation.
Blockstil-Variationen
Erstmals mit WordPress 5.3 eingeführt, ermöglichen Blockstil-Variationen Entwicklern, alternative Stile für bestimmte Blöcke zu erstellen.
Kurz gesagt, sind Blockstile CSS-Klassen, die dem Wrapper-Element eines Blocks in der Form .is-style-{name} hinzugefügt werden.
Blockstil-Variationen erscheinen im Stil-Panel der Block-Seitenleiste und ermöglichen es dir, mit einem einzigen Klick einen Stil für den Block auszuwählen.
Du kannst deine Blockstilvariationen auf verschiedene Weise registrieren.
Erstens kannst du Blockstile mit der PHP-Funktionregister_block_style() registrieren. Du könntest zum Beispiel die folgende Stilvariation in der Funktionsdatei deines Themes registrieren:
if ( function_exists( 'register_custom_block_style' ) ) {
register_block_style(
'core/image',
array(
'name' => 'custom',
'label' => __( 'Custom', 'text-domain' ),
'inline_style' => '.wp-block-image.is-style-custom img { border-radius: 12px; }',
)
);
}
add_action( 'init', 'register_custom_block_style' ); register_block_style() nimmt zwei Argumente an:
$block_name: Der Name eines Blocktyps oder ein Array von Blocktypen$style_properties: Ein Array, das die Stileigenschaften enthält. In diesem Beispiel haben wirname,labelundinline_styleverwendet.
Der obige Code erzeugt eine Blockstilvariation mit einer einzigen CSS-Eigenschaft. Wenn du diesen Code in die functions.php Datei deines Themes oder Child-Themes einfügst, wird im Blockstile-Panel eine Schaltfläche angezeigt, über die du den Stil mit einem einzigen Klick festlegen kannst.
Das folgende Bild zeigt die Blockstilvariation im Frontend. Das Theme ist immer noch Twenty Twenty-One.
Du kannst deine Inline-Stile in deinen PHP-Code einfügen, wie im obigen Beispiel, aber dein Code kann schnell schwer zu pflegen werden, wenn die Stile komplexer und aufwendiger werden. In diesen Fällen kannst du die Stilvariation wie oben beschrieben registrieren, aber die Stile in deiner theme.json Datei definieren.
Im folgenden Beispiel erstellen wir eine dunkelblaue Stilvariation für den Überschriftenblock.
Zuerst registrierst du die Stilvariation in der Funktionsdatei des Themes:
add_action('init', 'register_block_style_labels');
function register_block_style_labels() {
$block_types = ['core/heading'];
if (function_exists('register_block_style')) {
foreach ($block_types as $block_type) {
register_block_style(
$block_type,
array(
'name' => 'dark-blue-bg',
'label' => __('Dark Blue', 'twentytwentyone')
)
);
}
}
}Als Nächstes definierst du die Variationsstile in deiner theme.json Datei:
"settings": {
"styles": {
"blocks": {
"core/heading": {
"variations": {
"dark-blue-bg": {
"color": {
"background": "#2860a6",
"text": "#ffffff"
},
"spacing": {
"padding": {
"top": "0.3em",
"right": "0.4em",
"bottom": "0.3em",
"left": "0.4em"
}
}
}
}
}
}
}
}Jetzt können die Nutzer deines Themes zwischen zwei Stilvarianten für den Überschriftenblock wählen, wie in der folgenden Abbildung gezeigt.
Blockvariationen
Blockvariationen sind alternative Versionen eines registrierten Blocks. Während Blockstil-Variationen (oder Blockstile) benutzerdefinierte Versionen eines Blockstils sind, die Nutzer/innen mit einem einzigen Klick zum Inhalt hinzufügen können, sind Blockvariationen alternative Versionen der Einstellungen eines Blocks. Sie ermöglichen es den Nutzern, schnell einen Block mit vorkonfigurierten Einstellungen einzufügen, ohne für jeden Block dieselben Einstellungen vornehmen zu müssen.
Die Blockvariationen-API ermöglicht es Hybrid Themes, Blockvariationen über JavaScript zu registrieren. In den einfachsten Fällen reicht es aus, ein Skript zu erstellen und es in die Warteschlange zu stellen. Wenn du jedoch viel mit JavaScript und Gutenberg-Blöcken arbeitest, solltest du Build-Tools in deinen Arbeitsablauf einbauen. (Empfohlene Lektüre.)
Angenommen, du möchtest eine Blockvariation mit einer Reihe von vorkonfigurierten Optionen erstellen, damit deine Variation schnell in deine Beiträge oder Seiten eingefügt werden kann, ohne dass eine zusätzliche Konfiguration erforderlich ist.
Der erste Schritt besteht darin, eine leere JavaScript-Datei zu erstellen und sie in den Editor zu laden. Du musst sie in der functions.php Datei deines Themes mit wp_enqueue_script() und dem enqueue_block_editor_assets Aktionshaken einreihen.
add_action( 'enqueue_block_editor_assets', function () {
wp_enqueue_script(
'my-block-variations',
get_theme_file_uri( 'assets/js/block-variations.js' ) . '?cache_bust=' . time(),
array(
'wp-blocks',
'wp-dom-ready',
'wp-i18n',
'wp-edit-post'
),
wp_get_theme()->get( 'Version' ),
true
);
} );Im obigen Code haben wir ?cache_bust=' . time() verwendet, um der URL von block-variations.js einen eindeutigen Zeitstempel hinzuzufügen (z. B. block-variations.js?cache_bust=1698765432). Dies ist besonders während der Entwicklung nützlich, da es sicherstellt, dass der Browser, der Server oder das CDN immer die neueste Version des Skripts lädt und verhindert, dass eine veraltete Cache-Version die Anzeige von Änderungen blockiert.
Als Nächstes musst du deine Blockvariation in deinem Skript mit der Funktion registerBlockVariation registrieren, die von der Blockvariationen-API bereitgestellt wird.
Hier ist die Funktionssignatur:
const registerBlockVariation = ( blockName, variation )blockName: Der Name des Blocks (z.B.core/query.)variation: Ein Objekt, das eine Variation für den Blocktyp beschreibt.
Das variation Objekt kann einen der folgenden Parameter enthalten:
name(string) Ein eindeutiger Bezeichner für die Variation.title:(string) Ein von Menschen lesbarer Titel der Variation.description:(string) Eine detaillierte Beschreibung.category(String) Eine Kategorie, die in Suchmasken verwendet wird.keywords(Array) Eine Reihe von Begriffen, die den Nutzern helfen, die Variation zu entdecken.icon(WPIcon) Ein Symbol, das im Block-Inserter angezeigt wird.isDefault(Boolean) Ob die aktuelle Variante die Standardvariante ist. Der Standardwert ist false.isActive(Funktion/Array) Eine Funktion oder ein Array von Blockattributen, mit denen bestimmt wird, ob die Variation aktiv ist, wenn der Block ausgewählt wird. OhneisActivewüsste WordPress nicht, wie es deine Variation von einem Standardblock oder anderen Variationen unterscheiden kann, was zu inkonsistentem Verhalten im Editor führen würde.attributes(Objekt) Attributwerte, die die Standardeinstellungen des Blocks außer Kraft setzen.innerBlocks(Array[]) Anfangskonfiguration des verschachtelten Blocks.example(Object) Strukturierte Daten für die Blockvorschau. Auf undefiniert setzen, um die Vorschau zu deaktivieren.scope(WPBlockVariationScope[]) Die Liste der Bereiche, auf die die Variation anwendbar ist. Wenn sie nicht angegeben wird, werden alle verfügbaren Scopes angenommen. Verfügbare Optionen sindblock,inserterundtransform. Standardmäßig werdenblockundinserterverwendet.
Jetzt kannst du das JavaScript in die Datei block-variations.js einfügen:
wp.blocks.registerBlockVariation( 'core/heading', {
name: 'custom-centered-text',
title: 'Custom Centered Text',
description: 'This is a block variation with custom attributes.',
attributes: {
level: 2,
textAlign: 'center',
placeholder: 'Add your text here',
style: {
color: {
text: '#1e73be',
background: '#81d742'
}
}
},
isActive: ( blockAttributes ) => {
return (
blockAttributes.level === 2 &&
blockAttributes.textAlign === 'center' &&
blockAttributes.style?.color?.text === '#1e73be' &&
blockAttributes.style?.color?.background === '#81d742'
);
},
icon: 'airplane',
scope: [ 'inserter' ]
} );Dieser Code fügt einen neuen Blocktyp mit einem Flugzeugsymbol zum Block-Inserter hinzu. Wenn du auf das Flugzeug klickst, wird der Seite eine neue Überschriften-Blockvariante mit deinen eigenen Einstellungen hinzugefügt. Wir haben die Überschriftenebene festgelegt (H2), den Text zentriert, einen Platzhalter gesetzt und die Text- und Hintergrundfarben der Überschrift definiert.
Hinweis: Damit dieser Code wie erwartet funktioniert, musst du sicherstellen, dass dein Hybrid-Theme die Editor-Funktionen wie 'editor-color-palette', editor-styles und andere unterstützt. Eine ausführlichere Liste der unterstützten Funktionen findest du in der Block Variations API.
Blockmuster
Blockmuster sind vorgefertigte Gruppen von Blöcken, die du zu deinem Inhalt hinzufügen und über die Oberfläche des Blockeditors anpassen kannst.
Block-Themes bieten in der Regel eine variable Anzahl von Blockmustern, die du direkt über den Block-Inserter zu deinem Inhalt hinzufügen kannst. Hybrid-Themes können die Unterstützung für Muster hinzufügen, damit auch Nutzer von klassischen Themes von dieser leistungsstarken Funktion profitieren können.
Du kannst einen Ordner patterns im Stammverzeichnis deines Themes erstellen und dort deine Blockmuster einfügen oder du kannst sie in der functions.php oder anderen .php Dateien deines Themes registrieren.
Um für Ordnung zu sorgen, kannst du eine Datei inc/block-patterns.php erstellen und sie mit folgendem Code in die function.php deines Themes einbinden:
require get_template_directory() . '/inc/block-patterns.php';Danach kannst du dein Muster im Editor erstellen, den Code kopieren und dein Muster und deine Musterkategorie in inc/block-patterns.php mit den Funktionen register_block_pattern_category und register_block_pattern() registrieren:
if ( function_exists( 'register_block_pattern_category' ) ) {
function my_hybrid_theme_register_block_pattern_category() {
register_block_pattern_category(
'myhybridtheme',
array( 'label' => esc_html__( 'My Hybrid Theme', 'myhybridtheme' ) )
);
}
add_action( 'init', 'my_hybrid_theme_register_block_pattern_category' );
}
if ( function_exists( 'register_block_pattern' ) ) {
function my_hybrid_theme_register_block_pattern() {
// My pattern
register_block_pattern(
'myhybridtheme/huge-heading',
array(
'title' => esc_html__( 'Huge heading', 'myhybridtheme' ),
'categories' => array( 'myhybridtheme' ),
'viewportWidth' => 1440,
'blockTypes' => array( 'core/heading' ),
'content' => '<!-- wp:heading {"textAlign":"center","align":"wide","fontSize":"gigantic","style":{"typography":{"lineHeight":"1.2"}}} --><h2 class="alignwide has-text-align-center has-gigantic-font-size" style="line-height:1.2">' . esc_html__( 'A simple Heading in a pattern', 'myhybridtheme' ) . '</h2><!-- /wp:heading -->',
)
);
}
add_action( 'init', 'my_hybrid_theme_register_block_pattern' );
}Du kannst dein Muster in deinem WordPress-Dashboard unter Darstellung > Design > Muster > Mein Hybrid-Theme in der Vorschau anzeigen und in deinen Inhalten verwenden.
Du kannst dein Muster auch duplizieren, exportieren und in andere WordPress-Websites importieren.
Template-Teile
Obwohl Hybrid Themes die klassischen PHP-Vorlagen und Vorlagenteile verwendet, kannst du in der functions.php Datei deines Themes Unterstützung für Blockvorlagenteile hinzufügen:
function my_hybrid_theme_setup() {
add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'my_hybrid_theme_setup' );Sobald du die Unterstützung für Vorlagenteile hinzugefügt hast, kannst du jedes Vorlagenteil mit der Funktionblock_template_part in jede Vorlagendatei deines Hybrid Themes einfügen.
Schauen wir uns ein praktisches Beispiel an. Beginne damit, dass du einen Ordner /parts im Stammverzeichnis deines Themes erstellst und eine Datei footer.html dorthin hochlädst. Für dieses Beispiel haben wir die Fußzeile aus dem Twenty Twenty-Five-Theme kopiert:
<!-- wp:group {"align":"full","className":"is-style-section-5","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-style-section-5" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group">
<!-- wp:site-title {"level":2,"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"}},"fontSize":"x-large"} /-->
<!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|20"}},"fontSize":"x-large","layout":{"type":"flex","justifyContent":"center"},"ariaLabel":"Social media"} -->
<!-- wp:navigation-link {"label":"Facebook","url":"#"} /-->
<!-- wp:navigation-link {"label":"Instagram","url":"#"} /-->
<!-- wp:navigation-link {"label":"X","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:group -->
<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">
Designed with <a href="https://wordpress.org" rel="nofollow">WordPress</a>
</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->Jetzt kannst du diesen Vorlagenteil mit der Funktion block_template_part in eine klassische Vorlage einbinden:
<?php block_template_part( 'footer' ); ?> Du kannst ihn z.B. in die footer.php Datei von Twenty Twenty-One einfügen. Das folgende Bild zeigt das Ergebnis auf dem Bildschirm.
Du kannst auch Vorlagenteile in eine Blockvorlage einfügen, indem du den folgenden Code verwendest:
<!-- wp:template-part {"slug":"footer"} /--><!-- wp:template-part {"slug":"footer"} /-->
Du kannst z.B. den Code der Vorlage page.html von Twenty Twenty-Five kopieren:
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|60"}}}} /-->
<!-- wp:post-title {"level":1} /-->
<!-- wp:post-content {"align":"full","layout":{"type":"constrained"}} /-->
</div>
<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->Speichere diese Vorlage in deinem Ordner /templates und nenne sie page.html. WordPress wird sie automatisch entsprechend der Vorlagenhierarchie laden. Diese Vorlage enthält automatisch die Vorlagenteile header.html und footer.html aus dem Ordner /parts deines Hybrid-Themes.
Wann sollte man Hybrid-Themes den Block-Themes vorziehen?
Ein Hybrid-Theme kann in den folgenden Fällen die beste Wahl sein:
- Wenn du einige moderne Funktionen von Block-Themes nutzen möchtest, ohne eine bestehende Website komplett umzugestalten.
Mit Hybridthemen kannst du die Vorteile von Blockfunktionen wie dem Blockeditor, globalen Stilen und Blockmustern nutzen. Hybridthemen unterstützen auch die APIs des Blockeditors, wie die Block Bindings API, die Interactivity API und die HTML API. Das bedeutet, dass du moderne Websites erstellen kannst, ohne eine komplexe Umstellung vornehmen zu müssen. - Wenn du die Kompatibilität mit klassischen Plugins oder Widgets beibehalten, aber nicht auf einige leistungsstarke Funktionen von Block Themes verzichten möchtest.
Ältere Versionen einiger Plugins können Kompatibilitätsprobleme mit Block Themes haben, z. B. ältere Versionen von Contact Form 7, NextGEN Gallery, Custom Post Type UI und anderen Plugins. Obwohl es empfohlen wird, Plugins auf die neuesten Versionen zu aktualisieren, um Sicherheitslücken zu vermeiden, kann es sein, dass auf einigen WordPress-Websites noch ältere Versionen eines Plugins installiert sind. Wenn du noch nicht bereit bist, alle deine Plugins zu aktualisieren, kannst du die Installation eines Hybrid-Themes in Betracht ziehen. - Wenn du versuchst, den besten Kompromiss zwischen Design und Leistung zu finden.
Einige beliebte Hybrid-Themes sind auf Geschwindigkeit optimiert und können eine deutlich bessere Leistung als Block-Themes bieten. Dennoch unterstützen sie den No-Code/Low-Code-Ansatz von Block-Themes und bieten ein besseres Designerlebnis als klassische Themes. Leistungsoptimierte Hybrid-Themes wie Neve oder Kadence ermöglichen es dir, modern aussehende Websites zu erstellen, ohne Kompromisse bei der Leistung einzugehen. - Wenn du einen reibungslosen Übergang zu FSE möchtest.
Manchmal kann die Umstellung von der alten auf die neue Designlogik einige Zeit in Anspruch nehmen, vor allem wenn du im Team an großen Websites arbeitest, und die Lernkurve ist ein Problem. Mit einem Hybrid-Theme kann dein Team mit Blockfunktionen experimentieren und gleichzeitig vertraute Design-Tools wie den Customizer und klassische PHP-Vorlagen nutzen.
Es gibt jedoch auch Szenarien, in denen Hybrid-Themes nicht die beste Option sind. Zum Beispiel:
- Wenn die Designtools einer Website wichtiger sind als die Gesamtleistung.
Wenn du bestimmte Funktionen der vollständigen Website-Bearbeitung nutzen möchtest, wie den Website-Editor, die vollständige Vorlagenbearbeitung über Blöcke und die Schnittstelle für globale Stile, ist ein Hybrid-Theme keine Option, da diese Funktionen in Hybrid-Themes nicht oder nur teilweise unterstützt werden. - Bei Headless WordPress Sites, die auf der WordPress REST API basieren.
In diesem Szenario sind Block-Themes zu bevorzugen, da Blockdaten leicht über die REST-API (siehe z. B. den Endpunkt/wp/v2/blocks) oder WPGraphQL zugänglich sind, während Hybrid-Themes die Komplexität erhöhen könnten. - Wenn ein No-Code-Ansatz für die Website-Erstellung bevorzugt wird.
Hybridthemen unterstützen nicht die Erstellung oder Bearbeitung von Vorlagen über den Website-Editor. Die Unterstützung für Vorlagenteile kann zwar hinzugefügt werden, ist aber derzeit begrenzt, und die Verwaltung der Vorlagen ist hauptsächlich PHP-basiert.
Unterm Strich gibt es keine eindeutige Regel für die Wahl zwischen Hybrid- und Block-Themes. Es hängt von vielen Faktoren ab, z. B. von den Fähigkeiten deines Teams, der Art der Website, die du erstellen willst, den Leistungsanforderungen, der Abwärtskompatibilität und vielem mehr.
Zusammenfassung
Full Site Editing und Block-Themes haben die Art und Weise, wie wir WordPress-Websites erstellen, dramatisch verändert. Die Block-Philosophie gibt den Nutzern mehr Möglichkeiten, komplexe Layouts zu erstellen und jeden Aspekt einer Website fein abzustimmen.
Wenn du aber noch nicht bereit bist, den Sprung zu wagen, weil deine Website möglicherweise nicht vollständig mit Block-Themes kompatibel ist oder weil sie bestimmte Funktionen eines klassischen Themes benötigt, sind Hybrid-Themes eine Option, die dir das Beste aus beiden Welten bietet, indem du einige leistungsstarke Funktionen von Block-Themes nutzen kannst, während die Kompatibilität mit den Funktionen von Plugins und klassischen Themes erhalten bleibt.
Ganz zu schweigen von der Leistung. Block-Themes können aufgrund des umfangreichen Block-Renderings und der Verwendung von JavaScript sehr ressourcenintensiv sein. Leistungsoptimierte Hybrid-Themes machen deine Website leichter und leistungsfähiger, indem sie die Belastung durch JavaScript reduzieren.
Carlo ist ein leidenschaftlicher Liebhaber von Webdesign und Frontend-Entwicklung. Er beschäftigt sich seit über 10 Jahren mit WordPress, auch in Zusammenarbeit mit italienischen und europäischen Universitäten und Bildungseinrichtungen. Er hat Dutzende von Artikeln und Leitfäden über WordPress geschrieben, die sowohl auf italienischen und internationalen Websites als auch in gedruckten Magazinen veröffentlicht wurden. Du kannst Carlo auf X und LinkedIn finden.
