{"id":78108,"date":"2026-11-09T08:23:41","date_gmt":"2026-11-09T07:23:41","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=78108&preview=true&preview_id=78108"},"modified":"2026-11-10T10:16:13","modified_gmt":"2026-11-10T09:16:13","slug":"ipsum-wordpress-theme","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/ipsum-wordpress-theme\/","title":{"rendered":"Tauche ein in das WordPress-Theme \u201eIpsum\u201c und erfahre, wie du es erweitern kannst"},"content":{"rendered":"

Mit der Ver\u00f6ffentlichung von WordPress 7.2 im Dezember steht ein neues Standard-Theme vor der T\u00fcr. Es bricht mit der Tradition und verzichtet auf das \u00fcbliche Benennungsschema nach Kalenderjahren zugunsten eines aussagekr\u00e4ftigeren Namens.<\/p>\n

Ipsum<\/a> genannt, ist dieses neue Theme ein minimalistisches, schlankes und modulares Block-Theme, das f\u00fcr Full Site Editing<\/a> (FSE) entwickelt wurde und sich streng an moderne Block-Editor-Standards h\u00e4lt.<\/p>\n

Wie der Name schon sagt, optimiert Ipsum<\/strong> das Blogging-Erlebnis und ist sofort einsatzbereit, sobald du mit dem Schreiben beginnst. Sein Design ist in jedem Detail zur\u00fcckhaltend \u2013 von dezenten gepunkteten Unterstreichungen \u00fcber die integrierte Typografie bis hin zu einer sorgf\u00e4ltig zusammengestellten Auswahl an Stilvarianten<\/a>, bei denen Barrierefreiheit und Lesbarkeit im Vordergrund stehen.<\/p>\n

Lass dich jedoch nicht von seinem minimalistischen Charakter t\u00e4uschen. Ipsum bietet die ideale leere Leinwand, um deine kreative Vision als Blogger zum Leben zu erwecken. Tauchen wir ein in das neueste Standard-Theme und erkunden wir, wie du mit den nativen WordPress-Funktionen das Beste daraus machen kannst.
\n

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

Ipsum: Ein minimalistisches Theme mit Fokus auf Barrierefreiheit<\/h2>\n

Ipsum<\/a> zeichnet sich durch ein minimalistisches Design aus, bei dem die Lesbarkeit im Vordergrund steht.<\/p>\n

\"Vorschau
Vorschau eines einzelnen Beitrags, der mit dem Ipsum-Theme erstellt wurde<\/figcaption><\/figure>\n

Das neue Standard-Theme definiert sechs Graut\u00f6ne mit kontrastreichen Kombinationen sowie eine einzige Akzentfarbe. Der Standardhintergrund (#fcfcfc<\/code>) und der Flie\u00dftext (#000000bf<\/code>) erreichen ein Kontrastverh\u00e4ltnis<\/a> (CR) von 10,26:1 und erf\u00fcllen damit problemlos die WCAG-Anforderungen der Stufe AAA.<\/p>\n

\"\u00dcberschriften,
\u00dcberschriften, Zitate und Tabellenbl\u00f6cke im Ipsum-Theme<\/figcaption><\/figure>\n

Ipsum unterst\u00fctzt die native WordPress-Tastaturnavigation und zeigt auf jeder Seite einen \u201eZum Inhalt springen\u201c-Link an. So k\u00f6nnen Nutzer, die mit der Tabulatortaste navigieren, direkt zum Hauptinhalt springen, ohne erst durch die Navigationslinks in der Kopfzeile bl\u00e4ttern zu m\u00fcssen.<\/p>\n

\"\u201eZum
\u201eZum Inhalt springen\u201c-Link im Ipsum-Theme<\/figcaption><\/figure>\n

Das Theme hebt au\u00dferdem aktive Links mit seiner Akzentfarbe hervor, sodass Nutzer, die mit der Tastatur navigieren, das aktive Element schnell erkennen k\u00f6nnen.<\/p>\n

\"Eine
Eine Akkordeon-\u00dcberschrift, die w\u00e4hrend der Tastaturnavigation hervorgehoben ist<\/figcaption><\/figure>\n

Die Typografie spielt eine wichtige Rolle dabei, Ipsum augenschonend zu gestalten. Es bietet f\u00fcnf voreingestellte Schriftgr\u00f6\u00dfen und unterst\u00fctzt fl\u00fcssige Typografie<\/a>.<\/p>\n

\"Eine
Eine Vorschau der Ipsum-Schriftfamilien in WordPress 7.2<\/figcaption><\/figure>\n

Links werden lediglich durch eine dezente gepunktete Unterstreichung gekennzeichnet. Das passt zwar zur minimalistischen \u00c4sthetik des Themes, kann aber je nach Farbgebung der Seite dazu f\u00fchren, dass sie schwer zu erkennen sind.<\/p>\n

Trotzdem lassen sich Links bei der Tastaturnavigation dank des farblich hervorgehobenen Fokusrahmens leicht erkennen.<\/p>\n

\"Links,
Links, die bei der Tastaturnavigation im Ipsum-Theme deutlich hervorgehoben sind<\/figcaption><\/figure>\n

Schauen wir uns nun die spezifischen Funktionen von Ipsum genauer an.<\/p>\n

Vorlagen und Muster<\/h2>\n

Ipsum enth\u00e4lt eine Reihe integrierter Vorlagen<\/a>, die das Seitenlayout an interne Muster delegieren. Als Beispiel hier der Markup-Code der Vorlage page.html<\/code>:<\/p>\n

<!-- wp:pattern {\"slug\":\"ipsum\/hidden-page\"} \/-->\n<\/code><\/pre>\n
Diese einzelne Codezeile ruft das versteckte Muster hidden-page.php<\/code> auf, das das Layout steuert und die erforderlichen Metadaten festlegt:<\/p>\n
\/**\n * Title: Pages\n * Slug: ipsum\/hidden-page\n * Template Types: page\n * Inserter: no\n *\n * @package Ipsum\n * @since Ipsum 1.0\n *\/<\/code><\/pre>\n
Das Theme registriert benutzerdefinierte Vorlagenvarianten wie index-sidebar<\/code> und archive-sidebar<\/code> direkt \u00fcber PHP, sodass du sie im Site-Editor ausw\u00e4hlen kannst.<\/p>\n
\"Du
Du kannst die Seitenvorlage im Beitragseditor festlegen<\/figcaption><\/figure>\n
Derzeit stehen dir etwa 60 Muster zur Verf\u00fcgung, die dir beim Erstellen und Formatieren deiner Inhalte helfen.<\/p>\n
\"Muster
Muster im Site-Editor durchsuchen<\/figcaption><\/figure>\n
W\u00e4hrend einige dieser Muster f\u00fcr die Kernvorlagen des Themes reserviert (ausgeblendet) sind, stehen dir die meisten davon vollst\u00e4ndig zur Verwendung auf deinen Seiten zur Verf\u00fcgung.<\/p>\n
Dynamische Inhalte mit der Block-Bindings-API<\/h3>\n
Ein interessantes technisches Detail f\u00fcr Entwickler ist, wie Muster die Block-Bindings-API<\/a> implementieren. Das Muster archive-full.php<\/code> nutzt Bindungen beispielsweise wie folgt:<\/p>\n
<!-- wp:paragraph \n{\n\t\"metadata\":{\n\t\t\"bindings\":{\n\t\t\t\"content\":{\n\t\t\t\t\"source\":\"ipsum\/comments-cta\"\n\t\t\t}\n\t\t},\n\t\t\"name\":\"<?php echo esc_html_x( 'Comments CTA', 'Name of the comments call to action paragraph', 'ipsum' ); ?>\"\n\t},\n\t\"style\":{\n\t\t\"typography\":{\n\t\t\t\"fontStyle\":\"normal\",\"fontWeight\":\"600\"\n\t\t}\n\t},\n\t\"fontSize\":\"small\",\"fontFamily\":\"manrope\"\n} \n-->\n<p class=\"has-manrope-font-family has-small-font-size\" style=\"font-style:normal;font-weight:600\"><?php esc_html_e( 'Join the conversation', 'ipsum' ); ?><\/p>\n<!-- \/wp:paragraph -->\n<\/code><\/pre>\n
Die zugrunde liegende Bindungsquelle ist in der Datei functions.php<\/code> des Themes registriert:<\/p>\n
if ( ! function_exists( 'ipsum_comments_cta_binding' ) ) :\n\t\/**\n\t * Returns the comments call to action for the current post.\n\t *\n\t * @since Ipsum 1.0\n\t * @param array    $source_args    Block binding source arguments.\n\t * @param WP_Block $block_instance The block instance.\n\t * @return string The call to action text.\n\t *\/\n\tfunction ipsum_comments_cta_binding( $source_args, $block_instance ) {\n\t\t$post_id = $block_instance->context['postId'] ?? get_the_ID();\n\n\t\tif ( get_comments_number( $post_id ) > 0 ) {\n\t\t\t$text = __( 'Join the conversation', 'ipsum' );\n\t\t} else {\n\t\t\t$text = __( 'Be the first to comment', 'ipsum' );\n\t\t}\n\n\t\treturn '<a href=\"' . esc_url( get_comments_link( $post_id ) ) . '\">' . esc_html( $text ) . '<\/a>';\n\t}\nendif;\n\nif ( ! function_exists( 'ipsum_register_block_bindings' ) ) :\n\t\/**\n\t * Registers the comments call-to-action block binding source.\n\t *\n\t * @since Ipsum 1.0\n\t * @return void\n\t *\/\n\tfunction ipsum_register_block_bindings() {\n\t\tregister_block_bindings_source(\n\t\t\t'ipsum\/comments-cta',\n\t\t\tarray(\n\t\t\t\t'label'              => __( 'Comments call to action', 'ipsum' ),\n\t\t\t\t'get_value_callback' => 'ipsum_comments_cta_binding',\n\t\t\t\t'uses_context'       => array( 'postId' ),\n\t\t\t)\n\t\t);\n\t}\nendif;\nadd_action( 'init', 'ipsum_register_block_bindings' );<\/code><\/pre>\n
Kurz gesagt: Die Bindungsquelle ipsum\/comments-cta<\/code> gibt dynamisch entweder \u201eJoin the conversation\u201c oder \u201eBe the first to comment\u201c zur\u00fcck, je nachdem, ob der aktuelle Beitrag bereits Kommentare enth\u00e4lt.<\/p>\n
Fluide Typografie und Typografie-Voreinstellungen<\/h2>\n
In der theme.json<\/code>-Datei von Ipsum sind einige Schriftfamilien registriert, die als variable Schriften<\/a> im .woff2<\/code>-Format bereitgestellt werden. Diese umfassen serifenlose Schriftarten (Manrope, Inter, Archivo, Archivo Condensed), Serifenschriften (Besley, STIX Two Text) und Monospace-Schriften (JetBrains Mono), wobei \u201eInter\u201c als Standard-Text-Schriftart dient.<\/p>\n
\"Ipsum
Ipsum verwendet JetBrains Mono zur Formatierung von Code<\/figcaption><\/figure>\n
Die Schriftarten werden lokal gehostet, wodurch Abh\u00e4ngigkeiten von Drittanbietern wie Google Fonts<\/a> entfallen und Website-Betreiber mehr Kontrolle \u00fcber das Laden der Schriftarten erhalten.<\/p>\n
Die Datei theme.json<\/code> definiert sowohl feste als auch flexible Schriftgr\u00f6\u00dfen, die automatisch in dynamische CSS-clamp()<\/code>-Funktionen<\/a> umgewandelt werden:<\/p>\n
\"fontSizes\": [\n\t...\n\t{\n\t\t\"fluid\": {\n\t\t\t\"max\": \"1.75rem\",\n\t\t\t\"min\": \"1.5rem\"\n\t\t},\n\t\t\"name\": \"X-Large\",\n\t\t\"size\": \"1.75rem\",\n\t\t\"slug\": \"x-large\"\n\t},\n\t{\n\t\t\"fluid\": {\n\t\t\t\"max\": \"2.1875rem\",\n\t\t\t\"min\": \"1.625rem\"\n\t\t},\n\t\t\"name\": \"2X-Large\",\n\t\t\"size\": \"2.1875rem\",\n\t\t\"slug\": \"2-x-large\"\n\t}\n],<\/code><\/pre>\n
Ipsum enth\u00e4lt au\u00dferdem f\u00fcnf Typografie-Voreinstellungen, die du direkt im Bereich \u201eGlobale Stile\u201c des Site-Editors ausw\u00e4hlen kannst.<\/p>\n
Jede Voreinstellung \u00fcberschreibt das fontFamilies<\/code>-Array, um Schriftkombinationen zu wechseln, ohne das aktive Farbschema der Website zu beeinflussen.<\/p>\n
\"Ipsum-Typografie-Voreinstellungen
Ipsum-Typografie-Voreinstellungen im Site-Editor<\/figcaption><\/figure>\n
Stilvarianten<\/h2>\n
7 Globale Stilvarianten<\/a> bieten verschiedene Kombinationen aus Farbpalette, Standard-Duotonfilter und Typografie.<\/p>\n
\"Das
Das \u201eIpsum Global Styles\u201c-Fenster im WordPress-Site-Editor<\/figcaption><\/figure>\n
Um zu sehen, wie eine Stilvariante definiert ist, registriert der folgende Code die Variante \u201eGolden Hour<\/strong>\u201c. Er definiert den Duoton-Filter \u201ePeach on maroon<\/strong>\u201c, f\u00fchrt eine neue Farbpalette ein und legt die Schriftfamilie Manrope<\/strong> f\u00fcr die gesamte Typografie der Seite fest.<\/p>\n
{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n\t\"version\": 3,\n\t\"title\": \"Golden Hour\",\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"duotone\": [\n\t\t\t\t{\n\t\t\t\t\t\"colors\": [\n\t\t\t\t\t\t\"#7a1000\",\n\t\t\t\t\t\t\"#ffd9bd\"\n\t\t\t\t\t],\n\t\t\t\t\t\"name\": \"Peach on maroon\",\n\t\t\t\t\t\"slug\": \"duotone-1\"\n\t\t\t\t}\n\t\t\t],\n\t\t\t\"palette\": [\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#7a1000\",\n\t\t\t\t\t\"name\": \"Color 1\",\n\t\t\t\t\t\"slug\": \"theme-1\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#ffd9bd\",\n\t\t\t\t\t\"name\": \"Color 2\",\n\t\t\t\t\t\"slug\": \"theme-2\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#ff8c52\",\n\t\t\t\t\t\"name\": \"Color 3\",\n\t\t\t\t\t\"slug\": \"theme-3\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#ffd9bd40\",\n\t\t\t\t\t\"name\": \"Color 4\",\n\t\t\t\t\t\"slug\": \"theme-4\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#ffd9bd1a\",\n\t\t\t\t\t\"name\": \"Color 5\",\n\t\t\t\t\t\"slug\": \"theme-5\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#fff1e8\",\n\t\t\t\t\t\"name\": \"Color 6\",\n\t\t\t\t\t\"slug\": \"theme-6\"\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t\"custom\": {\n\t\t\t\"controlScheme\": \"dark\"\n\t\t}\n\t},\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/post-featured-image\": {\n\t\t\t\t\"filter\": {\n\t\t\t\t\t\"duotone\": \"var:preset|duotone|duotone-1\"\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t\"elements\": {\n\t\t\t\"heading\": {\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontFamily\": \"var(--wp--preset--font-family--manrope)\",\n\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\"fontWeight\": \"500\"\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t\"typography\": {\n\t\t\t\"fontFamily\": \"var(--wp--preset--font-family--manrope)\",\n\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\"fontWeight\": \"400\"\n\t\t}\n\t}\n}<\/code><\/pre>\n
Die \u00fcbrigen globalen Stilvarianten folgen derselben Struktur mit unterschiedlichen Kombinationen aus Farben und Schriftfamilien.<\/p>\n
Block-Stilvarianten<\/h3>\n
Ipsum enth\u00e4lt au\u00dferdem Stilvarianten f\u00fcr eine Handvoll Bl\u00f6cke. Einige dieser Varianten werden \u00fcber JSON-Dateien registriert, die im Verzeichnis styles\/blocks\/<\/code> des Themes gespeichert sind. Andere Varianten werden in der Funktionsdatei registriert.<\/p>\n
Du kannst Block-Stilvarianten im Bereich \u201eGlobale Stile\u201c des Site-Editors unter dem Abschnitt Bl\u00f6cke & Elemente<\/strong> anzeigen und anpassen.<\/p>\n
\"Ein
Stilvarianten f\u00fcr den Absatzblock im Bereich \u201eGlobale Stile\u201c des Site-Editors<\/figcaption><\/figure>\n
Die Varianten sind in der Seitenleiste \u201eBlockeinstellungen\u201c im Beitrags-Editor verf\u00fcgbar, sodass du sie mit einem einzigen Klick auf einzelne Bl\u00f6cke anwenden kannst.<\/p>\n
\"Ein
Anwenden von Blockstilvarianten \u00fcber die Seitenleiste \u201eBlockeinstellungen\u201c<\/figcaption><\/figure>\n
Ipsum mit einem Child-Theme anpassen<\/h2>\n
Der beste Weg, ein WordPress-Theme zu erweitern, ist die Erstellung eines Child-Themes<\/a>. Im folgenden Beispiel lernst du, wie das geht, indem du auf Basis von Ipsum ein asymmetrisches Bento-Grid-Archivlayout einf\u00fchrst.<\/p>\n
Das sind die Schritte, die du befolgen musst:<\/p>\n