WordPress 5.9 引入了一种全新的网站构建方式：全站编辑。这对 WordPress 用户来说是一个转折点，因为它彻底改变了 WordPress 主题的构建和工作方式。
FSE 的推出也区分了完全支持新网站构建功能的主题（也称为区块主题）和传统的基于 PHP 的主题（我们现在称之为经典主题）。
随着时间的推移，许多为区块主题构建的功能已扩展到经典主题。这导致了第三类主题的出现，即混合主题，它仍然基于经典主题的逻辑和结构构建，但支持为区块主题设计的各种功能。
本文探讨了混合主题、它们的主要功能、开发人员如何增强它们，以及何时应该选择它们而不是区块主题。
Twenty Twenty-Two 是第一个支持全站编辑的 WordPress 主题
经典主题还是混合主题？
在 Twenty Twenty-Two 和 WordPress 5.9 引入区块主题之前，并没有“经典主题”这一概念。该术语的出现是为了将其与区块主题区分开来。经典主题是指所有不支持区块功能的 WordPress 主题。
Twenty Twenty-One 混合主题预览
如今，要找到纯粹的经典主题并不容易，因为自 5.9 版本以来，这些主题已增强了许多针对区块主题的功能，使得这两类主题的编辑和设计体验随着时间的推移越来越接近。
话虽如此，混合主题的使用方式仍然与区块主题不同。
混合主题的基本功能
使用混合主题，您的网站可以利用 WordPress 块编辑器的编辑功能，同时仍然兼容传统的 WordPress 插件和功能，例如小部件、菜单和页面模板。
WordPress定制器
混合主题通常支持 WordPress 定制器，这是一个可视化的配置环境，可让您微调 WordPress 网站的外观并实时预览更改。
Twenty Twenty-One 默认主题是混合主题的一个很好的例子，它提供了最常见的定制器设置，包括站点标识、颜色和暗黑模式、背景图像、菜单、小部件、主页设置等。
Twenty Twenty-One 主题的定制器
主题可以注册特定的定制器控件，因此功能因主题而异。下图展示了 ThemeIsle 轻量级混合主题 Neve 的定制器。
Neve WordPress 主题定制器预览
主题还可以注册高级功能，让用户能够精细控制网站设计的特定方面。例如，Neve 提供了一个强大的构建器，用于创建网站页眉和页脚。
Neve 在定制器中提供了一个 Header 构建器。
区块小工具
混合主题允许您使用区块小工具区域进行自定义，这得益于基于区块小工具编辑器。此功能最初在 WordPress 5.8 中推出，您可以在任何经典主题中使用小工具进行尝试。
Twenty Twenty-One 中的小工具屏幕
小工具编辑器界面与文章编辑器界面类似。下图展示了 Twenty Twenty-One 主题页脚小工具区域中的图片区块。
小工具编辑器为经典小工具带来区块功能
混合主题仍然支持经典小工具，例如分类、存档、近期文章或近期评论。小工具编辑器是对经典 WordPress 小工具的补充，允许用户通过其基于区块的界面创建自己的小工具。
样式表和区块样板
随着 WordPress 6.8 的最新更新，支持编辑器样式的混合主题可以使用样式表。样式表是一个可视化界面，允许用户预览可在其网站上使用的任何区块，而无需在其内容中使用这些区块。
您可以从“外观>设计>样式”访问混合主题中的样式表。
下图展示了 Kadence 混合主题的样式表。
Kadence 混合主题的样式表
在同一界面中，您可以浏览和管理样式。
Blocksy 主题样板
对于支持这些样式的混合主题，样式可在文章编辑器中使用。自 5.0 版本起，所有 WordPress 安装版本均默认启用该编辑器，除非您使用 Classic Editor 插件将其禁用。
Twenty Twenty-One 主题文章编辑器的区块插入器中的样式部分
主题结构：开发者概览
经典主题和区块主题不仅在最终用户的功能方面有所不同，在结构方面也有所不同。
经典主题
经典主题依赖于几个关键文件，其中最重要的是 style.css 文件。它提供主题的元数据并决定网站在前端的外观。
除了主题样式表之外，经典主题通常还有一个 functions.php 文件，用于构建主题的功能和支持。
经典主题还依赖于 PHP 模板，这些模板定义了页面结构及其主要区域：页眉、正文、侧边栏和页脚。当用户访问文章或页面时，WordPress 会根据一套严格的规则（称为模板层次结构）来确定使用哪个模板在屏幕上呈现内容。最常用的模板包括 index.php、page.php、single.php 等等。
经典主题可能会使用特定的 PHP 函数（动作和过滤器钩子），这些函数会在 WordPress 生命周期的特定时刻执行，使开发者能够使用子主题的 functions.php 文件中的 PHP 代码来扩展主题的功能。
您可能会猜到，对于没有编程技能的用户来说，定制经典主题尤其困难。
区块主题
区块主题也需要一个 style.css 文件来为 WordPress 提供主题元数据，但它们主要依赖于 theme.json 文件，该文件定义了主题的全局样式和设置。它包含一个 JSON 对象，该对象的属性定义了创建布局和网站页面外观所需的初始设置。
区块主题也使用模板和模板部分，但它们的结构与经典主题 PHP 模板不同。在区块主题中，模板和模板部分是包含特定标记和 JSON 对象的 HTML 文件。例如，考虑 Twenty Twenty-Five 默认主题的 home.html 模板：
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:pattern {"slug":"twentytwentyfive/hidden-blog-heading"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/template-query-loop"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->
此模板由 HTML 标签和注释形式的结构化元素组成。注释可能引用区块主题的其他典型元素，例如模板部分和样板，它们由区块或其他嵌套元素组成。
向混合主题添加区块功能
如上所述，使用经典主题，您需要添加自定义代码来更改网站的布局或功能，这通常涉及模板文件或 functions.php 文件。相比之下，区块主题使非开发人员能够更好地控制网站布局和外观。
混合主题提供的区块功能比区块主题少，但仍可以通过样板和全局样式提供增强的布局和样式控制。
让我们探索一些可以集成到经典主题中的强大区块功能，并学习如何有效地实现它们。
全局样式
WordPress 5.8 引入了全局样式功能，这是一个可视化界面，允许用户通过集中式界面控制网站的外观和风格，开发者可以通过 theme.json 文件控制 WordPress 网站的样式。
要在混合主题中启用此功能，只需将 theme.json 文件添加到主题的根文件夹中即可。让我们来看看您可以使用 theme.json 添加到混合主题的一些主要功能。
字体排版
假设您想为经典主题添加对三种字体系列的支持。在本例中，我们将使用 Twenty Twenty-One 主题。
首先，在 assets 下创建一个 fonts 文件夹，并上传您选择的字体。我们添加了三种字体：Manrope、Fira Code 和 Beiruti。您可以从 Twenty Twenty-Five 主题中获取这些字体。
我们为 Twenty Twenty-One 主题添加了三种字体和一个 theme.json 文件。
打开文本编辑器并创建以下 theme.json 文件：
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
},
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
],
"fontWeight": "200 800",
"fontStyle": "normal",
"fontFamily": "Manrope"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": "\"Fira Code\", monospace",
"fontFace": [
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
],
"fontWeight": "300 700",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
}
]
},
{
"name": "Beiruti",
"slug": "beiruti",
"fontFamily": "Beiruti, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/beiruti/Beiruti-VariableFont_wght.woff2"
],
"fontWeight": "300 700",
"fontStyle": "normal",
"fontFamily": "Beiruti"
}
]
}
]
}
}
}
Settings.typography.fontFamilies 属性允许您注册任意数量的自定义字体系列。对于每种字体，您需要声明以下属性：
-
name：字体系列的必需可读标题。 -
slug：字体系列的必需 slug。它将附加到生成的 CSS 自定义属性：--wp--preset--font-family--{slug}。 -
fontFamily：必需值，将映射到 CSS font-family 值。 -
fontFace：一个可选的字体数组，映射到@font-faceCSS at 规则。只有在使用自定义网页字体时才需要此属性。
保存您的 theme.json 并导航到您的 WordPress 信息中心。创建一个新的帖子或页面，添加一个包含示例文本的段落，然后打开区块侧边栏。点击“排版选项”按钮并选择“字体”。您应该会找到刚刚添加到主题的字体系列的选项。
下图展示了添加上述 theme.json 前后段落区块侧边栏的样子。
带有 Twenty Twenty-One 主题（不带 theme.json）的段落区块侧边栏
使用 theme.json 格式的 Twenty Twenty-One 主题的段落区块侧边栏
全局样式属性因主题而异。除了 typography 之外，常用的属性允许您控制调色板、布局和自定义样式。以下示例已在 Twenty Twenty-One 上测试过。
调色板、渐变和双色调滤镜
您可以使用主题或单个区块级别的 settings.color 属性添加对自定义颜色的支持。例如，以下代码将两种颜色添加到默认调色板：
settings: {
"color": {
"palette": [
{
"name": "Dark blue",
"slug": "dark-blue",
"color": "#1e73be"
},
{
"name": "Bright green",
"slug": "bright-green",
"color": "#81d742"
}
]
},
}
您可以使用 settings.color.palette 属性来注册任意数量的颜色。
Twenty Twenty-One 新增自定义调色板
您还可以添加对渐变和双色调滤镜的支持：
settings: {
"color": {
"gradients": [
{
"gradient": "linear-gradient(135deg, #0073e6, #8fceff)",
"name": "Clear Sky",
"slug": "clear-sky"
},
{
"gradient": "linear-gradient(to right top, #ff8c00, #ff0080)",
"name": "Vivid Sunset",
"slug": "vivid-sunset"
}
]
}
}
我们通过 theme.json 在 Twenty Twenty-One 的全局样式中添加了两种渐变
settings: {
"color": {
"duotone": [
{
"colors": [ "#0A2F51", "#F5D04E" ],
"name": "Deep Sea Gold",
"slug": "deep-sea-gold"
},
{
"colors": [ "#3A0CA3", "#FFB703" ],
"name": "Purple Amber",
"slug": "purple-amber"
},
{
"colors": [ "#1B4332", "#BAE6C4" ],
"name": "Forest Mist",
"slug": "forest-mist"
},
{
"colors": [ "#000000", "#FFFFFF" ],
"name": "Black and White",
"slug": "black-and-white"
}
]
}
}
Twenty Twenty-One 的全局样式新增双色调滤镜
布局
您还可以自定义默认布局设置。settings.layout 属性允许您设置默认内容宽度和宽对齐宽度。以下是示例：
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
}
}
如需更深入地了解 theme.json，请查看我们关于 theme.json 的全面教程以及 WordPress 官方文档。
区块样式变体
区块样式变体首次在 WordPress 5.3 中推出，它允许开发者为特定区块创建替代样式。
简而言之，区块样式是以 .is-style-{name} 形式添加到块包装元素的 CSS 类。
区块样式变体显示在区块侧边栏的“样式”面板中，您只需单击一下即可为区块选择样式。
Twenty Twenty-One 图像区块的默认样式变体
您可以通过多种方式注册区块样式变体。
首先，您可以使用 PHP 的 register_block_style() 函数注册区块样式。例如，您可以在主题的函数文件中注册以下样式变体：
if ( function_exists( 'register_custom_block_style' ) ) {
register_block_style(
'core/image',
array(
'name' => 'custom',
'label' => __( 'Custom', 'text-domain' ),
'inline_style' => '.wp-block-image.is-style-custom img { border-radius: 12px; }',
)
);
}
add_action( 'init', 'register_custom_block_style' );
register_block_style() 接受两个参数：
$block_name：区块类型的名称或区块类型数组$style_properties：包含样式属性的数组。在本例中，我们使用了name,label, 和inline_style。
上面的代码使用单个 CSS 属性生成区块样式变体。将此代码添加到主题或子主题的 functions.php 文件中后，区块样式面板中会显示一个按钮，用户只需点击一下即可设置样式。
文章编辑器中图片区块的自定义样式变体
下图展示了前端的区块样式变体。主题仍然是 Twenty Twenty-One。
使用 Twenty Twenty-One 实现区块样式变体
您可以像上例一样在 PHP 代码中添加内联样式，但随着样式变得越来越复杂，代码很快就会变得难以维护。在这种情况下，您可以像前面提到的那样注册样式变体，但需要在 theme.json 文件中定义样式。
在以下示例中，我们为Heading 区块创建了一个深蓝色样式变体。
首先，在主题的 functions 文件中注册样式变体：
add_action('init', 'register_block_style_labels');
function register_block_style_labels() {
$block_types = ['core/heading'];
if (function_exists('register_block_style')) {
foreach ($block_types as $block_type) {
register_block_style(
$block_type,
array(
'name' => 'dark-blue-bg',
'label' => __('Dark Blue', 'twentytwentyone')
)
);
}
}
}
接下来，在 theme.json 文件中定义变体样式：
"settings": {
"styles": {
"blocks": {
"core/heading": {
"variations": {
"dark-blue-bg": {
"color": {
"background": "#2860a6",
"text": "#ffffff"
},
"spacing": {
"padding": {
"top": "0.3em",
"right": "0.4em",
"bottom": "0.3em",
"left": "0.4em"
}
}
}
}
}
}
}
}
现在，您的主题用户可以在 Heading 区块的两种样式变体之间进行选择，如下图所示。
Twenty Twenty-One 主题的 Heading 区块样式变体
区块变体
区块变体是任何已注册区块的替代版本。区块样式变体（或区块样式）是区块样式的自定义版本，用户只需单击即可将其添加到内容中，而区块变体是区块设置的替代版本。这些变体允许用户快速插入具有预配置设置的块，而无需为每个块实例设置相同的配置。
区块变体 API 允许混合主题通过 JavaScript 注册区块变体。在最简单的情况下，创建脚本并将其加入队列可能就可以了，但如果您经常使用 JavaScript 和 Gutenberg 区块，则可能需要将构建工具整合到您的工作流程中。（推荐阅读）
假设您想创建一个包含一组预配置选项的区块变体，以便只需极少的额外配置即可快速将其插入到您的文章或页面中。
第一步是创建一个空的 JavaScript 文件并将其加载到编辑器中。您需要使用 wp_enqueue_script() 和 enqueue_block_editor_assets 操作钩子将其添加到主题的 functions.php 文件中。
add_action( 'enqueue_block_editor_assets', function () {
wp_enqueue_script(
'my-block-variations',
get_theme_file_uri( 'assets/js/block-variations.js' ) . '?cache_bust=' . time(),
array(
'wp-blocks',
'wp-dom-ready',
'wp-i18n',
'wp-edit-post'
),
wp_get_theme()->get( 'Version' ),
true
);
} );
在上面的代码中，我们使用 ?cache_bust=' . time() 为 block-variations.js 的 URL 添加唯一时间戳（例如， block-variations.js?cache_bust=1698765432 ）。这在开发过程中尤其有用，因为它可以确保浏览器、服务器或 CDN 始终加载脚本的最新版本，防止过时的缓存版本阻碍更改的显示。
接下来，您需要使用 Block Variations API 提供的 registerBlockVariation 函数在脚本中注册区块变体。
函数签名如下：
const registerBlockVariation = ( blockName, variation )
blockName：区块的名称（例如core/query）。variation：描述区块类型变体的对象。
variation 对象可以包含以下任意参数：
name：(string)变体的唯一标识符。title：(string)易于理解的变体标题。description：(string)详细描述。category：(string)搜索界面中使用的类别。keywords：(Array)帮助用户发现变体的关键词数组。icon：(WPIcon)在区块插入器中显示的图标。isDefault：(boolean)当前变体是否为默认变体。默认为 false。isActive：(Function/Array)用于确定在选择区块时变体是否处于活动状态的函数或区块属性数组。如果没有isActive，WordPress 将无法区分您的变体与标准区块或其他变体，从而导致编辑器中的行为不一致。attributes：(Object)覆盖区块默认值的属性值。innerBlocks：(Array[])嵌套区块的初始配置。example：(Object)区块预览的结构化数据。设置为 undefined 可禁用预览。scope：(WPBlockVariationScope[])变体适用的范围列表。如果未提供，则假定所有可用的范围。可用选项包括block,inserter, 和transform。默认为block和inserter。
现在，您可以将 JavaScript 添加到 block-variations.js 文件：
wp.blocks.registerBlockVariation( 'core/heading', {
name: 'custom-centered-text',
title: 'Custom Centered Text',
description: 'This is a block variation with custom attributes.',
attributes: {
level: 2,
textAlign: 'center',
placeholder: 'Add your text here',
style: {
color: {
text: '#1e73be',
background: '#81d742'
}
}
},
isActive: ( blockAttributes ) => {
return (
blockAttributes.level === 2 &&
blockAttributes.textAlign === 'center' &&
blockAttributes.style?.color?.text === '#1e73be' &&
blockAttributes.style?.color?.background === '#81d742'
);
},
icon: 'airplane',
scope: [ 'inserter' ]
} );
此代码向区块插入器添加了一个带有飞机图标的新区块类型。点击飞机图标后，一个新的 Heading 区块变体将根据您自定义的设置添加到页面。我们设置了标题级别 ( H2 )，使文本居中，设置了占位符，并定义了标题的文本和背景颜色。
Twenty Twenty-One 混合主题的区块变体示例
注意：为了使此代码正常工作，请确保您的混合主题添加了对编辑器功能（例如 'editor-color-palette', editor-styles等）的支持。如需更全面的支持列表，请查看区块变体 API。
区块样板
区块样板是预先构建的区块组，您可以将其添加到内容中，并使用区块编辑器的界面进行自定义。
区块主题通常提供数量不等的区块样板，您可以直接从区块插入器添加到内容中。混合主题可以添加对样板的支持，以便经典主题用户可以受益于这一强大功能。
注：有多种方法可以将样板添加到 WordPress 主题，我们在 WordPress 样板深度指南中已全部介绍。
您可以在主题根目录下创建一个 patterns 文件夹并包含您的区块样板，或者您也可以在主题的 functions.php 或其他 .php 文件中注册它们。
为了保持秩序，您可以创建一个文件 inc/block-patterns.php 并将其添加到主题的 function.php 文件中，代码如下：
require get_template_directory() . '/inc/block-patterns.php';
完成后，您可以在编辑器中构建您的样板，复制代码，并使用 register_block_pattern_category 和 register_block_pattern() 函数在 inc/block-patterns.php 中注册您的样板和样板类别：
if ( function_exists( 'register_block_pattern_category' ) ) {
function my_hybrid_theme_register_block_pattern_category() {
register_block_pattern_category(
'myhybridtheme',
array( 'label' => esc_html__( 'My Hybrid Theme', 'myhybridtheme' ) )
);
}
add_action( 'init', 'my_hybrid_theme_register_block_pattern_category' );
}
if ( function_exists( 'register_block_pattern' ) ) {
function my_hybrid_theme_register_block_pattern() {
// My pattern
register_block_pattern(
'myhybridtheme/huge-heading',
array(
'title' => esc_html__( 'Huge heading', 'myhybridtheme' ),
'categories' => array( 'myhybridtheme' ),
'viewportWidth' => 1440,
'blockTypes' => array( 'core/heading' ),
'content' => '<!-- wp:heading {"textAlign":"center","align":"wide","fontSize":"gigantic","style":{"typography":{"lineHeight":"1.2"}}} --><h2 class="alignwide has-text-align-center has-gigantic-font-size" style="line-height:1.2">' . esc_html__( 'A simple Heading in a pattern', 'myhybridtheme' ) . '</h2><!-- /wp:heading -->',
)
);
}
add_action( 'init', 'my_hybrid_theme_register_block_pattern' );
}
您可以在 WordPress 信息中心的“外观 > 设计 > 样板 > My Hybrid Theme”下预览您的样板，并将其应用于您的内容中。
混合主题中的样板
您还可以复制和导出您的样板，并将其导入到其他 WordPress 网站。
只需点击几下即可添加样板
模板部件
虽然混合主题使用经典的 PHP 模板和模板部件，但您可以在主题的 functions.php 文件中添加对区块模板部件的支持：
function my_hybrid_theme_setup() {
add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'my_hybrid_theme_setup' );
添加模板部件支持后，您可以使用 block_template_part 函数将任意模板部件添加到混合主题的任何模板文件中。
我们来看一个实际示例。首先在主题根目录下创建一个 /parts 文件夹，并将 footer.html 文件上传到其中。在本例中，我们从 Twenty Twenty-Five 主题复制了页脚：
<!-- wp:group {"align":"full","className":"is-style-section-5","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-style-section-5" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group">
<!-- wp:site-title {"level":2,"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"}},"fontSize":"x-large"} /-->
<!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|20"}},"fontSize":"x-large","layout":{"type":"flex","justifyContent":"center"},"ariaLabel":"Social media"} -->
<!-- wp:navigation-link {"label":"Facebook","url":"#"} /-->
<!-- wp:navigation-link {"label":"Instagram","url":"#"} /-->
<!-- wp:navigation-link {"label":"X","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:group -->
<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">
Designed with <a href="https://wordpress.org" rel="nofollow">WordPress</a>
</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
现在您可以使用 block_template_part 函数将此模板部分包含在经典模板中：
<?php block_template_part( 'footer' ); ?>
例如，您可以将其包含在 Twenty Twenty-One 的 footer.php 文件中。下图显示了屏幕上的结果。
混合主题中包含的区块模板部分
您还可以使用以下代码将模板部分添加到区块模板中：
<!-- wp:template-part {"slug":"footer"} /-->
例如，您可以从 Twenty Twenty-Five 复制 page.html 模板的代码：
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|60"}}}} /-->
<!-- wp:post-title {"level":1} /-->
<!-- wp:post-content {"align":"full","layout":{"type":"constrained"}} /-->
</div>
<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->
将此模板保存在您的 /templates 文件夹中，并将其命名为 page.html。WordPress 将根据模板层次结构自动加载它。此模板将自动从混合主题的 /parts 文件夹中包含 header.html 和 footer.html 模板部分。
何时选择混合主题而非区块主题
在以下情况下，混合主题可能是最佳选择：
- 当您想使用块主题的一些现代功能，但又不想彻底重构现有网站时。混合主题允许您利用区块编辑器、全局样式和区块样板等区块功能。混合主题还支持区块编辑器 API，例如区块绑定 API、 交互 API 和 HTML API。这意味着您无需进行复杂的迁移即可创建现代网站。
- 当您想保持与经典插件或小部件的兼容性，但又不想放弃区块主题的一些强大功能时。某些插件的旧版本可能与区块主题存在兼容性问题，例如旧版本的 Contact Form 7、NextGEN Gallery、Custom Post Type UI 和其他插件。虽然建议将插件更新到最新版本以防止安全漏洞，但某些 WordPress 网站可能安装了旧版本的插件。如果您尚未准备好升级所有插件，可以考虑安装混合主题。
- 当您试图在设计和性能之间找到最佳平衡点时。一些流行的混合主题针对速度进行了优化，可以提供比区块主题更佳的性能。此外，它们还支持区块主题的无代码/低代码方法，从而提供比经典主题更好的设计体验。性能优化的混合主题（例如 Neve 或 Kadence）可让您创建外观现代的网站，而不会影响性能。
- 当您希望平稳过渡到 FSE 时。有时，从旧的设计逻辑过渡到新的设计逻辑可能需要一些时间，尤其是在团队合作开发大型网站时，学习曲线是一个值得关注的问题。混合主题允许您的团队在尝试区块功能的同时，保留熟悉的设计工具（例如定制器和经典 PHP 模板）。
但是，在某些情况下，混合主题并非最佳选择。例如：
- 当网站设计工具优先于整体性能时。当您想要使用某些特定于完整网站编辑的功能（例如网站编辑器、通过区块进行的完整模板编辑以及全局样式界面）时，混合主题不是一种选择，因为这些功能在混合主题中不受支持或仅部分支持。
- 基于 WordPress REST API 的无头 WordPress 网站。在这种情况下，区块主题是首选，因为区块数据可以通过 REST API（例如，请参阅端点
/wp/v2/blocks）或 WPGraphQL 轻松访问，而混合主题可能会增加复杂性。 - 当首选无代码网站构建方法时。混合主题不支持通过网站编辑器创建或编辑模板。虽然可以添加对模板部分的支持，但目前这种支持有限，并且模板管理主要基于 PHP。
归根结底，在混合主题和区块主题之间进行选择并没有硬性规定。这取决于许多因素，例如您的团队具备的技能、正在构建的站点类型、性能要求、向后兼容性等等。
小结
全站编辑（Full Site Editing）和区块主题极大地改变了我们构建 WordPress 网站的方式。区块理念赋予用户更强大的能力来创建复杂的布局并微调网站的各个方面。
但是，如果您尚未准备好迈出这一步，因为您的网站可能与区块主题不完全兼容，或者因为它需要经典主题的特定功能，那么混合主题是一个不错的选择，它允许您使用区块主题的一些强大功能，同时保持与插件和经典主题功能的兼容性，让您兼得两者之长。
更不用说性能了。由于大量的区块渲染和 JavaScript 的使用，区块主题可能会占用大量资源。性能优化的混合主题可以通过减少所需的 JavaScript 负载，使您的网站更轻量，性能更佳。
评论留言