ブロックテーマの作成

Topics

このコンテンツは移動しました。

ブロックテーマの作成に関するドキュメントについては、Theme Developer Handbook を参照してください。

Top ↑

2022/5/2 以前の情報

(2022/5/2) 訳注: これ以降の文書は、Theme Developer Handbook に移動されました。便宜上、しばらく掲載しますが、最新の情報については、Theme Developer Handbook を参照してください。

このチュートリアルではブロックテーマの作り方を紹介し、テーマ開発者の「フルサイト編集 (full site editing)」への移行を支援します。まず、はじめに「ブロックテーマの概要」を読むことをお勧めします。

このチュートリアルでは、ブロックベーステーマに必要なファイルの一覧、テンプレートとテンプレートパーツの組み合わせ、グローバルスタイルへのプリセットの追加、サイトエディターでのブロックの追加とテンプレートのエクスポートについて学びます。

ブロックテーマは WordPress 5.9 が必要です。それ以前のバージョンの WordPress でブロックテーマを使用するには、Gutenberg プラグインのバージョン 11.0 以降が必要です。

Top ↑

目次

  1. ブロックベーステーマを作成するには何が必要か ?
  2. テーマのセットアップ
  3. テンプレートとテンプレートパーツの作成
  4. theme.json – グローバルスタイル
  5. テンプレートの作成
  6. グローバルスタイルプリセット
  7. テーマの例

Top ↑

ブロックテーマを作成するには何が必要か ?

ブロックテーマを使用するには Gutenberg プラグインを使用する必要があります。

Top ↑

必要なファイルとファイル構造

任意のテーマを有効化するには2つのファイル、index.php と style.css が必要です。ブロックテーマが有効だとプラグインに知らせるには、テーマはフォルダー templates 内にテンプレート index.html を含める必要があります。

テーマはオプションで functions.php ファイルや、グローバルなスタイルを管理する theme.json ファイルを含むこともできます。

テンプレートパーツはオプションです。含める場合は、parts フォルダーに置く必要があります。

テーマはオプションでグローバルスタイルプリセットを提供する styles フォルダを含めても構いません。

ファイル構造

theme
|__ style.css
|__ functions.php
|__ index.php
|__ theme.json
|__ templates
	|__ index.html
	|__ ...
|__ parts
	|__ header.html
	|__ footer.html
	|__ ...
|__ styles
	|__ red.json
	|__ blue.json
	|__ ...

Top ↑

テーマのセットアップ

この例でのフォルダー名は fse-tutorial です。

テーマフォルダー内に、templates フォルダーと parts フォルダーを作成してください。

style.css ファイルを作成してください。style.css ファイルのヘッダーにはクラシックテーマ (従来のテーマ) と同じ要素を記述します。

/*
Theme Name: FSE Tutorial
Theme URI:
Author: The WordPress team
Author URI: https://wordpress.org/
Description:
Tags: full-site-editing, blog
Version: 1.0.0
Requires at least: 5.9
Tested up to: 5.9
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fse-tutorial

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

ブランクの index.php ファイルを作成してください。このファイルは、テーマが Gutenberg なしで有効化された際のフォールバックとして使用されます。

templates フォルダー内に、ブランクの index.html ファイルを作成してください。

オプションで、functions.php ファイルを作成してください。

このファイルで style.css ファイルをエンキューし、追加のファイルを含め、エディターのスタイルシートを有効化し、テーマサポートを追加できます。

テーマサポートのほとんどは theme.jsonファイルに追加します。title タグはすでにすべてのブロックテーマで有効です。また、コメントリプライスクリプトはコメントブロックに含まれているため、エンキューする必要はありません。

<?phpif ( ! function_exists( 'fse_tutorial_theme_setup' ) ) :
	/**
	 * Sets up theme defaults and registers support for various WordPress features.
	 *
	 * Note that this function is hooked into the after_setup_theme hook, which runs
	 * before the init hook. The init hook is too late for some features, such as indicating
	 * support for post thumbnails.
	 */function fse_tutorial_theme_setup() {
		/**
		 * Add default posts and comments RSS feed links to <head>.
		 */
		add_theme_support( 'automatic-feed-links' );

		/**
		 * Enable support for post thumbnails and featured images.
		 */
		add_theme_support( 'post-thumbnails' );

		add_theme_support( 'editor-styles' );

		add_theme_support( 'wp-block-styles' );
	}
endif;
add_action( 'after_setup_theme', 'fse_tutorial_theme_setup' );

/**
 * Enqueue theme scripts and styles.
 */function fse_tutorial_theme_scripts() {
	wp_enqueue_style( 'fse-tutorial-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'fse_tutorial_theme_scripts' );

この段階でテーマには次のようなファイルとフォルダーがあります。

theme
 |__ style.css
 |__ functions.php (optional)
 |__ index.php
 |__ templates
 	|__ index.html
 |__ parts
 	|__ (empty folder)

Top ↑

テンプレートとテンプレートパーツの作成

手順を進める前に、テーマをインストールし、有効化してください。

テンプレートとテンプレートパーツの作成にはいくつかの方法があります。

  • 手動で、ブロックマークアップを含む HTML ファイルを作成する。
  • サイトエディターを使用する。
  • ブロックエディターのテンプレート編集モードを使用する。

Top ↑

手動でのテンプレート作成

2つのテンプレートパーツファイル header.html と footer.html を作成し、parts フォルダー内に保存します。

手動で HTML ファイルにブロックを追加する場合、接頭辞 wp: を付けたブロック名を含む HTML コメントで始めてください。 以下の例にあるように自己終了タグ、複数行ブロックの両方があります。

header.html にサイトタイトルブロックを追加してください。

<!-- wp:site-title /-->

著作権表示を footer.html に追加します。

<!-- wp:paragraph --><p>Proudly powered by <a href="https://wordpress.org/">WordPress</a>.</p><!-- /wp:paragraph -->

ブロックは自己完結型です。開始タグと終了タグは同じテンプレートにある必要があります。 たとえば、ヘッダーテンプレート内にグループブロックの開始タグを置き、終了タグをフッターテンプレートに置くことはできません。

index.html を開き、2つの HTML コメントを追加することで、テンプレートパーツを含めます。 HTML コメントは wp:template-part で始まります。これはテンプレートパーツブロックの名前です。 各テンプレートパーツはスラッグ、拡張子のないファイル名で識別されます。

HTML コメント内には、中括弧、キー slug、テンプレートパーツの名前を追加してください。

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

テンプレートパーツはデフォルトで <div> タグを使用します。tagName 属性を追加して、HTML 要素を <header> と <footer> に変更してください。

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

すべてのブロック属性は中括弧内に置きます。footer.html 内に中央揃えで段落を配置したければ、align 属性を使用します。

<!-- wp:paragraph {"align":"center"} --><p class="has-text-align-center">
	Proudly powered by <a href="https://wordpress.org/">WordPress</a>.
</p><!-- /wp:paragraph -->

ブロックコンテンツをラップする HTML 要素も、対応する CSS クラス has-text-align-center を使用します。

正しいブロックマークアップが何か分からない場合は、ブロックエディターでブロックを追加し、コードエディターモードにしてからブロックマークアップをテーマファイルにコピーします。

Top ↑

サイトエディターでのテンプレート作成

WordPressの管理画面から「サイトエディター」を開いてください。デフォルトでは、空白のインデックステンプレートが表示されます。

新規テンプレートパーツブロックを挿入してください。デフォルトのブロック名は「Untitled Template Part」です。 ブロック設定サイドバーの「高度な設定」を開き、以下の変更を行います。 「タイトル」と「エリア」を「ヘッダー」に、HTML要素を <header> に変更します。

サイトのフッターにも同様の作業を行います。タイトルとエリアを「フッター」に変更し、HTML要素を <footer> に変更します。

ヘッダーのテンプレートパーツにサイトタイトルブロックを、フッターに段落ブロックを追加します。 変更内容を保存します。2つのテンプレートパーツを保存するのか、インデックステンプレートを保存するのか、3つすべてを保存するのかを尋ねられます。 チェックボックスが正しいことを確認し、3つすべてを保存します。

Top ↑

テンプレート編集モード

テンプレート編集モードは、サイトエディターの複雑なインターフェースを使わずにサイトを編集する方法です。 このモードはサイトエディターよりも制限され、テンプレートの選択、テンプレート間の移動ができません。

テンプレート編集モードは、ブロックエディターからアクセスします。 新しい投稿または固定ページを作成します。次に、ドキュメント設定サイドバーを開き、「ステータスと公開状態」の下にある「テンプレート」セクションに移動します。 ここには、現在のテンプレートに関する情報と、選択可能な既存テンプレートのリストが表示されます。 「新規」リンクを選択して、新しいテンプレートを作成します。 サイトエディタと同じ方法でテンプレートを編集、保存します。

Top ↑

エクスポート

サイトエディターまたはテンプレート編集モードで作成、編集されたテンプレートやテンプレートパーツは、カスタム投稿タイプとしてデータベースに保存されます。 これらをテーマファイルとしてエクスポートするには、以下の手順に従ってください。

  • サイトエディターで右サイドバーの「オプション」メニュー (3点リーダーアイコン) を開く。
  • 「エクスポート」オプションを選択して、ファイルを含む zip ファイルをダウンロードする。ファイルを解凍する。
  • 更新された index.html ファイルを theme/templates/ から、テーマの templates フォルダにコピーする。
  • テンプレートパーツを theme/parts/から、テーマの parts フォルダにコピーする。

保存されたテンプレートは、テーマファイルよりも優先されます。

サイトエディターの詳細については、サポート記事 を参照してください。

Top ↑

追加テンプレート

Top ↑

ブログ

これで、テーマに基本的なサイトのヘッダーとフッターができましたが、コンテンツは表示されません。 投稿のリストを作成するには、クエリループブロックと投稿テンプレートブロックを使用します。

サイトエディターを使用している場合でも、テーマファイルを直接編集している場合でも、インデックステンプレートを開きます。

まず、投稿のコンテナとして機能するグループブロックを追加します。 次に、"layout":{"inherit":true} を使用して、このグループ内のブロックの幅のオプションを有効にします。

<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"layout":{"inherit":true}} --><div class="wp-block-group"></div><!-- /wp:group --><!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

グループブロック内の <div> を、tagName 属性を使用して <main> 要素に変更します。

<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"layout":{"inherit":true},"tagName":"main"} --><main class="wp-block-group"></main><!-- /wp:group --><!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

エディターを使用している場合は、ブロック設定のサイドバーにある「高度な設定」で、要素を <div> から <main> に変更してください。

グループ内にクエリループブロックを追加します。 エディタでクエリループブロックを配置すると、投稿テンプレートが内側のブロックとして使用され、空のループから始めるか、記事タイトルやアイキャッチ画像などの選択した記事ブロックを含めるかを選択できます。

マークアップ例

<!-- wp:query --><div class="wp-block-query"><!-- wp:post-template --><!-- wp:post-title /--><!-- wp:post-date /--><!-- wp:post-excerpt /--><!-- /wp:post-template --></div><!-- /wp:query -->

クエリページネーションブロックは、クエリループの内部でのみ使用できます。クエリの内側、投稿テンプレートの外側に配置してください。

<!-- wp:query --><div class="wp-block-query"><!-- wp:post-template --><!-- wp:post-title /--><!-- wp:post-date /--><!-- wp:post-excerpt /--><!-- /wp:post-template --><!-- wp:query-pagination --><div class="wp-block-query-pagination"><!-- wp:query-pagination-previous /--><!-- wp:query-pagination-numbers /--><!-- wp:query-pagination-next /--></div><!-- /wp:query-pagination --></div><!-- /wp:query -->

Top ↑

投稿と固定ページ

次に、単一の投稿を表示する新しいテンプレートを作成します。 テーマファイルを直接編集している場合は、templates フォルダ内にファイル single.html を作成します。

サイトヘッダーとサイトフッターのテンプレートパーツを追加します。

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

投稿のコンテナとして機能するグループブロックを追加します。

<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main"} --><main class="wp-block-group"></main><!-- /wp:group --><!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

グループブロックの中に自由にブロックを追加してください。いくつかの新しいブロックを利用可能です。

  • Post content: <!-- wp:post-content /-->
  • Post title: <!-- wp:post-title /-->
  • Post author: <!-- wp:post-author /-->
  • Post date: <!-- wp:post-date /-->
  • Post featured image: <!-- wp:post-featured-image /-->
  • Post tags: <!-- wp:post-terms {"term":"post_tag"} /-->
  • Post categories: <!-- wp:post-terms {"term":"category"} /-->
  • Next and previous post: <!-- wp:post-navigation-link /--><!-- wp:post-navigation-link {"type":"previous"} /-->

HTML ファイルを保存するか、サイトエディターで作業している場合は、投稿テンプレートを保存してエクスポートします。

すべてのブロックをコピーして、ページを表示するテンプレートを作成します。 オプションで、templates フォルダ内で single.html を page.html としてコピーします。 固定ページテンプレート用にブロックを調整して、保存します。

Top ↑

アーカイブ

テーマにアーカイブテンプレートや検索結果テンプレートがない場合、インデックステンプレートがフォールバックとして使用されます。 クエリブロックが正しい結果を表示するように、inheritという属性があります。 inherit はデフォルトで有効になっており、表示しているページに応じてクエリをフィルタリングします。

必要に応じてアーカイブカテゴリーテンプレートを作成してください。インデックスファイルをコピーし、アーカイブタイトルブロックを使用してタイトルを追加できます。これは、クエリタイトルブロックのバリエーションです。 <!-- wp:query-title {"type":"archive"} /-->

Top ↑

theme.json – グローバルスタイル

theme.jsonは、ウェブサイトとブロックの両方で、機能を有効化、無効化したり、デフォルトスタイルの設定に使用する構成ファイルです。

スタイル設定は、CSSカスタムプロパティに変換され、エディターとフロントにエンキューされます。 これにより、テーマがブロックスタイルをエンキューする必要性が減ります。

このチュートリアルを最大限に活用するには、グローバルスタイルのドキュメント を参照してください。

JSON フォーマットについて学習する (外部リンク)

メインのテーマフォルダー内に theme.json ファイルを作成してください。

まずファイルに中括弧を追加してください。

{}

theme.jsonフォーマットのバージョン番号を追加します。WordPress 5.9の場合、バージョン番号は2です。

{
	"version": 2
}

次に、3つのメインセクションを追加します。

  • settings – 機能を有効化し、スタイルのプリセットを作成する。
  • styles – サイト、要素、ブロックにスタイルを適用する。
  • templateParts – テンプレートエリアにテンプレートパーツファイルを割り当てる。
{
	"version": 2,
	"settings": {},
	"styles": {},
	"templateParts": []
}

コンマでオブジェクトを区切ることを忘れないでください。

Top ↑

機能の有効化と無効化

有効化または無効化できる機能の一覧は、theme.json のドキュメントを参照してください。

ブロックが機能をサポートする方法には2種類あります。

  • ブロック設定サイドバーにコントロールを表示する。
  • theme.jsonを使用してデフォルトを設定する。

コントロールをサポートしていないブロックに、theme.jsonを使ってコントロールを追加することはできません。

例: ボーダーコントロールをサポートしていないブロックでも、ボーダー機能が有効な限り、theme.jsonファイルの中にデフォルトのボーダーを設定できます。

ボーダースタイルを有効にするには、settings の下に、以下の属性と値を持つborder オブジェクトを追加します。

{
	"version": 2,
	"settings": {
		"border": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true
		}
	}
}

リンク色を有効にするには、color 設定を追加し、link をtrueに設定します。

{
	"version": 2,
	"settings": {
		"border": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true
		},
		"color": {
			"link": true
		}
	}
}

パディングやマージン、カスタムスペーシングユニットを有効にするには、spacing の設定を含めます。

{
	"version": 2,
	"settings": {
		"border": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true
		},
		"color": {
			"link": true
		},
		"spacing": {
			"padding": true,
			"margin": true,
			"units": [ "px", "em", "rem", "vh", "vw" ]
		}
	}
}

Top ↑

機能の無効化

デフォルトで有効なグラデーションを無効にするには、gradient を false にします。

{
	"version": 2,
	"settings": {
		"border": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true
		},
		"color": {
			"link": true,
			"gradient": false
		}
		...
	}
}

Top ↑

コンテンツ幅と、幅広ブロック、全幅ブロックのテーマサポート

layout 設定は、グループブロックやテンプレートパーツの幅を設定可能にし、add_theme_support( 'align-wide' ); を置き換えます。

theme.json でのレイアウト設定の利点は、ブロックの配置や幅のための余分なCSSの削減です。また、コンテナ内のブロックに、より正確な幅を設定できます。

layout で使用されるキー:

  • contentSize ブロックのデフォルト幅
  • wideSize ワイド幅

この例ではピクセルを使用していますが、有効な CSS 値や単位を使用できます。 (コードは、オプションを追加する場所を明示するために省略しています)。

{
	"version": 2,
	"settings": {
		...
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	}
}

Top ↑

カラーパレット

これは、add_theme_support( 'editor-color-palette' ) に相当します。 複数のカラーパレットを追加できます。すべてのブロックのためのデフォルトパレットと、ブロックタイプに固有のカラーパレットです。

palette で使用されるキー:

  • slug 色の一意の識別子
  • color 色の16進値
  • name エディターで表示される名前。オプション

複数の色は、角括弧 [] を使った配列として追加します。 settings 内の color にデフォルトのカラーパレットを 追加します。

{
	"version": 2,
	"settings": {
		...
		"color": {
			"palette": [
				{
					"slug": "white",
					"color": "#fff",
					"name": "White"
				},
				{
					"slug": "blue",
					"color": "#0073AA",
					"name": "WordPress blue"
				},
				{
					"slug": "dark-grey",
					"color": "#23282D",
					"name": "Dark grey"
				}
			]
		}
	}
}

次に、color の後にコンマを追加して、見出しブロックに新しいパレットを追加します。 このパレットは、デフォルトのテーマパレットを上書きします。

"blocks": {
	"core/heading": {
		"color": {
			"palette": [
				{
					"slug": "white",
					"color": "#fff",
					"name": "White"
				},
				{
					"slug": "medium-blue",
					"color": "#00A0D2",
					"name": "Medium blue"
				}
			]
		}
	}
}

プリセットは settings の下で作成され、styles で適用されます。 color の後に background キーと値を追加して、body の背景に白色を適用します。

"styles": {
	"color": {
		"background": "var(--wp--preset--color--white)"
	}
}

Top ↑

タイポグラフィ

カスタムフォントサイズを追加するには、settingsの下に新しいセクション typography を作成します。 fontSizes は add_theme_support( 'editor-font-sizes' ) と同等です。

"typography": {
	"fontSizes": [
	]
}

fontSizes で使用されるキー:

  • slug サイズの一意の識別子
  • size サイズの値。単位を指定しない数値、または有効な CSS 値
  • name エディターで表示される名前
"typography": {
	"fontSizes": [
		{
			"slug": "normal",
			"size": "20px",
			"name": "normal"
		},
		{
			"slug": "extra-small",
			"size": "16px",
			"name": "Extra small"
		},
		{
			"slug": "large",
			"size": "24px",
			"name": "Large"
		}
	]
}

ブロックにサイズを適用するには、以下の手順で行います。 styles の下に新しいセクション blocks を作成します。

"blocks": {

}

デフォルトにする、ブロックの名前を追加します

"blocks": {
	"core/paragraph": {
	},
	"core/post-terms": {
	},
	"core/post-title": {
	}
}

typography 設定を追加し、作成したプリセットに fontSize 値を設定します。

"blocks": {
	"core/paragraph": {
		"typography": {
			"fontSize": "var(--wp--preset--font-size--normal)"
		}
	},
	"core/post-terms": {
		"typography": {
			"fontSize": "var(--wp--preset--font-size--extra-small)"
		}
	},
	"core/post-title": {
		"typography": {
			"fontSize": "var(--wp--preset--font-size--large)"
		}
	}
}

Top ↑

要素

elements 設定では、サイトやブロック内のリンクや見出しのデフォルトを設定できます。

Top ↑

サイトの要素

すべての <H2> 見出しにフォント色を設定します。その見出しが、サイトタイトル、投稿タイトル、見出しブロックのいずれかは問いません。

"styles": {
	"elements": {
		"h2": {
			"color": {
				"text": "var(--wp--preset--color--medium-blue)"
			}
		}
	}
}

デフォルトのリンクテキスト色を追加します。

"styles": {
	"elements": {
		"h2": {
			"color": {
				"text": "var(--wp--preset--color--medium-blue)"
			}
		},
		"link": {
			"color": {
				"text": "var(--wp--preset--color--dark-grey)"
			}
		}
	}
}

Top ↑

ブロック内の要素

ブロックによっては複数の要素を持ったり、設定によって異なる要素を持つものがあります。

例: 投稿の抜粋ブロックに背景色を設定した場合、その背景はブロック全体に影響します。 要素を使って、記事の抜粋ブロックにあるオプションの「続きを読む」リンクに背景を スタイル > ブロック > ブロック名 > 要素 > 属性で設定できます。

テーマではカスタムパディングが有効なため、spacing 属性内に padding を追加することで、背景色をより見やすくすることができます。

"styles": {
	"blocks": {
		"core/post-excerpt": {
			"elements": {
				"link": {
					"color": {
						"text": "var(--wp--preset--color--white)",
						"background": "var(--wp--preset--color--blue)"
					},
					"spacing": {
						"padding": {
							"top": "1em",
							"right": "1em",
							"bottom": "1em",
							"left": "1em"
						}
					}
				}
			}
		}
	}
}

Top ↑

テンプレートパーツ

templeParts」セクションでは、作成した2つのテンプレートパーツをそれぞれのテンプレートエリアに割り当てます。

3つのキーを追加します。

  • name: テンプレートパーツのファイル名から拡張子を除いたもの
  • area: テンプレートエリアの名前
  • title: エディターで表示される名前

テンプレートは、header、footer、general の3つのエリアから選択できます。

"templateParts": [
	{
		"name": "header",
		"area": "header",
		"title": "Header"
	},
	{
		"name": "footer",
		"area": "footer",
		"title": "Footer"
	}
]

Top ↑

カスタムテンプレート

投稿、ページ、カスタム投稿タイプ用のカスタムテンプレートは、templates フォルダ内に追加のHTMLファイルを追加して作成します。 クラシックテーマでは、テンプレートはファイルヘッダで識別されます。ブロックテーマでは、theme.json ファイルでテンプレートをリストアップします。

theme.json の customTemplates セクションにリストアップされたすべてのテンプレートは、サイトエディタで選択できます。

テンプレート編集モードでテンプレートを編集できるようにするには、テンプレートのファイル名の前に post- または page- のいずれかを付ける必要があります。

まず、theme.jsonのルートレベルにセクション customTemplates を作成します。 このセクションには2つの必須キーがあります。 name: テンプレートファイルの名前から拡張子を取り除いたもの title: エディタで表示されるテンプレートのタイトルです。

"customTemplates": [
	{
		"name": "page-home",
		"title": "Page without title"
	}
]

また、このテンプレートを使用できる投稿タイプを定義するオプション設定もあります。 postTypes キーの後に投稿タイプの名前を続けます。

"customTemplates": [
	{
		"name": "page-home",
		"title": "Page without title"
	},
	{
		"name": "page-contact",
		"title": "Contact",
		"postTypes": [
			"page"
		]
	}
]

Top ↑

グローバルスタイルプリセット

ブロックテーマでは、デフォルトの theme.json ファイルに加えて、ユーザーが選択できるように複数のグローバルスタイルプリセットを定義できます。例えば、テーマの作者は、テーマに複数のカラーバリエーションを提供できます。

テーマでグローバルスタイルプリセットを提供するには、/styles フォルダ内に複数の JSON ファイルを追加します。これらの JSON ファイルは、ミニ theme.json ファイルで、それぞれ、styles や settings を含み、デフォルトの theme.json ファイルの設定やスタイルを上書きします。

例

// styles/red.json
{
	styles: {
		colors: {
			text: 'red',
			background: 'white'
		}
	}
}


// styles/dark.json
{
	styles: {
		colors: {
			text: 'white',
			background: 'black'
		}
	}
}

Top ↑

テーマの例

基本的なスターターテーマ「emptytheme」やその他のサンプルテーマが、実験的テーマ GitHub リポジトリにあります。テーマを参考にする際は、そのテーマがどのGutenbergバージョン用に作られているかに注意してください。実験的な機能は頻繁に更新されるためです。

テーマディレクトリでは、タグ full site editingでブロックテーマをリストアップできます。

原文

最終更新日: