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