{"id":54132,"date":"2022-09-09T11:29:11","date_gmt":"2022-09-09T10:29:11","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=54132&preview=true&preview_id=54132"},"modified":"2023-07-27T14:19:09","modified_gmt":"2023-07-27T13:19:09","slug":"wordpress-6-1","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wordpress-6-1\/","title":{"rendered":"Was ist neu in WordPress 6.1: Fluide Typografie, verbessertes Template-System, neue Site Health Checks und vieles mehr!"},"content":{"rendered":"

WordPress 6.1 „Misha“ ist am 1. November 2022<\/a> ver\u00f6ffentlicht worden. Es ist das dritte gro\u00dfe Release des Jahres nach WordPress 6.0 Arturo<\/a>, das am 24. Mai ver\u00f6ffentlicht wurde, und WordPress 5.9 Josephine<\/a>, das am 25. Januar erschien.<\/p>\n

Wie immer bringen neue WordPress-Versionen neue Funktionen, Verbesserungen und Fehlerbehebungen aus den neuesten Versionen des Gutenberg-Plugins in den Kern. WordPress 6.1 ist da keine Ausnahme, denn 11 Versionen des Gutenberg-Plugins<\/a> wurden in den Core integriert, von 13.1 bis 14.1.<\/p>\n

In diesem Beitrag werfen wir einen Blick hinter die Kulissen und stellen die neuen spannenden Funktionen vor, die mit der neuen Hauptversion von WordPress kommen.<\/p>\n

Matias Ventura gab uns einige Einblicke in die Roadmap zu 6.1<\/a>, in der er sagte, dass das Ziel von 6.1 darin besteht, die mit 5.9 und 6.0 eingef\u00fchrten Erfahrungen zu verfeinern und einige Dinge zu beheben, w\u00e4hrend wir uns Phase 3 der Gutenberg-Roadmap n\u00e4hern.<\/p>\n\n

1. Verbesserungen im Vorlageneditor<\/strong>: Eine der wichtigsten neuen Funktionen ist der Vorlageneditor<\/a>. WordPress 6.1 soll die M\u00f6glichkeit bieten, die Struktur der Website zu durchsuchen, zu visualisieren und zu bearbeiten.<\/p>\n

2. Vorlagen-Muster<\/strong>: Ziel ist es, den Blockmustern eine zentrale Rolle<\/a> bei der Vorlagen- und Seitenerstellung zu geben, sie an benutzerdefinierte Beitragstypen<\/a> und Blocktypen anzupassen, die Sperrfunktion zu verbessern, die Verwaltung gespeicherter Muster zu verbessern usw.<\/p>\n

3. Globale Stile und Bl\u00f6cke & Design Tools<\/strong>: WordPress 6.1 wird es erm\u00f6glichen, Webfonts zu verwalten, responsive Typografie zu implementieren und das Toolset f\u00fcr Bl\u00f6cke zu erweitern.<\/p>\n

Schauen wir uns also einige der wichtigsten Funktionen von WordPress 6.1 genauer an:<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Fluid Typography und Abst\u00e4nde<\/h2>\n

WordPress 6.1 bietet Unterst\u00fctzung<\/a> f\u00fcr Fluid Typography<\/a> \u00fcber calc<\/code><\/a>\/clamp<\/code><\/a> CSS-Funktionen.<\/p>\n

Der Ausdruck Fluid Typography<\/a> beschreibt die F\u00e4higkeit von Text, sich an die Breite des Viewports anzupassen, indem er von einer minimalen zu einer maximalen Breite skaliert.<\/p>\n

Das ist etwas anderes als das, was du mit Media-Queries erreichen kannst, denn Media-Queries erm\u00f6glichen es Themes, die Gr\u00f6\u00dfe von Text in Abh\u00e4ngigkeit von bestimmten Viewport-Gr\u00f6\u00dfen zu \u00e4ndern, tun aber nichts zwischen verschiedenen Werten.<\/p>\n

Einige Themes unterst\u00fctzen bereits fluide Typografie. Twenty Twenty-Two<\/a> zum Beispiel nutzt die CSS-Funktion clamp()<\/code> f\u00fcr verschiedene Schriftgr\u00f6\u00dfen. Ein Beispiel:<\/p>\n

\"settings\": {\n\t...\n\t\"custom\": {\n\t\t\"spacing\": {\n\t\t\t\"small\": \"max(1.25rem, 5vw)\",\n\t\t\t\"medium\": \"clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))\",\n\t\t\t\"large\": \"clamp(4rem, 10vw, 8rem)\",\n\t\t\t\"outer\": \"var(--wp--custom--spacing--small, 1.25rem)\"\n\t\t},\n\t\t\"typography\": {\n\t\t\t\"font-size\": {\n\t\t\t\t\"huge\": \"clamp(2.25rem, 4vw, 2.75rem)\",\n\t\t\t\t\"gigantic\": \"clamp(2.75rem, 6vw, 3.25rem)\",\n\t\t\t\t\"colossal\": \"clamp(3.25rem, 8vw, 6.25rem)\"\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n
Wie du im obigen Code sehen kannst, werden f\u00fcr jede einzelne Schriftgr\u00f6\u00dfe flie\u00dfende Schriftgr\u00f6\u00dfenwerte verwendet.<\/p>\n
Ab WordPress 6.1 k\u00f6nnen Themes jetzt automatisch fluide Schriftgr\u00f6\u00dfen erzeugen<\/a>, indem sie die neue Eigenschaft typography.fluid<\/code> wie folgt deklarieren:<\/p>\n
\"settings\": {\n\t....\n\t\"typography\": {\n\t\t\"fluid\": true,\n\t\t\"fontSizes\": [\n\t\t\t{\n\t\t\t\t\"size\": \"2rem\",\n\t\t\t\t\"fluid\": {\n\t\t\t\t\t\"min\": \"2rem\",\n\t\t\t\t\t\"max\": \"2.5rem\"\n\t\t\t\t},\n\t\t\t\t\"slug\": \"medium\",\n\t\t\t\t\"name\": \"Medium\"\n\t\t\t}\n\t\t]\n}<\/code><\/pre>\n
Mit Hilfe von typography.fluid<\/code> und typography.fontSizes[].fluid<\/code> wird der Wert jeder Schriftgr\u00f6\u00dfe automatisch nach der folgenden Formel<\/a> berechnet:<\/p>\n
--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});<\/code><\/pre>\n
Zum Beispiel:<\/p>\n
--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});<\/code><\/pre>\n
Beachte, dass Fluid Typography zum Zeitpunkt der Erstellung dieses Artikels eine experimentelle Funktion ist. Du kannst die technischen Details in Block supports: add fluid typography<\/a>\u00a0nachlesen.<\/p>\n
\n
Fluid typography is a significant improvement for building modern #WordPress<\/a> websites. We just updated @frostwp<\/a> to include this feature. Here\u2019s a great read from @richard_tabor<\/a> into what it is and why it matters. https:\/\/t.co\/Bq5YuHX3wi<\/a><\/p>\n
— Brian Gardner (@bgardner) August 8, 2022<\/a><\/p><\/blockquote>\n