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 負載，使您的網站更輕量，效能更佳。
評論留言