ヘッダーとフッターが揃ったら、次はコンテンツを表示させましょう。
どのテンプレートに入れるか、表示設定とテンプレートの関係をつかめば、この先の作業がぐっとラクになります。
post-contentブロックとは
post-contentブロックは、WordPressの投稿や固定ページに入力したコンテンツを表示するためのブロックです。ひとことで言うと「盛り付け係」です。
<!-- wp:post-content /-->お皿と料理のたとえ
🍽️ テンプレート（single.html・page.htmlなど）＝ お皿
📦 post-contentブロック ＝ 料理を盛り付ける場所
🍳 投稿・固定ページの中身 ＝ 料理
テンプレートはどのページにも共通して使われる「お皿」です。
その「お皿」の中にpost-contentブロックを置いておくことで、WordPressが自動的にそのページのコンテンツを流し込んでくれます。
どのファイルにpost-contentブロックを使うか？
⑤ですでに index.html に追加済みですが、post-contentブロックはコンテンツを表示したいテンプレートそれぞれに入れる必要があります。
どのファイルがどのページに対応するかを確認しておきましょう。
| ファイル | いつ使われるか | post-content |
|---|---|---|
single.html |
投稿ページ | ✅ 必須 |
page.html |
固定ページ | ✅ 必須 |
front-page.html |
トップページ（ホームページ型） | △ 見せ方による |
index.html |
ブログ一覧ページ | ❌ クエリループを使う |
index.html はブログ一覧ページなので、post-contentではなくクエリループブロックを使います。クエリループについては次の記事で解説します。
ホームページ型の事前準備と表示設定
💡ブログ型のサイトの場合
管理画面 → 設定 → 表示設定で「最新の投稿」にチェックが入っていればOKです。
固定ページの準備は不要なので、次のセクションに進んでください。
ホームページ型のサイトでは、WordPressの表示設定でテンプレートと固定ページを紐づける必要があります。先に固定ページを2つ用意しておきましょう。
事前準備：固定ページを2つ作る
管理画面 → 固定ページ → 新規固定ページを追加
タイトルを「HOME」にして、中身は空っぽのまま公開する
同じ手順でもう1つ作る
タイトルを「BLOG」にして、中身は空っぽのまま公開する
表示設定で割り当てる
管理画面 → 設定 → 表示設定を開く
「ホームページの表示」を固定ページに変更する
「ホームページ」にHOME、「投稿ページ」にBLOGを選択して保存する
🏠 トップページ（HOME）
→ front-page.html が自動で使われる
🗞️ ブログ一覧ページ（BLOG）
→ index.html が自動で使われる
エディターで組んでみる
サイトエディターでテンプレートを1つ作って、コードをコピーして他のファイルに使い回す流れで進めます。まずは個別投稿（single.html）から作ってみましょう。
完成イメージ
サイトエディターでテンプレートを開く
外観 → エディター → テンプレート → 「個別投稿」を選択して開く
ヘッダー・グループ（コンテンツ）・フッターが自動で入った状態で開きます。
もし空っぽなら⑤のindex.htmlのコードを画面に貼り付けてください。
左上の「リストビュー」を開いて構造を確認する
ヘッダー・グループ・コンテンツ・フッターの順になっていればOKです。
個別投稿ならではのブロックを追加する
post-contentブロックの前後に、投稿ページならではのブロックを追加できます。
今回はシンプルにアイキャッチ画像だけ追加してみましょう。他のブロックはあとから自由に追加できます。
投稿ページで使える便利ブロック
📷 アイキャッチ画像 → 投稿のサムネイルを表示
🗂️ 投稿カテゴリー → どのカテゴリーの記事かを表示
🏷️ 投稿タグ → タグを表示
⬅️ 投稿ナビゲーション → 前へ・次へボタンを表示
📅 投稿日時 → 公開日・更新日を表示
コンテンツブロックの上にアイキャッチ画像ブロックを追加する
リストビューでコンテンツブロックを右クリック → 「前に追加」を選択 → アイキャッチ画像ブロックを追加する
💡 右クリックで「前に追加」「後に追加」が選べます。兄弟要素を追加するときの一番確実な方法です！
コード一括コピーの方法
今回は、ヘッダーやフッター含んだ全体を、一括でコピーするので、
画面右上の「︙」→「すべてのブロックをコピー」をクリックする
💡 「コードエディター」に切り替えると、実際のコードを確認することもできます。
他のファイルに使い回す
テーマファイルエディターでtemplates/single.htmlに貼り付けて「ファイルを更新」する
同じコードをtemplates/page.htmlにも貼り付ける
アイキャッチ不要な場合はアイキャッチブロックだけ削除してもOKです。
ホームページ型の場合はtemplates/front-page.html同様に貼り付けておきましょう。
アイキャッチ削除してOK！トップページらしく、パターンやブロック、HTMLブロックを活用して自由にデザインできます。
アイキャッチブロック
<!-- wp:post-featured-image /-->表示確認する
テンプレートが完成したら実際にコンテンツが表示されるか確認しましょう。
まずテスト用の投稿と固定ページを作りましょう。
管理画面 → 投稿 → 新規投稿を追加
タイトルと本文を適当に入力してアイキャッチ画像も設定して公開する
管理画面 → 固定ページ → 新規固定ページを追加
タイトルと本文を適当に入力して公開する
管理画面 → 固定ページ → HOME（ホームページ用につくったページ）
post-contentを置くだけのシンプルな構成から始めて、サイトエディターの「パターン」からバナーやヒーローセクションを追加してみると、トップページらしい見た目がどんどん作れます。少しずつ育てていくのがおすすめです。
次回はクエリループで投稿一覧を作ります。テスト用の投稿を数件用意して、アイキャッチ画像を1枚以上設定しておくとスムーズです！
最後まで読んでいただき、ありがとうございました。
おつかれさまでした 🍵