深入 Ipsum WordPress 主题并用子主题扩展 Bento 网格归档

随着 WordPress 7.2 将于 12 月发布，一款新的默认主题即将推出。它将告别传统，不再采用日历年份命名方案，而是选用了一个更有意义的名称。

这款新主题名为 Ipsum，是一款极简、轻量且模块化的区块主题，为全站编辑（FSE）而构建，并严格符合现代区块编辑器标准。

正如其名称所暗示的，Ipsum 简化了博客写作体验，让你刚开始输入就能开箱即用。它的设计在每个细节上都低调克制，从细微的虚线下划线到内置字体排版和精心整理的样式变体，无不聚焦于无障碍与可读性。

不过，别被它的极简风格所迷惑。Ipsum 提供了理想的空白画布，让你作为博客作者尽展创意。让我们深入了解这款最新默认主题，并探索如何使用原生 WordPress 功能充分发挥它的作用。

Ipsum：以无障碍为设计理念的极简主题

Ipsum 采用极简设计，高度关注可读性。

Preview of a single post built with the Ipsum theme. — 使用 Ipsum 主题构建的单篇文章预览。

这款新默认主题定义了六种灰色色调及其高对比度组合，并搭配一种强调色。默认背景（#fcfcfc）与正文文本（#000000bf）的对比度（CR）达到 10.26:1，轻松获得 WCAG AAA 评级。

Headings, quote, and table blocks in the Ipsum theme. — Ipsum 主题中的标题、引用和表格区块。

Ipsum 支持原生 WordPress 键盘导航，并在每个页面上显示“跳至内容”链接。这让使用 Tab 键导航的用户可以直接跳转到主要内容，无需逐个浏览页眉导航链接。

Skip to content link in the Ipsum theme. — Ipsum 主题中的“跳至内容”链接。

该主题还会使用强调色突出显示获得焦点的链接，让键盘用户能够迅速识别当前活动元素。

An accordion heading highlighted during keyboard navigation. — 键盘导航时突出显示的手风琴标题。

字体排版在让 Ipsum 看起来赏心悦目方面发挥着重要作用，它提供五种预设字号，并支持流体字体排版。

A preview of Ipsum font families in WordPress 7.2. — WordPress 7.2 中 Ipsum 字体系列的预览。

链接仅通过细微的虚线下划线来区分。虽然这与主题的极简美学相契合，但根据页面的配色情况，可能会让链接不易被发现。

尽管如此，得益于采用强调色的焦点轮廓，键盘导航时仍能轻松识别链接。

Links clearly highlighted during keyboard navigation in the Ipsum theme. — Ipsum 主题中键盘导航时清晰高亮的链接。

现在，让我们仔细看看 Ipsum 的具体功能。

模板与图案

Ipsum 内置了一组模板，将页面布局交由内部图案控制。例如，下面是 page.html 模板的标记：

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

这行代码调用隐藏图案 hidden-page.php，由它控制布局并设置所需的元数据：

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

该主题直接通过 PHP 注册自定义模板变体，例如 index-sidebar 和 archive-sidebar，因此你可以在站点编辑器中选择它们。

A page using the Pages template in the Ipsum theme. — 你可以在文章编辑器中设置页面模板。

目前大约提供 60 个图案，帮助你构建和格式化内容。

Browsing patterns in the Site Editor. — 在站点编辑器中浏览图案。

虽然其中一些图案被保留（隐藏）供主题核心模板使用，但绝大多数都可供你在页面中自由使用。

使用 Block Bindings API 的动态内容

对开发者而言，一个有趣的技术细节是图案如何实现 Block Bindings API。例如，archive-full.php 图案使用了如下绑定：

<!-- 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 -->

底层绑定源注册在该主题的 functions.php 文件中：

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' );

简而言之，ipsum/comments-cta 绑定源会根据当前文章是否已有评论，动态返回“加入对话”或“成为第一位评论者”。

流式排版与排版预设

Ipsum 的 theme.json 注册了若干以 .woff2 格式提供的可变字体系列。这些字体涵盖无衬线字体（Manrope、Inter、Archivo、Archivo Condensed）、衬线字体（Besley、STIX Two Text）和等宽字体（JetBrains Mono），其中 Inter 是默认正文字体。

Ipsum uses JetBrains Mono to style code. — Ipsum 使用 JetBrains Mono 设置代码样式。

字体在本地托管，无需依赖 Google Fonts 等第三方服务，也让站点所有者能更好地控制字体加载。

theme.json 同时定义了固定和流式字号，并自动转换为动态 CSS clamp() 函数：

"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 还包含五种排版预设，可直接在站点编辑器的全局样式面板中选择。

每个预设都会覆盖 fontFamilies 数组，以切换字体组合，而不会影响站点当前使用的配色方案。

Ipsum Typography presets in the Site Editor. — 站点编辑器中的 Ipsum 排版预设。

样式变体

7 种全局样式变体提供了不同的配色方案、默认双色调滤镜和排版组合。

A screenshot of Ipsum theme's Global Styles panel. — WordPress 站点编辑器中的 Ipsum 全局样式面板。

要了解样式变体是如何定义的，以下代码注册了 Golden Hour 变体。它定义了 Peach on maroon 双色调滤镜、引入新的配色方案，并为站点整体排版设置 Manrope 字体系列。

{
	"$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"
		}
	}
}

其余全局样式变体采用相同的结构，但使用了不同的颜色和字体系列组合。

区块样式变体

Ipsum 还为若干区块提供了样式变体。其中一些变体通过存放在主题 styles/blocks/ 目录中的 JSON 文件注册，其他变体则在 functions 文件中注册。

你可以在站点编辑器的全局样式面板中，通过 Blocks & Elements 部分查看和自定义区块样式变体。

A screenshot of Paragraph block style variations in the Site Editor. — 站点编辑器全局样式面板中的段落区块样式变体。

在文章编辑器的区块设置侧栏中可以使用这些变体，只需一键点击即可将它们应用到各个区块。

A screenshot of block style variations in the post editor. — 从区块设置侧栏应用区块样式变体。

使用子主题自定义 Ipsum

扩展 WordPress 主题的最佳方式是创建子主题。在下面的示例中，你将学习如何在 Ipsum 的基础上添加不对称 Bento 网格归档布局。

请按以下步骤操作：

第 1 步：设置子主题
第 2 步：创建 Bento 归档模板
第 3 步：创建 Bento 网格模板
第 4 步：构建 Bento 样式表
第 5 步：注册自定义模板

第 1 步：设置子主题

首先，在 wp-content/themes/ 下为你的子主题创建一个新文件夹，并命名为 ipsum-child 或类似名称。在此文件夹中添加两个文件：style.css 和 functions.php。

style.css 文件包含 WordPress 用于识别和管理主题的元数据。首先添加以下代码：

/*
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 使用 get_stylesheet_directory_uri() 在 functions.php 中注册主题样式表。启用子主题后，此函数会指向子主题目录，因此 WordPress 会跳过加载父主题样式表。

具体到 Ipsum，为了避免丢失父主题的样式，你需要在子主题的 functions 文件中正确加载它。

话虽如此，请将以下代码添加到子主题的 functions 文件中：

<?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 );

上面的代码片段使用 get_template_directory_uri() 重新注册 ipsum-style 句柄，以恢复父主题的样式表。然后，将子主题的样式表紧随其后加入队列。

信息

上面的代码片段处理前端样式。如有需要，请单独配置和测试编辑器样式。

配置好子主题后，下一步是构建 Bento 网格归档图案。

第 2 步：创建 Bento 归档图案

要显示采用 Bento 网格格式的归档页面，我们将复用父主题中已有的代码。

对于图案的结构，我们将使用几个 Ipsum 内置图案：

archive-photographic.php，用于网格查询。
archive-columns.php，用于标题、日期、无结果消息和分页。
hidden-archive.php，用于模板包装器布局。

在子主题目录中，创建 patterns/ 和 templates/ 文件夹，并添加以下文件：

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

现在，你的子主题结构应如下所示：

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

接下来，将父主题的 hidden-archive.php 图案中的代码复制并粘贴到子主题的 hidden-archive-bento.php 中。然后，按如下方式更新标头元数据、文本域和图案 slug 调用：

<?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"} /-->

本质上，我们将父主题的 hidden-archive.php 图案改编为了我们的 ipsum-child/hidden-archive-bento 图案。

第 3 步：创建 Bento 图案

现在，我们需要在 patterns/archive-bento.php 中构建实际的 Bento 图案。这里同样将利用 Ipsum 中已有的代码。

下面是 archive-bento.php 图案的完整代码，并标注了每个代码片段的来源：

<?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 -->

在上面的代码中，我们复用并重新组合了 Ipsum 提供的内置构建模块。

主要更改如下：

查询块：在查询循环中，我们将 perPage 参数更新为 10。这对于 Bento 网格的视觉呈现至关重要，因为下一步中的 CSS 规则针对一个重复的 10 项循环（10n），并动态重复大卡片、宽卡片、高卡片和紧凑卡片交替出现的序列。
文章模板块：我们添加了自定义 CSS 类 bento-grid，以便通过 CSS 定位网格并应用不对称布局。
组块：组块使用垂直弹性布局，而 CSS 会将每张卡片设置为填满其网格区域，并允许特色图片在可用空间内扩展。
文本域：所有字符串均已更新为使用 ipsum-child 文本域。

完成这些更改后，图案的区块结构就完成了。现在只需定义用于塑造其视觉布局的 CSS 属性。

第 4 步：构建 Bento 样式表

打开子主题的 style.css 文件，并粘贴以下代码：

.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;
	}
}

以下是此样式表的详细说明：

grid-auto-flow: dense：在 CSS Grid 中启用密集排列。每个网格行的最小高度为 18rem。
.bento-grid > li:nth-child(10n + 1)：网格图案针对 10 篇文章的循环（10n）。循环中的第一项（10n + 1）成为主视觉卡片，横跨 2 列和 2 行。
li:nth-child(10n + 6)：第六篇文章横跨两列。第七和第八篇文章各横跨两行。
.wp-block-post-featured-image img：特色图片以绝对定位方式放置在零基准弹性包装器（flex: 1 1 0）内，并设置 object-fit: cover。这可确保图片流畅地适应网格行。

媒体查询会为较小屏幕重新定义网格的列数。

第 5 步：注册自定义模板

接下来，打开 templates/archive.html 并添加以下代码：

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

templates/archive.html 文件名遵循标准 WordPress 模板层级结构，当没有更具体的模板优先适用时，它会覆盖父主题的默认归档模板。

如果你还想替换首页布局，只需将相同代码复制到 templates/index.html 文件中。

信息

请注意，index.html 是备用模板，更具体的模板可能会优先生效。请查看我们对 WordPress 模板层级结构的深入概览，以了解更详细的说明。

其中的代码只需调用 hidden-archive-bento 包装器模式，从而保持模板结构简洁且模块化。

是时候进行测试了。上传你的子主题并启用它。然后前往下一节。

最终结果

你的模板现在已可在整个网站的各种归档页面中使用。你也可以将 Bento 模式添加到静态页面中，把 inherit 设置为 false，并根据需要配置所需的查询参数。

The Archive Bento Grid pattern in the WordPress 7.2 Site Editor. — WordPress 7.2 站点编辑器中的 Archive Bento Grid 模式。

如前所述，要将相同的布局应用到网站的索引页面，还需要创建一个引用相同模式的 templates/index.html 文件。

最后一张图片展示了我们的测试站首页，其中采用了精美的 Bento Grid 布局。

The home page is using a custom Bento-style template. — 首页使用的是自定义的 Bento 风格模板。

轻量且无障碍的主题

Ipsum 将现代 WordPress 编辑功能、可复用模式和灵活的样式选项融为一体，采用精心设计的极简风格。一旦了解其模式和模板如何协同工作，你就可以在默认博客布局的基础上大幅扩展该主题。本指南中介绍的 Bento Grid 只是你可以使用子主题基于 Ipsum 构建的内容之一。

如果速度和性能是你的首要目标，请记住代码只是方程式的一半。快速网站还取决于缓存、优化、站点配置和托管基础设施。查看我们的套餐，选择最适合你网站需求的方案。

文章《深入了解 Ipsum WordPress 主题及其扩展方法》最初发布于 Kinsta®。