ブロックベーステーマ (実験レベル)
これは現段階での「ブロックベーステーマ」(block-based theme) 実装に関する文書です。「ブロックベーステーマ」は、「フルサイト編集」(Full Site Editing)、または「ブロックコンテントエリア」(Block Content Area) とも呼ばれ、これらの機能はまだプラグインの実験レベルの機能です。ここで「実験レベル」とは早い段階での実装を意味し、ユーザー、コントリビューター、テーマ作成者のフィードバックに基づくイテレーションによっては、大きく互換性を失う形で変更される可能性があります。
早い段階で文書を共有する理由は、作業の様子を明らかにし、API を利用した実験からフィードバックを得るためです。フィードバックは、最新の進捗を共有、議論している #core-editor 週次ミーティングで行うか、または Github の issue を通して非同期に行えます。
注意: この機能を使用するには、block-templates/index.html
ファイルを含むテーマを有効化してください。テーマはフルサイト編集機能を使用することをブロックエディターに通知します。
ブロックベーステーマとは何か ?
「ブロックベーステーマ」は、完全にブロックで構成されたテンプレートを持つ WordPress テーマです。「page」「post」など異なる投稿タイプのコンテンツに加え、サイトのすべてのエリア、ヘッダー、フッター、サイドバー等をブロックエディターで編集できます。
ブロックベーステーマの構造は ?
シンプルなブロックベーステーマは次のような構造になります。
theme
|__ style.css
|__ experimental-theme.json
|__ functions.php
|__ block-templates
|__ index.html
|__ single.html
|__ archive.html
|__ ...
|__ block-template-parts
|__ header.html
|__ footer.html
|__ sidebar.html
|__ ...
既存の WordPress テーマとの違いは、テンプレート階層内の異なるテンプレート、およびテンプレートパーツがこれまでの PHP ファイルでなく、「ブロックテンプレート」である点です。更にこの例ではいくつかのスタイルのために experimental-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">
<div class="wp-block-group__inner-container">
<!-- wp:post-title /-->
<!-- wp:post-content /-->
</div>
</div>
<!-- /wp:group -->
<!-- wp:group -->
<div class="wp-block-group">
<div class="wp-block-group__inner-container">
<!-- wp:heading -->
<h2>Footer</h2>
<!-- /wp:heading -->
</div>
</div>
<!-- /wp:group -->
テンプレートの書き方と編集方法は ?
最終的には、適切な権限、例えば管理者権限を持つすべての WordPress ユーザーが管理画面からテンプレートにアクセスし、専用のビューで編集し、テーマとしてエクスポートできるようになります。
Gutenberg 8.5 では Gutenberg 内でテンプレートを作成し編集する方法が2つあります。
管理画面の「外観」セクションでのテンプレートの編集
「外観」の下の一時的な管理メニュー「テンプレート」wp-admin/edit.php?post_type=wp_template
ではテンプレートの編集を試すことができます。ここにブロックを追加していき、最後にコードエディターモードに切り替えてテンプレートの HTML を取得します。テーマディレクトリ内のファイルにこのマークアップを貼り付けることができます。
注意: 管理画面の「外観」->「テンプレート」メニューは、テーマに同梱されたテンプレートを 表示しません。動作中の WordPress サイトで作成された新しいテンプレートを表示するだけです。
フルサイトエディター内でのテンプレートの編集
まずテーマ内にブランクのテンプレートファイルを作成してください。たとえば mytheme/block-templates/index.html
です。次にフルサイトエディターを開きます。新しいテンプレートがアクティブテンプレートとして表示されますが、ブランクのはずです。そこに Gutenberg を普通使うようにしてブロックを追加します。「テンプレートパーツ」ブロックを使用して直接テンプレート発を追加、作成できます。
これをテーマにバンドルする追加テンプレートの分、繰り返します。
完了後はサイトエディター右サイドバーの「ツール」メニューの「テーマのエクスポート」オプションをクリックしてください。サイトエディターで作成したすべてのテンプレートとテンプレートパーツが ZIP でダウンロードされます。これらの新しい HTML ファイルは直接テーマ内に置くことができます。
注意: この方法でテンプレートパーツをエクスポートするとテンプレートパーツブロックマークアップには postID
属性が含まれますが、これはテーマを配布する際に安全に削除できます。
テンプレートカスタム投稿タイプ
管理画面の一時的なメニュー「テンプレート」から直接テンプレートを保存すると、テーマのテンプレートを上書きできます。
例: テンプレートのタイトルに「single」を使用して保存すると、保存されたテンプレートはテーマの single.html
ファイルよりも優先されます。
注意: テンプレート階層で高位にあるテーマのテンプレートには優先しません。テンプレート解決は、詳細なテンプレートから簡単なテンプレートへ、各レベルで、まずカスタム投稿タイプの投稿、次にテーマテンプレートを探します。
テーマブロック
ブロックベーステーマ専用のブロックがいくつかあります。たとえばサイトのヘッダーでは「サイトタイトル」ブロックを使用できます。「単一」ブロックテンプレートでは「投稿タイトル」ブロックや「投稿コンテンツ」ブロックを含めることができます。
まだプロジェクトの初期段階のため、ブロックテンプレートに特化したブロックの数は少なめですが、プロジェクトが進むに連れ、ブロックの数は増えていくはずです。Gutenberg 8.5 では以下のブロックが利用可能です。
- Site Title
- Template Part
- Query
- Query Loop
- Query Pagination
- 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つはスタイリングです。当面はスタイルを準備し、テーマが通常行うのと同じフックを使用してエンキューできますが、将来的には開発中の「グローバルスタイル」で多くのテーマスタイルを追加するひな形が提供されます。
リソース
- Full Site Editing ラベル
- Theme Experiments コミュニティで作成されたブロックベーステーマテンプレート用のリポジトリ
最終更新日: