WordPress 5.9では、ウェブサイトを構築する新しい方法が導入されました。フルサイト編集です。WordPress 5.9は、WordPressテーマの構築と動作の方法を完全に変えたため、WordPressユーザーにとってターニングポイントとなりました。
FSEの導入により、ブロックテーマとも呼ばれる新しいサイト構築機能を完全にサポートするテーマと、クラシックテーマと呼ばれる従来のPHPベースのテーマが区別されるようになりました。
時を経て、ブロックテーマ向けに構築された多くの機能がクラシックテーマにも拡張されました。その結果、クラシックテーマのロジックと構造を継承しつつ、ブロックテーマ用に設計されたさまざまな機能をサポートするハイブリッドテーマという第三のカテゴリーが生まれました。
この記事では、ハイブリッドテーマとその主な機能、開発者がハイブリッドテーマを強化する方法、ブロックテーマよりもハイブリッドテーマを選ぶべき場合について説明します。
さっそく見ていきましょう。
クラシックテーマかハイブリッドテーマか
Twenty Twenty-TwoとWordPress 5.9でブロックテーマが導入される以前は、クラシックテーマという区別は存在しませんでした。この用語は、ブロックテーマと区別するために生まれました。クラシックテーマは、ブロック機能をサポートしていないすべてのWordPressテーマです。
現在、純粋なクラシックテーマを見つけるのは簡単ではありません。というのも、5.9以降、そのようなテーマの多くがブロックテーマのために作られた多くの機能で強化され、2つのカテゴリーのテーマ編集とデザイン体験は、徐々に近づいています。
とはいえ、ハイブリッドテーマとブロックテーマとでは操作方法が異なります。
ハイブリッドテーマの基本機能
ハイブリッドテーマを使用すると、ウィジェット、メニュー、ページテンプレートなどの従来のWordPressプラグインや機能との互換性を維持しながら、WordPressブロックエディターの編集機能を活用することができます。
WordPressカスタマイザー
ハイブリッドテーマは通常、WordPressカスタマイザーをサポートしています。これは、WordPressサイトの外観を微調整し、変更内容をリアルタイムでプレビューできるビジュアル設定環境です。
サイトアイデンティティ、色とダークモード、背景画像、メニュー、ウィジェット、ホームページ設定など、一般的なカスタマイザー設定を提供するハイブリッドテーマの好例として、Twenty Twenty-Oneデフォルトテーマが挙げられます。
それぞれのテーマに特定のカスタマイザーコントロールを登録できるため、実際の機能はテーマによって異なります。以下の画像は、ThemeIsleの軽量ハイブリッドテーマ「Neve」のカスタマイザーです。
テーマには、サイトデザインの特定の側面を細かくコントロールできる高度な機能を追加することもできます。例えば、Neveにはサイトのヘッダーとフッターを作成するのに便利なビルダーも付帯します。
ブロックウィジェット
ハイブリッドテーマでは、ブロックベースのウィジェットエディターにより、ブロックを使ってウィジェットエリアをカスタマイズすることができます。これはWordPress 5.8で初めて導入されたもので、ウィジェットを使用するクラシックテーマで試すことができます。
ウィジェットエディターのインターフェースは、投稿エディターのものに似ています。次の画像は、Twenty Twenty-Oneテーマのフッターウィジェットエリアにある画像ブロックです。
カテゴリー、アーカイブ、最近の投稿、最近のコメントなどのクラシックウィジェットは、ハイブリッドテーマでもサポートされています。ウィジェットエディターは、ブロックベースのインターフェースを通じて独自のウィジェットを作成できるようにすることで、従来のWordPressウィジェットを補完します。
スタイルブックとブロックパターン
WordPress 6.8で導入された変更点により、エディタースタイルをサポートするハイブリッドテーマでは、スタイルブックを使用できるようになりました。これは言うなれば、ユーザーがコンテンツでブロックを使用しなくても、ウェブサイトで使用できるブロックをプレビューできるビジュアルインターフェースです。 ハイブリッドテーマでは、「外観」＞「デザイン」＞「スタイル」からスタイルブックを利用できます。 次の画像は、Kadenceハイブリッドテーマのスタイルブックを示しています。
同じインターフェースで、パターンの閲覧と管理ができます。
この機能は、Classic Editorプラグインで無効にしていない限り、5.0以降のすべてのWordPressでデフォルトで有効になっています。
開発者が知っておきたいテーマ構造
クラシックテーマとブロックテーマは、最終的な利用者にとっての機能性において異なるだけではありません。構造的な観点からも違いがあります。
クラシックテーマ
クラシックテーマは複数ファイルに依存します。その中でも最も重要なのが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を使ってハイブリッドテーマに追加できる主な機能のいくつかを見てみましょう。
タイポグラフィ
クラシックテーマに3つのフォントファミリーのサポートを追加したいとしましょう。この例では、Twenty Twenty-Oneを使用します。 まず、assets下にfontsフォルダを作成し、お好みのフォントをいくつかアップロードします。ここでは3つのフォント（Manrope Fira Code Beiruti）を追加します。これらのフォントはTwenty Twenty-Fiveから入手できます。
テキストエディタを開き、以下の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：フォントファミリーのスラッグであり、生成されたCSSカスタムプロパティに付加される:--wp--preset--font-family--{slug}fontFamily：CSS font-family値に適用される必須値fontFace：@font-faceCSS アットルールにマッピングされるフォントフェイスの任意の配列（カスタムウェブフォントでのみ必要）
theme.jsonを保存し、WordPress管理画面に移動します。新しい投稿または固定ページを作成し、サンプルテキストを追加し、ブロックサイドバーを開きます。「タイポグラフィオプション」ボタンをクリックし「フォント」を選択します。先ほどテーマに追加したものが見つかるはずです。 次の画像は、上記のtheme.jsonを追加する前と後の、段落ブロックのサイドバーの様子です。
グローバルスタイルのプロパティはテーマによって異なります。typography以外に、一般的にサポートされているプロパティでは、カラーパレット、レイアウト、カスタムスタイルを制御できます。以下の例は、Twenty Twenty-Oneでテストしています。
カラーパレット、グラデーション、デュオトーンフィルター
テーマまたは個々のブロックレベルで、settings.colorプロパティを使用してカスタムカラーのサポートを追加できます。例えば、以下のコードではデフォルトのパレットに2色を追加しています。
settings: {
"color": {
"palette": [
{
"name": "Dark blue",
"slug": "dark-blue",
"color": "#1e73be"
},
{
"name": "Bright green",
"slug": "bright-green",
"color": "#81d742"
}
]
},
}settings.color.paletteプロパティを使えば、好きなだけ色を登録できます。
グラデーションやデュオトーンフィルターのサポートも追加できます。
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"
}
]
}
}
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"
}
]
}
}
レイアウト
デフォルトのレイアウト設定をカスタマイズすることもできます。settings.layoutプロパティでは、デフォルトのコンテンツ幅を広げる設定が可能です。以下に例を示します。
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
}
}theme.jsonの詳細については、 theme.json の包括的な解説とWordPress の公式ドキュメントをご覧ください。
ブロックスタイルのバリエーション
WordPress 5.3で初めて導入されたブロックスタイルのバリエーションにより、開発者は特定のブロックの代替スタイルを作成できるようになりました。 要するに、ブロックスタイルとは、.is-style-{name} の形式でブロックのラッパー要素に追加されるCSSクラスです。ブロックスタイルのバリエーションは、ブロックサイドバーのスタイルパネルに表示され、ワンクリックでブロックのスタイルを選択できます。
ブロックスタイルのバリエーションは、いくつかの方法で追加可能です。まず、PHPregister_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() は2つの引数を受け取ります。
$block_name：ブロックタイプの名前、またはブロックタイプの配列$style_properties：スタイルプロパティを含む配列（この例では、name、label、inline_styleを使用）
上記のコードは、単一のCSSプロパティを持つブロックスタイルのバリエーションを生成します。このコードをテーマまたは子テーマのfunctions.phpファイルに追加すると、ブロックスタイルパネルにボタンが表示され、利用者がワンクリックでスタイルを設定できるようになります。
次の画像は、フロントエンドでのブロックスタイルのバリエーションを示しています。テーマはTwenty Twenty-Oneのままです。
上の例のように、PHPコードにインラインスタイルを追加することもできますが、スタイルが複雑で精巧になると、コードのメンテナンスがすぐに難しくなります。このような場合は、先に見たようにスタイルバリエーションを登録しますが、theme.jsonファイルでスタイルを定義します。 次の例では、見出しブロックに紺色のスタイルバリエーションを作成しています。 まず、テーマの関数ファイルにスタイルバリエーションを登録します。
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"
}
}
}
}
}
}
}
}これで、次の画像にあるように、見出しブロックの2つのスタイルバリエーションから選択できるようになります。
ブロックのバリエーション
ブロックバリエーションは、登録されたブロックの代替となります。ブロックスタイルのバリエーション（またはブロックスタイル）が、ワンクリックでコンテンツに追加できるブロックスタイルのカスタマイズバージョンであるのに対し、ブロックバリエーションはブロックの設定の代替オプションです。これにより、利用者はブロックインスタンスごとに同じ設定をすることなく、あらかじめ指定した設定でブロックをすばやく挿入できます。
Block Variations 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が常に最新バージョンのスクリプトを読み込むようにし、キャッシュされた古いバージョンが変更内容の表示をブロックするのを防ぐためです。開発中に特に便利です。
次に、ブロックバリエーションAPIが提供するregisterBlockVariation関数を使用して、スクリプトにブロックバリエーションを登録する必要があります。 以下に関数を示します。
const registerBlockVariation = ( blockName, variation )blockName：ブロック名（core/query）variation：ブロックタイプのバリエーションを記述するオブジェクト
variation オブジェクトは、以下のパラメータのいずれかを含むことができます。
name：（文字列）バリエーションの一意な識別子title：（文字列）人間が読めるバリエーションのタイトルdescription：（文字列）詳細な説明category：検索インターフェースで使用されるカテゴリkeywords：（配列）バリエーション発見を助ける用語の配列icon：（WPIcon）ブロックインサーターに表示するアイコンisDefault：（ブーリアン）現在のバリエーションがデフォルトかどうか（デフォルトは false）isActive：（関数/配列）ブロックが選択されたときにバリエーションが有効かどうかを決定するために使用する関数またはブロック属性の配列（isActiveがないと、WordPress内で対象のバリエーションを標準的なブロックや他のバリエーションと区別できず、エディターでの動作に一貫性がなくなる）attributes：（オブジェクト）ブロックのデフォルトを上書きする属性値innerBlocks：（配列[]）入れ子ブロックの初期設定example:（オブジェクト）ブロックプレビュー用の構造化データ（プレビューを無効にするには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' ]
} );このコードにより、ブロックインサーターに飛行機のアイコンの付された新しいブロックタイプが追加されます。飛行機アイコンをクリックすると、新しい見出しブロックのバリエーションを追加できます。見出しレベル（H2） を設定、テキストを中央に配置、プレースホルダーを設定し、ヘッダーのテキストと背景色を定義します。
注）このコードが正しく動作するためには、ハイブリッドテーマに'editor-color-palette' 、editor-stylesなどのエディター機能のサポートが追加されていることを確認してください。包括的なサポートリストについては、Block Variations APIを確認してください。
ブロックパターン
ブロックパターンは、コンテンツに追加したり、ブロックエディターのインターフェースを使用してカスタマイズしたりできる、あらかじめ構築されたブロックのグループです。ブロックテーマには通常、ブロックインサーターから直接コンテンツに追加できるブロックパターンが用意されています。ハイブリッドテーマは、クラシックテーマのユーザーがこの強力な機能を利用できるように、パターンのサポートを追加することができます。
テーマのルートに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' => '<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>',
)
);
}
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、HTML APIなどのブロックエディター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ベースで行われます。
ハイブリッドテーマとブロックテーマのどちらを選ぶかについて、絶対的な答えはありません。チームのスキル、構築するサイトのタイプ、パフォーマンス要件、後方互換性など、多くの要因に依存します。
まとめ
フルサイト編集とブロックテーマは、WordPressサイトの構築方法を劇的に変えました。ブロックの理念により、複雑なレイアウトを作成し、ウェブサイトのあらゆる側面を微調整できるようになりました。
しかし、サイトでブロックテーマと完全な互換性がない、またはクラシックテーマの特定の機能を必要とするためまだ大幅に飛躍する準備ができていない場合、ハイブリッドテーマは、プラグインやクラシックテーマの機能との互換性を維持しながらブロックテーマの機能を使用できるようにする、優れた選択肢です。
パフォーマンスは言うまでもありません。ブロックテーマは、大規模なブロックレンダリングとJavaScriptの使用により、リソースを大量に消費します。パフォーマンスを最適化したハイブリッドテーマは、必要なJavaScriptの負荷を減らすことで、サイトを軽量化し、パフォーマンスを向上させることができます。
