ブロックテーマ

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

これらの機能は実験的なものであり、Gutenberg プラグインの一部です。 WordPress 5.9でサポートされるブロックテーマの機能については、Theme Developer Handbook を参照してください。

フィードバックは、毎週開催される #core-editor チャットや #fse-outreach-experiment チャンネル、または GitHub issues を使って非同期的に行うことができます。

「ブロックテーマ」は WordPress テーマの一種で、完全にブロックで構成されたテンプレートを持ちます。「page」や「post」などの異なる投稿タイプのコンテンツに加え、サイトのすべてのエリア、ヘッダー、フッター、サイドバー等をブロックエディターで編集できます。

ブロックテーマは、デフォルトの 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'
		}}}

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

非常にシンプルなブロックテーマは次のような構造です。

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

既存の WordPress テーマと異なり、テンプレート階層内の異なるテンプレート、およびテンプレートパーツは、これまでの PHP ファイルでなく、「ブロックテンプレート」です。更にこの例では、いくつかのスタイル設定に theme.json ファイルを含みます。

「ブロックテンプレート」は、一連のブロックから構成されます。ブロックテンプレート内では、あらゆる WordPress ブロックを使用できます。また、テンプレートは、「テンプレートパーツ」を使用してコンテンツの一部を再利用できます。たとえば、すべてのブロックテンプレートに、個別のテンプレートパート header.html から同じヘッダーを含めることができます。

以下はブロックテンプレートの例です:

<!-- wp:site-title /--><!-- wp:image {"sizeSlug":"large"} --><figure class="wp-block-image size-large"><img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" /></figure><!-- /wp:image --><!-- wp:group --><div class="wp-block-group"><!-- wp:post-title /--><!-- wp:post-content /--></div><!-- /wp:group --><!-- wp:group --><div class="wp-block-group"><!-- wp:heading --><h2>Footer</h2><!-- /wp:heading --></div><!-- /wp:group -->

最終的には、適切な権限、例えば管理者権限を持つすべての WordPress ユーザーが管理画面からテンプレートにアクセスし、専用のビューで編集し、テーマとしてエクスポートできるようになります。

Gutenberg 8.5 では Gutenberg 内でテンプレートを作成し編集する方法が2つあります。

「外観」の下の一時的な管理メニュー「テンプレート」wp-admin/edit.php?post_type=wp_template ではテンプレートの編集を試すことができます。ここにブロックを追加していき、最後にコードエディターモードに切り替えてテンプレートの HTML を取得します。テーマディレクトリ内のファイルにこのマークアップを貼り付けることができます。

注意: 管理画面の「外観」->「テンプレート」メニューは、テーマに同梱されたテンプレートを 表示しません。動作中の WordPress サイトで作成された新しいテンプレートを表示するだけです。

まずテーマ内にブランクのテンプレートファイルを作成してください。たとえば mytheme/templates/index.html です。次にフルサイトエディターを開きます。新しいテンプレートがアクティブテンプレートとして表示されますが、ブランクのはずです。そこに Gutenberg を普通使うようにしてブロックを追加します。「テンプレートパーツ」ブロックを使用して直接テンプレートパーツを追加、作成できます。

これをテーマにバンドルする追加テンプレートの分、繰り返します。

完了後はサイトエディター右サイドバーの「ツール」メニューの「テーマのエクスポート」オプションをクリックしてください。サイトエディターで作成したすべてのテンプレートとテンプレートパーツが ZIP でダウンロードされます。これらの新しい HTML ファイルは直接テーマ内に置くことができます。

注意: この方法でテンプレートパーツをエクスポートするとテンプレートパーツブロックマークアップには postID 属性が含まれますが、これはテーマを配布する際に安全に削除できます。

管理画面の一時的なメニュー「テンプレート」から直接テンプレートを保存すると、テーマのテンプレートを上書きできます。

例: テンプレートのタイトルに「single」を使用して保存すると、保存されたテンプレートはテーマの single.html ファイルよりも優先されます。

注意: テンプレート階層で高位にあるテーマのテンプレートには優先しません。テンプレート解決は、詳細なテンプレートから簡単なテンプレートへ、各レベルで、まずカスタム投稿タイプの投稿、次にテーマテンプレートを探します。

ブロックテーマ専用のブロックがいくつかあります。たとえばサイトのヘッダーでは「サイトタイトル」ブロックを使用できます。「単一」ブロックテンプレートでは「投稿タイトル」ブロックや「投稿コンテンツ」ブロックを含めることができます。

まだプロジェクトの初期段階のため、ブロックテンプレートに特化したブロックの数は少なめですが、プロジェクトが進むに連れ、ブロックの数は増えていくはずです。Gutenberg 8.5 では以下のブロックが利用可能です。

• Site Title
• Template Part
• Query
• Query Loop
• Query Pagination
• Pattern
• Post Title
• Post Content
• Post Author
• Post Comment
• Post Comment Author
• Post Comment Date
• Post Comments
• Post Comments Count
• Post Comments Form
• Post Date
• Post Excerpt
• Post Featured Image
• Post Hierarchical Terms
• Post Tags

テーマのもっとも重要な要素の1つ、あるいはテーマのもっとも重要な要素は、スタイリングです。当分の間は、準備したスタイルを、テーマが通常行うのと同じフックを使用してエンキューできますが、将来的には開発中の「グローバルスタイル」で多くのテーマスタイルを追加するひな形が提供される予定です。

パターンブロックを使用して、ブロックテンプレート内に翻訳可能なコンテンツを挿入できます。このファイルは PHP ベースのため、翻訳用に文字列をマークしたり、動的なURLを提供する仕組みがあります。

パターンを登録します。

<?phpregister_block_pattern(
	'myblocktheme/wordpress-credit',
	array(
		'title'      => __( 'Wordpress credit', 'myblocktheme' ),
		'content'    => '
						<!-- wp:paragraph -->
						<p>' .
						sprintf(
							/* Translators: WordPress link. */esc_html__( 'Proudly Powered by %s', 'myblocktheme' ),
							'<a href="' . esc_url( __( 'https://wordpress.org', 'myblocktheme' ) ) . '" rel="nofollow">WordPress</a>'
						) . '</p>
						<!-- /wp:paragraph -->',
		'inserter'   => false
	)
);

テンプレート、またはテンプレートパーツ内にパターンをロードします。

<!-- wp:group --><div class="wp-block-group"><!-- wp:pattern {"slug":"myblocktheme/wordpress-credit"} /--></div><!-- /wp:group -->

詳細については WordPress の国際化 を参照してください。

クラシックテーマのユーザーもカスタムブロックテンプレートを構築し、ページテンプレートをサポートする固定ページやカスタム投稿タイプで使用できます。

テーマ作者がこの機能をオプトアウトするには、functions.php ファイルで block-templates テーマサポートを削除してください。

remove_theme_support( 'block-templates' );

ウェブページに HTML 要素 <main> が含まれている場合、コンテンツへスキップするリンクが、自動的にウェブサイトの前に追加されます。 スキップリンクは <main> を指します。

グループブロック、テンプレートパーツ、クエリーブロックは、<main>を使用するように変更できます。HTML 要素を変更する設定は、ブロック設定サイドバーの「詳細設定」で確認できます。

• Full Site Editing ラベル
• Theme Experiments コミュニティで作成されたブロックテーマテンプレート用のリポジトリ

原文

最終更新日: 2022年5月2日