Tauche ein in das WordPress-Theme „Ipsum“ und erfahre, wie du es erweitern kannst

Mit der Veröffentlichung von WordPress 7.2 im Dezember steht ein neues Standard-Theme vor der Tür. Es bricht mit der Tradition und verzichtet auf das übliche Benennungsschema nach Kalenderjahren zugunsten eines aussagekräftigeren Namens.

Ipsum genannt, ist dieses neue Theme ein minimalistisches, schlankes und modulares Block-Theme, das für Full Site Editing (FSE) entwickelt wurde und sich streng an moderne Block-Editor-Standards hält.

Wie der Name schon sagt, optimiert Ipsum das Blogging-Erlebnis und ist sofort einsatzbereit, sobald du mit dem Schreiben beginnst. Sein Design ist in jedem Detail zurückhaltend – von dezenten gepunkteten Unterstreichungen über die integrierte Typografie bis hin zu einer sorgfältig zusammengestellten Auswahl an Stilvarianten, bei denen Barrierefreiheit und Lesbarkeit im Vordergrund stehen.

Lass dich jedoch nicht von seinem minimalistischen Charakter täuschen. 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.

Ipsum: Ein minimalistisches Theme mit Fokus auf Barrierefreiheit

Ipsum zeichnet sich durch ein minimalistisches Design aus, bei dem die Lesbarkeit im Vordergrund steht.

Vorschau eines einzelnen Beitrags, der mit dem Ipsum-Theme erstellt wurde

Das neue Standard-Theme definiert sechs Grautöne mit kontrastreichen Kombinationen sowie eine einzige Akzentfarbe. Der Standardhintergrund (#fcfcfc) und der Fließtext (#000000bf) erreichen ein Kontrastverhältnis (CR) von 10,26:1 und erfüllen damit problemlos die WCAG-Anforderungen der Stufe AAA.

Überschriften, Zitate und Tabellenblöcke im Ipsum-Theme

Ipsum unterstützt die native WordPress-Tastaturnavigation und zeigt auf jeder Seite einen „Zum Inhalt springen“-Link an. So können Nutzer, die mit der Tabulatortaste navigieren, direkt zum Hauptinhalt springen, ohne erst durch die Navigationslinks in der Kopfzeile blättern zu müssen.

„Zum Inhalt springen“-Link im Ipsum-Theme

Das Theme hebt außerdem aktive Links mit seiner Akzentfarbe hervor, sodass Nutzer, die mit der Tastatur navigieren, das aktive Element schnell erkennen können.

Eine Akkordeon-Überschrift, die während der Tastaturnavigation hervorgehoben ist

Die Typografie spielt eine wichtige Rolle dabei, Ipsum augenschonend zu gestalten. Es bietet fünf voreingestellte Schriftgrößen und unterstützt flüssige Typografie.

Eine Vorschau der Ipsum-Schriftfamilien in WordPress 7.2

Links werden lediglich durch eine dezente gepunktete Unterstreichung gekennzeichnet. Das passt zwar zur minimalistischen Ästhetik des Themes, kann aber je nach Farbgebung der Seite dazu führen, dass sie schwer zu erkennen sind.

Trotzdem lassen sich Links bei der Tastaturnavigation dank des farblich hervorgehobenen Fokusrahmens leicht erkennen.

Links, die bei der Tastaturnavigation im Ipsum-Theme deutlich hervorgehoben sind

Schauen wir uns nun die spezifischen Funktionen von Ipsum genauer an.

Vorlagen und Muster

Ipsum enthält eine Reihe integrierter Vorlagen, die das Seitenlayout an interne Muster delegieren. Als Beispiel hier der Markup-Code der Vorlage page.html:

<!-- wp:pattern {"slug":"ipsum/hidden-page"} /-->

Diese einzelne Codezeile ruft das versteckte Muster hidden-page.php auf, das das Layout steuert und die erforderlichen Metadaten festlegt:

/**
 * Title: Pages
 * Slug: ipsum/hidden-page
 * Template Types: page
 * Inserter: no
 *
 * @package Ipsum
 * @since Ipsum 1.0
 */

Das Theme registriert benutzerdefinierte Vorlagenvarianten wie index-sidebar und archive-sidebar direkt über PHP, sodass du sie im Site-Editor auswählen kannst.

Du kannst die Seitenvorlage im Beitragseditor festlegen

Derzeit stehen dir etwa 60 Muster zur Verfügung, die dir beim Erstellen und Formatieren deiner Inhalte helfen.

Während einige dieser Muster für die Kernvorlagen des Themes reserviert (ausgeblendet) sind, stehen dir die meisten davon vollständig zur Verwendung auf deinen Seiten zur Verfügung.

Dynamische Inhalte mit der Block-Bindings-API

Ein interessantes technisches Detail für Entwickler ist, wie Muster die Block-Bindings-API implementieren. Das Muster archive-full.php nutzt Bindungen beispielsweise wie folgt:

<!-- wp:paragraph 
{
	"metadata":{
		"bindings":{
			"content":{
				"source":"ipsum/comments-cta"
			}
		},
		"name":"<?php echo esc_html_x( 'Comments CTA', 'Name of the comments call to action paragraph', 'ipsum' ); ?>"
	},
	"style":{
		"typography":{
			"fontStyle":"normal","fontWeight":"600"
		}
	},
	"fontSize":"small","fontFamily":"manrope"
} 
-->
<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>
<!-- /wp:paragraph -->

Die zugrunde liegende Bindungsquelle ist in der Datei functions.php des Themes registriert:

if ( ! function_exists( 'ipsum_comments_cta_binding' ) ) :
	/**
	 * Returns the comments call to action for the current post.
	 *
	 * @since Ipsum 1.0
	 * @param array    $source_args    Block binding source arguments.
	 * @param WP_Block $block_instance The block instance.
	 * @return string The call to action text.
	 */
	function ipsum_comments_cta_binding( $source_args, $block_instance ) {
		$post_id = $block_instance->context['postId'] ?? get_the_ID();

		if ( get_comments_number( $post_id ) > 0 ) {
			$text = __( 'Join the conversation', 'ipsum' );
		} else {
			$text = __( 'Be the first to comment', 'ipsum' );
		}

		return '<a href="' . esc_url( get_comments_link( $post_id ) ) . '">' . esc_html( $text ) . '</a>';
	}
endif;

if ( ! function_exists( 'ipsum_register_block_bindings' ) ) :
	/**
	 * Registers the comments call-to-action block binding source.
	 *
	 * @since Ipsum 1.0
	 * @return void
	 */
	function ipsum_register_block_bindings() {
		register_block_bindings_source(
			'ipsum/comments-cta',
			array(
				'label'              => __( 'Comments call to action', 'ipsum' ),
				'get_value_callback' => 'ipsum_comments_cta_binding',
				'uses_context'       => array( 'postId' ),
			)
		);
	}
endif;
add_action( 'init', 'ipsum_register_block_bindings' );

Kurz gesagt: Die Bindungsquelle ipsum/comments-cta gibt dynamisch entweder „Join the conversation“ oder „Be the first to comment“ zurück, je nachdem, ob der aktuelle Beitrag bereits Kommentare enthält.

Fluide Typografie und Typografie-Voreinstellungen

In der theme.json-Datei von Ipsum sind einige Schriftfamilien registriert, die als variable Schriften im .woff2-Format bereitgestellt werden. Diese umfassen serifenlose Schriftarten (Manrope, Inter, Archivo, Archivo Condensed), Serifenschriften (Besley, STIX Two Text) und Monospace-Schriften (JetBrains Mono), wobei „Inter“ als Standard-Text-Schriftart dient.

Ipsum verwendet JetBrains Mono zur Formatierung von Code

Die Schriftarten werden lokal gehostet, wodurch Abhängigkeiten von Drittanbietern wie Google Fonts entfallen und Website-Betreiber mehr Kontrolle über das Laden der Schriftarten erhalten.

Die Datei theme.json definiert sowohl feste als auch flexible Schriftgrößen, die automatisch in dynamische CSS-clamp()-Funktionen umgewandelt werden:

"fontSizes": [
	...
	{
		"fluid": {
			"max": "1.75rem",
			"min": "1.5rem"
		},
		"name": "X-Large",
		"size": "1.75rem",
		"slug": "x-large"
	},
	{
		"fluid": {
			"max": "2.1875rem",
			"min": "1.625rem"
		},
		"name": "2X-Large",
		"size": "2.1875rem",
		"slug": "2-x-large"
	}
],

Ipsum enthält außerdem fünf Typografie-Voreinstellungen, die du direkt im Bereich „Globale Stile“ des Site-Editors auswählen kannst.

Jede Voreinstellung überschreibt das fontFamilies-Array, um Schriftkombinationen zu wechseln, ohne das aktive Farbschema der Website zu beeinflussen.

Ipsum-Typografie-Voreinstellungen im Site-Editor

Stilvarianten

7 Globale Stilvarianten bieten verschiedene Kombinationen aus Farbpalette, Standard-Duotonfilter und Typografie.

Das „Ipsum Global Styles“-Fenster im WordPress-Site-Editor

Um zu sehen, wie eine Stilvariante definiert ist, registriert der folgende Code die Variante „Golden Hour“. Er definiert den Duoton-Filter „Peach on maroon“, führt eine neue Farbpalette ein und legt die Schriftfamilie Manrope für die gesamte Typografie der Seite fest.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Golden Hour",
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [
						"#7a1000",
						"#ffd9bd"
					],
					"name": "Peach on maroon",
					"slug": "duotone-1"
				}
			],
			"palette": [
				{
					"color": "#7a1000",
					"name": "Color 1",
					"slug": "theme-1"
				},
				{
					"color": "#ffd9bd",
					"name": "Color 2",
					"slug": "theme-2"
				},
				{
					"color": "#ff8c52",
					"name": "Color 3",
					"slug": "theme-3"
				},
				{
					"color": "#ffd9bd40",
					"name": "Color 4",
					"slug": "theme-4"
				},
				{
					"color": "#ffd9bd1a",
					"name": "Color 5",
					"slug": "theme-5"
				},
				{
					"color": "#fff1e8",
					"name": "Color 6",
					"slug": "theme-6"
				}
			]
		},
		"custom": {
			"controlScheme": "dark"
		}
	},
	"styles": {
		"blocks": {
			"core/post-featured-image": {
				"filter": {
					"duotone": "var:preset|duotone|duotone-1"
				}
			}
		},
		"elements": {
			"heading": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--manrope)",
					"fontStyle": "normal",
					"fontWeight": "500"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--manrope)",
			"fontStyle": "normal",
			"fontWeight": "400"
		}
	}
}

Die übrigen globalen Stilvarianten folgen derselben Struktur mit unterschiedlichen Kombinationen aus Farben und Schriftfamilien.

Block-Stilvarianten

Ipsum enthält außerdem Stilvarianten für eine Handvoll Blöcke. Einige dieser Varianten werden über JSON-Dateien registriert, die im Verzeichnis styles/blocks/ des Themes gespeichert sind. Andere Varianten werden in der Funktionsdatei registriert.

Du kannst Block-Stilvarianten im Bereich „Globale Stile“ des Site-Editors unter dem Abschnitt Blöcke & Elemente anzeigen und anpassen.

Ein Screenshot der verschiedenen Stilvarianten für Absatzblöcke im Site-Editor. — Stilvarianten für den Absatzblock im Bereich „Globale Stile“ des Site-Editors

Die Varianten sind in der Seitenleiste „Blockeinstellungen“ im Beitrags-Editor verfügbar, sodass du sie mit einem einzigen Klick auf einzelne Blöcke anwenden kannst.

Ein Screenshot der verschiedenen Blockstile im Beitragseditor. — Anwenden von Blockstilvarianten über die Seitenleiste „Blockeinstellungen“

Ipsum mit einem Child-Theme anpassen

Der beste Weg, ein WordPress-Theme zu erweitern, ist die Erstellung eines Child-Themes. Im folgenden Beispiel lernst du, wie das geht, indem du auf Basis von Ipsum ein asymmetrisches Bento-Grid-Archivlayout einführst.

Das sind die Schritte, die du befolgen musst:

Schritt 1: Das Child-Theme einrichten
Schritt 2: Erstelle das Bento-Archivmuster
Schritt 3: Erstelle das Bento-Rastermuster
Schritt 4: Erstelle das Bento-Stylesheet
Schritt 5: Registriere die benutzerdefinierte Vorlage

Schritt 1: Richte das Child-Theme ein

Erstelle zunächst einen neuen Ordner für dein Child-Theme unter wp-content/themes/ und nenne ihn ipsum-child oder ähnlich. Füge in diesem Ordner zwei Dateien hinzu: style.css und functions.php.

Die Datei style.css enthält die Metadaten, anhand derer WordPress das Theme identifiziert und verwaltet. Füge zunächst den folgenden Code hinzu:

/*
Theme Name: Ipsum Child
Theme URI: https://example.com/
Description: A custom child theme for the Ipsum default theme 
Author: Your Name
Author URI: https://example.com
Template: ipsum
Version: 1.0.0
Text Domain: ipsum-child
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Ipsum verwendet get_stylesheet_directory_uri(), um das Theme-Stylesheet in der functions.php zu registrieren. Wenn ein Child-Theme aktiv ist, verweist diese Funktion auf das Verzeichnis des Child-Themes, sodass WordPress das Laden des Stylesheets des Parent-Themes überspringt.

Im speziellen Fall von Ipsum musst du das Stylesheet des übergeordneten Themes ordnungsgemäß in der functions.php deines Child-Themes in die Warteschlange stellen, um zu vermeiden, dass die Formatierung des übergeordneten Themes verloren geht.

Füge daher den folgenden Code zur functions.php deines Child-Themes hinzu:

<?php
/**
 * Ipsum Child functions and definitions.
 *
 * @package Ipsum_Child
 * @since Ipsum Child 1.0.0
 */

if ( ! function_exists( 'ipsum_child_styles' ) ) :

	function ipsum_child_styles() {
		wp_deregister_style( 'ipsum-style' );
		wp_register_style(
			'ipsum-style',
			get_template_directory_uri() . '/style.css',
			array(),
			wp_get_theme( get_template() )->get( 'Version' )
		);

		wp_enqueue_style(
			'ipsum-child-style',
			get_stylesheet_uri(),
			array( 'ipsum-style' ),
			wp_get_theme()->get( 'Version' )
		);
	}
endif;
add_action( 'wp_enqueue_scripts', 'ipsum_child_styles', 20 );

Der obige Code-Schnipsel registriert den Handle ipsum-style mithilfe von get_template_directory_uri() neu, um das Stylesheet des übergeordneten Themes wiederherzustellen. Anschließend stellt er das Stylesheet des Child-Themes direkt danach in die Warteschlange.

Nachdem das Child-Theme konfiguriert ist, ist der nächste Schritt das Erstellen des Bento-Grid-Archivmusters.

Schritt 2: Erstelle das Bento-Archivmuster

Um ein als Bento-Raster formatiertes Archiv anzuzeigen, werden wir bereits im übergeordneten Theme vorhandenen Code wiederverwenden.

Für die Struktur des Musters verwenden wir einige in Ipsum integrierte Muster:

archive-photographic.php für die Rasterabfrage.
archive-columns.php für den Titel, das Datum, die Meldung „Keine Ergebnisse“ und die Paginierung.
hidden-archive.php für das Layout des Template-Wrappers.

Erstelle in deinem Child-Theme-Verzeichnis die Ordner patterns/ und templates/ und füge die folgenden Dateien hinzu:

patterns/archive-bento.php
patterns/hidden-archive-bento.php
templates/archive.html

Die Struktur deines Child-Themes sollte nun so aussehen:

ipsum-child/
├── style.css
├── functions.php
├── patterns/
│   ├── archive-bento.php
│   └── hidden-archive-bento.php
└── templates/
    └── archive.html

Als Nächstes kopierst du den Code aus dem Muster hidden-archive.php des Parent-Themes und fügst ihn in die Datei hidden-archive-bento.php deines Child-Themes ein. Anschließend passt du die Header-Metadaten, die Textdomain und den Muster-Slug wie folgt an:

<?php
/**
 * Title: All Archives Bento
 * Slug: ipsum-child/hidden-archive-bento
 * Template Types: archive, category, tag
 * Inserter: no
 *
 * @package Ipsum_Child
 * @since Ipsum Child 1.0.0
 */

?>
<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:group {"tagName":"main","metadata":{"name":"<?php echo esc_html_x( 'Body', 'Group block defining the main content area', 'ipsum-child' ); ?>"},"layout":{"type":"default"}} -->
<main class="wp-block-group"><!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Section Title', 'Group containing the archive title', 'ipsum-child' ); ?>"},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:query-title {"type":"archive"} /--></div>
<!-- /wp:group -->

<!-- wp:pattern {"slug":"ipsum-child/archive-bento"} /--></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->

<!-- wp:template-part {"slug":"search-bar","className":"sticky-bottom"} /-->

Im Wesentlichen haben wir das hidden-archive.php-Muster der übergeordneten Seite an unser ipsum-child/hidden-archive-bento-Muster angepasst.

Schritt 3: Das Bento-Muster erstellen

Jetzt müssen wir das eigentliche Bento-Muster in der Datei patterns/archive-bento.php erstellen. Auch hier nutzen wir wieder Code, der bereits in Ipsum vorhanden ist.

Unten findest du den vollständigen Code für das Muster archive-bento.php, versehen mit Anmerkungen zur Herkunft der einzelnen Code-Schnipsel:

<?php
/**
 * Title: Archive Bento Grid
 * Slug: ipsum-child/archive-bento
 * Categories: posts
 * Block Types: core/query
 * Viewport width: 1280
 * Description: A bento grid of posts: one large card, wide and tall cards, and small cards, repeating every ten posts.
 *
 * @package Ipsum_Child
 * @since Ipsum Child 1.0.0
 */

?>

<?php 
/**
 * Query Loop
 * Origin: archive-columns.php. 
 * Changed: perPage, name, text domain. 
 */ 
?>
<!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[],"excludeCurrent":null},"metadata":{"categories":["posts"],"name":"<?php echo esc_html_x( 'Archive Bento Grid', 'Name of the Archive Bento Grid query', 'ipsum-child' ); ?>"},"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"className":"bento-grid","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"grid","columnCount":4}} -->

<?php 
/**
 * Post Template
 * Origin: archive-photographic.php. 
 * Changed: gap, columns. 
 * New: class bento-grid. 
 */ 

/** Card 
 * Origin: hero-colophon.php, cta-membership.php. 
 * New: name, justifyContent stretch. 
 */
?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Bento Card', 'Name of the group holding a bento card', 'ipsum-child' ); ?>"},"className":"is-style-crop-contents","style":{"border":{"radius":{"topLeft":"10px","topRight":"10px","bottomLeft":"10px","bottomRight":"10px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|30"}},"backgroundColor":"theme-5","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group is-style-crop-contents has-theme-5-background-color has-background" style="border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:post-featured-image {"isLink":true,"sizeSlug":"large"} /-->

<?php
/** Featured image
 * Origin: archive-standard.php
 * Changed: removed padding. 
 */ 
?>
<?php 
/** Title and Meta
 * Origin: archive-columns.php.
 * Changed: removed selfStretch, gap. 
 */ ?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Title and Meta', 'Name of the group holding the post title and meta', 'ipsum-child' ); ?>"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:post-title {"isLink":true,"fontSize":"large"} /-->

<?php 
/** 
 * Post Title and Post Date
 * Origin: archive-columns.php. 
 */ ?>
<!-- wp:post-date {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template -->

<?php 
/** No results
 * Origin: archive-columns.php. 
 * Changed: text domain only. 
 */ ?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'No Results Wrapper', 'Name of the group shown when a query has no results', 'ipsum-child' ); ?>"},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:query-no-results -->
<!-- wp:paragraph -->
<p><?php esc_html_e( 'No posts have been published in this section yet.', 'ipsum-child' ); ?></p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:group -->

<?php 
/** 
 * Pagination
 * Origin: archive-columns.php. 
 * Changed: text domain only. 
 */ ?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Pagination Wrapper', 'Name of the group wrapping the pagination', 'ipsum-child' ); ?>"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:group --></div>
<!-- /wp:query -->

Im obigen Code haben wir die von Ipsum bereitgestellten integrierten Bausteine wiederverwendet und neu kombiniert.

Hier sind die wichtigsten Änderungen:

Abfrageblock: In der Abfrageschleife haben wir den Parameter perPage auf 10 aktualisiert. Das ist entscheidend für die visuelle Darstellung des Bento-Rasters, da die CSS-Regeln im nächsten Schritt auf einen sich wiederholenden Zyklus von 10 Elementen (10n) abzielen und dynamisch eine abwechselnde Folge aus großen, breiten, hohen und kompakten Karten wiederholen.
Beitragsvorlagen-Block: Wir haben die benutzerdefinierte CSS-Klasse bento-grid hinzugefügt, um das Raster über CSS anzusprechen und das asymmetrische Layout anzuwenden.
Gruppenblock: Der Gruppenblock verwendet ein vertikales Flex-Layout, während das CSS festlegt, dass jede Karte ihren Rasterbereich ausfüllt und das Beitragsbild sich innerhalb des verfügbaren Platzes ausdehnen kann.
Textdomäne: Alle Zeichenfolgen wurden aktualisiert, sodass nun die Textdomäne ipsum-child verwendet wird.

Mit diesen Änderungen ist die Blockstruktur des Musters fertig. Jetzt müssen wir nur noch die CSS-Eigenschaften definieren, die das visuelle Layout gestalten.

Schritt 4: Erstelle das Bento-Stylesheet

Öffne die Datei style.css des Child-Themes und füge den folgenden Code ein:

.bento-grid {
	grid-auto-flow: dense;
	grid-auto-rows: minmax(18rem, auto);
}

.bento-grid > li:nth-child(10n + 1) {
	grid-column: span 2;
	grid-row: span 2;
}

.bento-grid > li:nth-child(10n + 6) {
	grid-column: span 2;
}

.bento-grid > li:nth-child(10n + 7),
.bento-grid > li:nth-child(10n + 8) {
	grid-row: span 2;
}

.bento-grid > li > .wp-block-group {
	height: 100%;
}

.bento-grid .wp-block-post-featured-image {
	position: relative;
	flex: 1 1 0;
	min-height: 8rem;
	margin: 0;
}

.bento-grid .wp-block-post-featured-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 781px) {
	.bento-grid.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bento-grid > li:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}

	.bento-grid > li:nth-child(10n + 1),
	.bento-grid > li:nth-child(10n + 6) {
		grid-column: span 2;
	}
}

@media (max-width: 480px) {
	.bento-grid.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.bento-grid > li:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}
}

Hier ist eine Übersicht über dieses Stylesheet:

grid-auto-flow: dense: Aktiviert die dichte Anordnung im CSS-Grid. Jede Grid-Zeile hat eine Mindesthöhe von 18rem.
.bento-grid > li:nth-child(10n + 1): Das Rastermuster zielt auf einen Zyklus von 10 Beiträgen (10n) ab. Das erste Element in der Schleife (10n + 1) wird zur Haupt-Hero-Karte und erstreckt sich über 2 Spalten und 2 Zeilen.
li:nth-child(10n + 6): Der sechste Beitrag erstreckt sich über zwei Spalten. Der siebte und der achte Beitrag erstrecken sich jeweils über zwei Zeilen.
.wp-block-post-featured-image img: Das Beitragsbild wird absolut innerhalb eines Flex-Wrappers mit Null-Basis (flex: 1 1 0) und object-fit: cover positioniert. So passt sich das Bild sauber an die Rasterzeile an.

Die Medienabfragen passen die Spaltenanzahl des Rasters für kleinere Bildschirme an.

Schritt 5: Die benutzerdefinierte Vorlage registrieren

Öffne als Nächstes die Datei templates/archive.html und füge den folgenden Code hinzu:

<!-- wp:pattern {"slug":"ipsum-child/hidden-archive-bento"} /-->

Der Dateiname templates/archive.html folgt der Standard-WordPress-Vorlagenhierarchie und überschreibt die Standard-Archivvorlage des übergeordneten Themes, sofern keine spezifischere Vorlage Vorrang hat.

Wenn du auch das Layout der Indexseite ersetzen möchtest, kopiere einfach denselben Code in eine Datei namens templates/index.html.

Der Code darin ruft einfach das hidden-archive-bento-Wrapper-Muster auf, wodurch die Vorlagenstruktur übersichtlich und modular bleibt.

Jetzt ist es Zeit zum Testen. Lade dein Child-Theme hoch und aktiviere es. Dann schau dir den nächsten Abschnitt an.

Das Ergebnis

Deine Vorlagen sind nun bereit für den Einsatz in den Archiven deiner Website. Du kannst das Bento-Muster auch auf statische Seiten anwenden, indem du inherit auf false setzt und bei Bedarf die erforderlichen Abfrageparameter konfigurierst.

Das „Archive Bento Grid“-Muster im WordPress 7.2 Site Editor

Wie bereits erwähnt, musst du, um dasselbe Layout auf die Startseite der Website anzuwenden, zusätzlich eine Datei templates/index.html mit demselben Musterverweis erstellen.

Das letzte Bild zeigt die Startseite unserer Staging-Site mit einem ansprechenden Bento-Grid-Layout.

Die Startseite verwendet eine benutzerdefinierte Vorlage im Bento-Stil

Ein schlankes und barrierefreies Theme

Ipsum vereint moderne WordPress-Bearbeitungsfunktionen, wiederverwendbare Muster und flexible Gestaltungsmöglichkeiten in einem bewusst minimalistischen Design. Sobald du verstanden hast, wie die Muster und Vorlagen zusammenpassen, kannst du das Theme weit über die Standard-Blog-Layouts hinaus erweitern. Das in diesem Leitfaden vorgestellte „Bento Grid“ ist nur ein Beispiel dafür, was du mit einem Child-Theme auf Basis von Ipsum erstellen kannst.

Wenn Geschwindigkeit und Leistung für dich oberste Priorität haben, denk daran, dass der Code nur die halbe Miete ist. Schnelle Websites hängen auch von Caching, Optimierungen, der Website-Konfiguration und der Hosting-Infrastruktur ab. Schau dir unsere Tarife an und finde den, der am besten zu den Anforderungen deiner Website passt.

Carlo Daniele Kinsta

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.

Verwalte Unternehmensbenutzer und Berechtigungen mit der Kinsta-API

The MarTech Summit holt die durch Website-Ausfälle verlorenen Stunden wieder auf

Entdecken

Werkzeuge & Einblicke

Neueste Artikel