ブロックテーマ
Topics
(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 以前の情報
(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つ、あるいはテーマのもっとも重要な要素は、スタイリングです。当分の間は、準備したスタイルを、テーマが通常行うのと同じフックを使用してエンキューできますが、将来的には開発中の「グローバルスタイル」で多くのテーマスタイルを追加するひな形が提供される予定です。
国際化 (i18n)
パターンブロックを使用して、ブロックテンプレート内に翻訳可能なコンテンツを挿入できます。このファイルは 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 コミュニティで作成されたブロックテーマテンプレート用のリポジトリ
最終更新日: