【WordPress ブロックテーマ自作⑦】コンテンツを表示する｜post-contentブロックの役割と使い方

ヘッダーとフッターが揃ったら、次はコンテンツを表示させましょう。

どのテンプレートに入れるか、表示設定とテンプレートの関係をつかめば、この先の作業がぐっとラクになります。

コンテンツ（post-content）ブロックとは

コンテンツ（post-content）ブロックは、WordPressの投稿や固定ページに入力したコンテンツを表示するためのブロックです。
実態は👇この１行だけです

<!-- wp:post-content /-->

テンプレートはどのページにも共通して使われる「お皿」です。

その「お皿」の中にpost-contentブロックを置いておくことで、WordPressが自動的にそのページのコンテンツを流し込んでくれます。

どのファイルにpost-contentブロックを使うか？

自作テーマ⑤ですでに index.html に追加済みですが、post-contentブロックはコンテンツを表示したいテンプレートに入れる必要があります。

どのファイルがどのページに対応するかを確認しておきましょう。

※ index.htmlのコードはそのまま次回利用します。

ホームページ型の事前準備

ホームページ型のサイトでは、WordPressの表示設定でテンプレートと固定ページを紐づける必要があります。先に固定ページを2つ用意しておきましょう。

事前準備：固定ページを2つ作る

表示設定で割り当てる

エディターで組む

サイトエディターでテンプレートを1つ作って、コードをコピーして他のファイルに使い回す流れで進めます。まずは個別投稿（single.html）から作ってみましょう。

完成イメージ

サイトエディターでテンプレートを開く

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

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:post-content /-->
</main>
<!-- /wp:group -->

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

個別投稿ならではのブロックを追加する

コンテンツ（post-content）ブロックの前後に、投稿ページならではのブロックを追加できます。

今回は、タイトル（必須）とアイキャッチ画像を追加してみましょう。他のブロックはあとから自由に追加できます。

コード一括コピーの方法

他のファイルに使い回す

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

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:post-featured-image {"aspectRatio":"16/9"} /-->
<!-- wp:post-title /-->
<!-- wp:post-content /-->
</main>
<!-- /wp:group -->

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