{"id":73418,"date":"2025-06-12T07:50:18","date_gmt":"2025-06-12T06:50:18","guid":{"rendered":"https:\/\/kinqsta.com\/de\/?p=73418&preview=true&preview_id=73418"},"modified":"2025-06-16T15:09:10","modified_gmt":"2025-06-16T14:09:10","slug":"hybrid-themes","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/de\/blog\/hybrid-themes\/","title":{"rendered":"WordPress Hybrid-Themes: Ein Ansatz f\u00fcr Nutzer und Entwickler"},"content":{"rendered":"

Mit WordPress 5.9<\/a> wurde eine neue Art und Weise eingef\u00fchrt, Websites zu erstellen: Full Site Editing<\/a>. Das war ein Wendepunkt f\u00fcr WordPress-Nutzer\/innen, denn es hat die Art und Weise, wie WordPress-Themes erstellt werden und funktionieren, komplett ver\u00e4ndert.<\/p>\n

Mit der Einf\u00fchrung von FSE wurde auch eine Unterscheidung zwischen Themes getroffen, die die neuen Funktionen zur Website-Erstellung vollst\u00e4ndig unterst\u00fctzen, auch bekannt als Block-Themes, und den traditionellen PHP-basierten Themes, die wir jetzt Classic Themes nennen.<\/p>\n

Im Laufe der Zeit wurden viele Funktionen, die f\u00fcr 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\u00fctzen, die f\u00fcr Block-Themes entwickelt wurden.<\/p>\n

In diesem Artikel geht es um Hybrid-Themes, ihre wichtigsten Funktionen, wie Entwickler sie verbessern k\u00f6nnen und wann man sie den Block-Themes vorziehen sollte.<\/p>\n

Lasst uns eintauchen!<\/p>\n

\"A
Twenty Twenty-Two ist das erste WordPress-Theme, das Full Site Editing unterst\u00fctzt<\/figcaption><\/figure>\n
<\/div><\/kinsta-auto-toc>\n

Klassische oder hybride Themes?<\/h2>\n

Vor der Einf\u00fchrung von Block-Themes mit Twenty Twenty-Two<\/a> und WordPress 5.9 gab es keine so genannten klassischen Themes. Der Begriff wurde eingef\u00fchrt, um sie von Block-Themes zu unterscheiden. Klassische Themes sind alle WordPress-Themes ohne Unterst\u00fctzung f\u00fcr Blockfunktionen.<\/p>\n

\"Preview
Eine Vorschau auf das Twenty Twenty-One Hybrid Theme<\/figcaption><\/figure>\n

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\u00fcr Block Themes entwickelt wurden, so dass sich die Bearbeitungs- und Gestaltungserfahrungen der beiden Theme-Kategorien im Laufe der Zeit immer mehr angen\u00e4hert haben.<\/p>\n

Trotzdem unterscheidet sich die Art und Weise, wie du mit Hybrid-Themes arbeitest, immer noch von Block-Themes.<\/p>\n

Grundlegende Funktionen von Hybrid-Themes<\/h2>\n

Mit Hybrid-Themes kann deine Website die Bearbeitungsm\u00f6glichkeiten des WordPress-Blockeditors nutzen, w\u00e4hrend sie gleichzeitig mit herk\u00f6mmlichen WordPress-Plugins und Funktionen wie Widgets, Men\u00fcs und Seitenvorlagen kompatibel bleibt.<\/p>\n

Der WordPress Customizer<\/h3>\n

Hybrid-Themes unterst\u00fctzen in der Regel den WordPress Customizer<\/a>, eine visuelle Konfigurationsumgebung, mit der du das Erscheinungsbild deiner WordPress-Website feinabstimmen und deine \u00c4nderungen in Echtzeit in der Vorschau anzeigen kannst.<\/p>\n

Das Standard-Theme Twenty Twenty-One<\/a> ist ein gutes Beispiel f\u00fcr ein Hybrid-Theme, das die g\u00e4ngigsten Customizer-Einstellungen bietet, darunter Site Identity, Farben & Dark Mode, Hintergrundbild, Men\u00fcs, Widgets, Homepage-Einstellungen und mehr.<\/p>\n

\"The
Der Customizer mit dem Twenty Twenty-One-Theme<\/figcaption><\/figure>\n

Themes k\u00f6nnen bestimmte Customizer-Steuerelemente registrieren, sodass die Funktionalit\u00e4t je nach Theme variiert. Die folgende Abbildung zeigt den Customizer f\u00fcr Neve<\/a>, ein leichtes Hybrid-Theme von ThemeIsle.<\/p>\n

\"A
Eine Vorschau auf den Customizer f\u00fcr das WordPress-Theme Neve<\/figcaption><\/figure>\n

Themes k\u00f6nnen auch fortgeschrittene Funktionen registrieren, die den Nutzern eine detaillierte Kontrolle \u00fcber bestimmte Aspekte des Website-Designs geben. Neve bietet zum Beispiel einen leistungsstarken Builder f\u00fcr die Erstellung von Kopf- und Fu\u00dfzeilen.<\/p>\n

\"Neve
Neve hat einen Header-Builder im Customizer<\/figcaption><\/figure>\n

Widgets blockieren<\/h3>\n

In Hybrid-Themes kannst du dank des blockbasierten Widgets-Editors<\/a> Widget-Bereiche mit Bl\u00f6cken anpassen. Er wurde erstmals mit WordPress 5.8 eingef\u00fchrt<\/a> und du kannst ihn mit jedem klassischen Theme ausprobieren, das Widgets verwendet.<\/p>\n

\"The
Der Widgets-Bildschirm in Twenty Twenty-One<\/figcaption><\/figure>\n

Die Oberfl\u00e4che des Widgets-Editors ist \u00e4hnlich wie die des Beitragseditors. Das folgende Bild zeigt einen Bildblock im Footer-Widget-Bereich des Twenty Twenty-One-Themes.<\/p>\n

\"A
Der Widget-Editor bietet Blockfunktionen f\u00fcr klassische Widgets<\/figcaption><\/figure>\n

Klassische Widgets wie Kategorien, Archive, Letzte Beitr\u00e4ge oder Letzte Kommentare werden in Hybrid-Themes weiterhin unterst\u00fctzt. Der Widget-Editor erg\u00e4nzt die klassischen WordPress-Widgets, indem er es Nutzern erm\u00f6glicht, ihre eigenen Widgets \u00fcber seine blockbasierte Oberfl\u00e4che zu erstellen.<\/p>\n

Style Book und Blockmuster<\/h3>\n

Mit den j\u00fcngsten \u00c4nderungen, die mit WordPress 6.8 eingef\u00fchrt wurden<\/a>, k\u00f6nnen Hybrid-Themes, die Editorstile unterst\u00fctzen<\/a>, das Style Book<\/strong> verwenden, eine visuelle Schnittstelle<\/a>, die es Nutzern erm\u00f6glicht, eine Vorschau aller Bl\u00f6cke zu sehen, die auf ihren Websites verwendet werden k\u00f6nnen, ohne dass sie diese Bl\u00f6cke in ihren Inhalten verwenden m\u00fcssen.<\/p>\n

Du kannst auf das Style Book in Hybrid-Themes \u00fcber Erscheinungsbild<\/strong> > Design<\/strong> > Stile<\/strong> zugreifen.<\/p>\n

Die folgende Abbildung zeigt das Style Book f\u00fcr das Hybridtheme Kadence.<\/p>\n

\"The
Das Style Book f\u00fcr das Kadence-Hybridtheme<\/figcaption><\/figure>\n

In der gleichen Oberfl\u00e4che kannst du Muster durchsuchen und verwalten.<\/p>\n

\"Blocksy
Muster f\u00fcr das Blocksy-Theme<\/figcaption><\/figure>\n

F\u00fcr Hybrid-Themes, die sie unterst\u00fctzen, sind Muster f\u00fcr die Verwendung im Post-Editor<\/a> verf\u00fcgbar. Dieser ist bei allen WordPress-Installationen seit 5.0<\/a> standardm\u00e4\u00dfig aktiviert, es sei denn, du hast ihn mit dem Classic Editor Plugin deaktiviert<\/a>.<\/p>\n

\"The
Der Bereich Muster im Block-Inserter des Post-Editors mit dem Twenty-Theme Twenty-One<\/figcaption><\/figure>\n

Theme-Struktur: Ein \u00dcberblick f\u00fcr Entwickler<\/h2>\n

Classic und Block Themes unterscheiden sich nicht nur in Bezug auf die Funktionalit\u00e4t f\u00fcr den Endnutzer. Sie unterscheiden sich auch aus struktureller Sicht.<\/p>\n

Klassische Themes<\/h3>\n

Klassische Themes beruhen auf einigen wenigen Schl\u00fcsseldateien, von denen die wichtigste die Datei style.css<\/code> ist. Sie enth\u00e4lt die Metadaten des Themes<\/a> und bestimmt das Erscheinungsbild der Seite im Frontend.<\/p>\n

Zus\u00e4tzlich zum Theme-Stylesheet haben klassische Themes in der Regel eine functions.php<\/code> <\/a>datei <\/a>, mit der<\/span> die Funktionalit\u00e4t und der Support des Themes aufgebaut werden.<\/p>\n

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<\/a>, welche Vorlage verwendet wird, um den Inhalt auf dem Bildschirm darzustellen. Zu den am h\u00e4ufigsten verwendeten Vorlagen geh\u00f6ren index.php<\/code>, page.php<\/code>, single.php<\/code>, und viele andere.<\/p>\n

Klassische Themes k\u00f6nnen bestimmte PHP-Funktionen (Action- und Filter-Hooks<\/a>) verwenden, die zu bestimmten Zeitpunkten im Leben von WordPress ausgef\u00fchrt werden und es Entwicklern erm\u00f6glichen, die Funktionalit\u00e4t eines Themes mit PHP-Code in der functions.php<\/code> Datei eines Child-Themes<\/a> zu erweitern.<\/p>\n

Du kannst dir vorstellen, dass die Anpassung eines klassischen Themes f\u00fcr Benutzer\/innen ohne Programmierkenntnisse besonders schwierig ist.<\/p>\n

Block-Themes<\/h3>\n

Block Themes ben\u00f6tigen ebenfalls eine style.css<\/code>, um WordPress die Theme-Metadaten zur Verf\u00fcgung zu stellen, aber sie verlassen sich stark auf eine theme.json<\/code> Datei<\/a>, eine Konfigurationsdatei, die globale Stile und Einstellungen f\u00fcr ein Theme definiert. Sie enth\u00e4lt ein JSON-Objekt<\/a>, dessen Eigenschaften die anf\u00e4nglichen Einstellungen<\/a> festlegen, die f\u00fcr die Erstellung des Layouts und das Aussehen<\/a> der Seiten der Website ben\u00f6tigt werden.<\/p>\n

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<\/code> des Standardthemes Twenty Twenty-Five<\/a>:<\/p>\n

<!-- wp:template-part {\"slug\":\"header\"} \/-->\n\n<!-- wp:group {\"tagName\":\"main\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"var:preset|spacing|60\"}}},\"layout\":{\"type\":\"constrained\"}} -->\n<main class=\"wp-block-group\" style=\"margin-top:var(--wp--preset--spacing--60)\">\n\t<!-- wp:pattern {\"slug\":\"twentytwentyfive\/hidden-blog-heading\"} \/-->\n\t<!-- wp:pattern {\"slug\":\"twentytwentyfive\/template-query-loop\"} \/-->\n<\/main>\n<!-- \/wp:group -->\n\n<!-- wp:template-part {\"slug\":\"footer\"} \/--><\/code><\/pre>\n
Diese Vorlage besteht aus strukturierten Elementen in Form von HTML-Tags und Kommentaren. Die Kommentare k\u00f6nnen sich auf andere typische Elemente eines Block-Themes beziehen, z. B. auf Template-Teile und Muster, die aus Bl\u00f6cken oder anderen verschachtelten Elementen bestehen.<\/p>\n
Hinzuf\u00fcgen von Blockfunktionen zu Hybridthemen<\/h2>\n
Wie bereits erw\u00e4hnt, musst du bei klassischen Themen benutzerdefinierten Code hinzuf\u00fcgen, um das Layout oder die Funktionalit\u00e4t einer Website zu \u00e4ndern, was oft mit Vorlagendateien oder functions.php<\/code> verbunden ist. Im Gegensatz dazu erm\u00f6glichen Blockthemen auch Nicht-Entwicklern eine gr\u00f6\u00dfere Kontrolle \u00fcber das Layout und das Aussehen einer Website.<\/p>\n
Hybrid-Themes bieten weniger Blockfunktionen als Block-Themes, k\u00f6nnen aber durch Muster und globale Stile eine bessere Kontrolle \u00fcber Layout und Stil bieten.<\/p>\n
Sehen wir uns einige leistungsstarke Blockfunktionen an, die du in dein klassisches Theme integrieren kannst, und lernen wir, wie du sie effektiv einsetzt.<\/p>\n
<\/div><\/kinsta-auto-toc>\n
Globale Stile<\/h3>\n
Mit WordPress 5.8<\/a> wurden die Globalen Stile eingef\u00fchrt, eine visuelle Schnittstelle, die es Nutzern erm\u00f6glicht, das Aussehen ihrer Website \u00fcber eine zentrale Schnittstelle zu steuern, und Entwicklern, die Stile ihrer WordPress-Websites \u00fcber eine theme.json<\/code> Datei zu kontrollieren.<\/p>\n
Um diese Funktion in deinem Hybrid-Theme zu aktivieren, f\u00fcgst du einfach eine theme.json<\/code> Datei in den Stammordner des Themes ein. Schauen wir uns einige der wichtigsten Funktionen an, die du mit theme.json<\/code> zu deinem Hybrid-Theme hinzuf\u00fcgen kannst.<\/p>\n
Typografie<\/h4>\n
Nehmen wir an, du m\u00f6chtest dein klassisches Theme um die Unterst\u00fctzung f\u00fcr drei Schriftfamilien erweitern. In diesem Beispiel werden wir Twenty Twenty-One<\/a> verwenden.<\/p>\n
Erstelle zun\u00e4chst einen Ordner fonts<\/code> unter assets<\/code> und lade einige Schriftarten deiner Wahl hoch. Wir f\u00fcgen drei Schriftarten hinzu: Manrope<\/code>, Fira Code<\/code> und Beiruti<\/code>. Du kannst diese Schriftarten aus dem Twenty Twenty-One-Theme<\/a> beziehen.<\/p>\n
\"Three
Wir haben drei Schriftarten und eine theme.json-Datei zum Theme Twenty Twenty-One hinzugef\u00fcgt<\/figcaption><\/figure>\n
\u00d6ffne deinen Texteditor und erstelle die folgende theme.json<\/code>:<\/p>\n
{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n\t\"version\": 3,\n\t\"settings\": {\n\t\t\"layout\": {\n\t\t\t\"contentSize\": \"768px\",\n\t\t\t\"wideSize\": \"1024px\"\n\t\t},\n\t\t\"typography\": {\n\t\t\t\"fontFamilies\": [\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Manrope\",\n\t\t\t\t\t\"slug\": \"manrope\",\n\t\t\t\t\t\"fontFamily\": \"Manrope, sans-serif\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"200 800\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"Manrope\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Fira Code\",\n\t\t\t\t\t\"slug\": \"fira-code\",\n\t\t\t\t\t\"fontFamily\": \"\"Fira Code\", monospace\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"300 700\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"\"Fira Code\"\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Beiruti\",\n\t\t\t\t\t\"slug\": \"beiruti\",\n\t\t\t\t\t\"fontFamily\": \"Beiruti, sans-serif\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/beiruti\/Beiruti-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"300 700\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"Beiruti\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n
Mit der Eigenschaft settings.typography.fontFamilies<\/code> kannst du eine beliebige Anzahl von benutzerdefinierten Schriftfamilien<\/a> registrieren. F\u00fcr jede Schriftart musst du die folgenden Eigenschaften deklarieren:<\/p>\n