ブロックベーステーマ (実験レベル)

これは現段階での「ブロックベーステーマ」(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つはスタイリングです。当面はスタイルを準備し、テーマが通常行うのと同じフックを使用してエンキューできますが、将来的には開発中の「グローバルスタイル」で多くのテーマスタイルを追加するひな形が提供されます。

リソース

原文

最終更新日: