【WordPress】自作ブロックテーマのテンプレートを作ろう！

📖 この記事はこんな方向けです

✅ ブロックテーマをゼロから自作している
✅ HTMLファイルを直接編集して進めたい
✅ テンプレートパーツの仕組みをコードで理解したい

🖥️ サイトエディターで操作したい方はこちら

コードを書かずにGUI操作だけでテンプレートを編集する方法は
こちらの記事で詳しく解説しています。

👉 ブロックテーマの「テンプレート」攻略ガイド

テンプレートって何をするファイル？

テンプレートは、ページの「骨格（レイアウト）」を決めるHTMLファイルです。
「どこにヘッダーを置くか」「本文の横にサイドバーを置くか」といった
ページ全体の間取りを決める設計図のことです。

🏠 家の間取りで考えるとわかりやすい！

テンプレートとテンプレートパーツの違い

名前が似ていてややこしいですが、役割は全然違います👇

📐 テンプレート

ページ全体の「間取り図」

index.html（一覧ページ）
single.html（記事ページ）
page.html（固定ページ）

templatesフォルダに入れる

🧩 テンプレートパーツ

使い回す「共通パーツ」

header.html（ヘッダー）
footer.html（フッター）
sidebar.html（サイドバー）

partsフォルダに入れる

どのファイルがどのページに使われるか

WordPressはページの種類によって、自動的に使うテンプレートを選んでくれます。
これを「テンプレート階層」と呼びます。

トップページ

→ front-page.html または index.html

記事ページ

→ single.html

固定ページ

→ page.html

カテゴリー一覧

→ archive.html または index.html

404ページ

→ 404.html

✅ まとめ
テンプレート＝ページ全体の「間取り図」（templatesフォルダ）
テンプレートパーツ＝使い回す「共通パーツ」（partsフォルダ）
WordPressがページの種類に応じて自動でテンプレートを選んでくれます！

ファイル構成を確認しよう

テンプレートを作る前に、どのフォルダにどのファイルを入れるかを確認しましょう。
ここを理解しておくと、後で迷子になりません😊

templatesフォルダとpartsフォルダ

ブロックテーマでは、フォルダの場所がファイルの役割を決めます👇

kk-theme/
├── style.css
├── theme.json
├── functions.php
├── inc/
│   └── block-styles.php
├── templates/　　　← ページの「間取り図」を入れる
│   ├── index.html
│   ├── single.html
│   ├── page.html
│   ├── archive.html
│   └── 404.html
└── parts/　　　　← 使い回す「共通パーツ」を入れる
    ├── header.html
    ├── footer.html
    └── sidebar.html

📁 templates/

ページ全体の間取り図を入れる場所。
WordPressがページの種類に応じて
自動的に選んでくれます。

index.html・single.html・
page.html・archive.html・404.html

📁 parts/

どのページでも使い回す
共通パーツを入れる場所。
テンプレートから呼び出して使います。

header.html・footer.html・
sidebar.html

最低限必要なファイル一覧

全部一度に作る必要はありません。
まずこの順番で作っていけばOKです👇

parts/header.html　parts/footer.html

まずヘッダーとフッターを作る。どのページでも必要な共通パーツです。

templates/index.html

一覧ページのテンプレート。これが一番の土台です。

templates/single.html

記事ページのテンプレート。ブログなら必須です。

parts/sidebar.html　templates/page.html　templates/archive.html　templates/404.html

余裕ができたら追加していけばOKです。

✅ まとめ
まずはheader・footer・index・singleの4つだけ作ればOK！
残りは後から必要になったタイミングで追加できます😊

テンプレートパーツを作る

まずはどのページでも使い回す「共通パーツ」から作ります。
ヘッダー・フッター・サイドバーの3つです。
コードはAIに丸投げでOK！仕組みだけ理解しておきましょう😊

🤖 AIへの頼み方の例

「WordPressブロックテーマのheader.htmlを作って。
サイトロゴ・サイトタイトル・ナビゲーションを含めて。
コアブロックのみ使用で」

header.html（ヘッダー）

ヘッダーはサイトのロゴとナビゲーションを配置する場所です。
基本的な構成はこうなります👇

<!-- wp:group {"tagName":"header","layout":{"type":"constrained"}} -->
<header class="wp-block-group">

  <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
  <div class="wp-block-group">

    <!-- wp:site-logo /-->
    <!-- wp:site-title /-->

    <!-- wp:navigation /-->

  </div>
  <!-- /wp:group -->

</header>
<!-- /wp:group -->

site-logo サイトのロゴ画像。管理画面の「外観」から設定します。 site-title サイトのタイトル。管理画面の「一般設定」から変更できます。 navigation ナビゲーションメニュー。サイトエディターから編集できます。

footer.html（フッター）

フッターはコピーライトやリンクを配置する場所です。
シンプルな構成はこうなります👇

<!-- wp:group {"tagName":"footer","layout":{"type":"constrained"}} -->
<footer class="wp-block-group">

  <!-- wp:paragraph {"align":"center"} -->
  <p class="has-text-align-center">
    © 2026 サイト名 All Rights Reserved.
  </p>
  <!-- /wp:paragraph -->

</footer>
<!-- /wp:group -->

📝 ポイント
コピーライトの年号は手動で更新するのが面倒な場合、
HTMLブロックで <?php echo date('Y'); ?> を使う方法もあります。
ただしブロックテーマではHTMLブロックが基本なので、
最初はシンプルにテキストで書いておくのがおすすめです。

sidebar.html（サイドバー）

サイドバーはプロフィール・カテゴリー・最新記事などを配置する場所です。
基本的な構成はこうなります👇

<!-- wp:group {"tagName":"aside","layout":{"type":"constrained"}} -->
<aside class="wp-block-group">

  <!-- wp:heading {"level":3} -->
  <h3>カテゴリー</h3>
  <!-- /wp:heading -->

  <!-- wp:categories /-->

  <!-- wp:heading {"level":3} -->
  <h3>最新の記事</h3>
  <!-- /wp:heading -->

  <!-- wp:latest-posts /-->

</aside>
<!-- /wp:group -->

✅ まとめ
header・footer・sidebarの3つをpartsフォルダに入れます。
次のセクションで、これらをテンプレートに組み込んでいきます！

テンプレートを作る

テンプレートパーツが揃ったら、いよいよページ全体の「間取り図」を作ります。
テンプレートパーツを呼び出して組み合わせるだけなので、
思ったよりシンプルです😊

📝 テンプレートパーツの呼び出し方

partsフォルダのファイルは、このコードで呼び出します👇

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

slugの名前がpartsフォルダのファイル名と一致している必要があります。

tagNameって何？

テンプレートのコードを見ると、グループブロックに
{"tagName":"main"} や {"tagName":"header"} という記述が出てきます。
これは「どのHTMLタグとして出力するか」を指定するものです。

📖 ブロックコメントとHTMLタグは「セット」で動く

<!-- wp:group {"tagName":"main"} -->  ← WordPressがブロックを認識する目印
<main class="wp-block-group">        ← 実際にブラウザに出力されるHTML
    中身
</main>
<!-- /wp:group -->

tagNameを変えると、出力されるHTMLタグが変わります👇

{"tagName":"header"}

→ <header> として出力　ヘッダーに使う

{"tagName":"main"}

→ <main> として出力　メインコンテンツに使う

{"tagName":"aside"}

→ <aside> として出力　サイドバーに使う

{"tagName":"footer"}

→ <footer> として出力　フッターに使う

tagName省略

→ <div> として出力　デフォルト

📝 tagNameが使えるのはグループブロックだけ

✅ tagNameが使えるブロック

core/group（グループ）
core/template-part（テンプレートパーツ）

❌ tagNameが使えないブロック

段落・見出し・カラムなど
→ 出力タグが固定されています

💡 なぜタグを使い分けるの？

全部<div>でも動きますが、適切なタグを使うことで
✅ SEO的に正しいHTML構造になる
✅ 「ここがメインコンテンツ」とブラウザに正確に伝わる
✅ アクセシビリティが向上する
という3つのメリットがあります。

index.html（トップ・一覧ページ）

記事の一覧を表示するテンプレートです。
クエリーループブロックを使って記事を自動で並べます👇

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

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

  <!-- wp:columns -->
  <div class="wp-block-columns">

    <!-- wp:column {"width":"70%"} -->
    <div class="wp-block-column" style="flex-basis:70%">

      <!-- wp:query {"inherit":true} -->
      <div class="wp-block-query">

        <!-- wp:post-template -->
          <!-- wp:post-featured-image {"isLink":true} /-->
          <!-- wp:post-title {"isLink":true} /-->
          <!-- wp:post-date /-->
          <!-- wp:post-excerpt /-->
        <!-- /wp:post-template -->

        <!-- wp:query-pagination -->
        <div class="wp-block-query-pagination">
          <!-- wp:query-pagination-previous /-->
          <!-- wp:query-pagination-numbers /-->
          <!-- wp:query-pagination-next /-->
        </div>
        <!-- /wp:query-pagination -->

      </div>
      <!-- /wp:query -->

    </div>
    <!-- /wp:column -->

    <!-- wp:column {"width":"30%"} -->
    <div class="wp-block-column" style="flex-basis:30%">
      <!-- wp:template-part {"slug":"sidebar","tagName":"aside"} /-->
    </div>
    <!-- /wp:column -->

  </div>
  <!-- /wp:columns -->

</main>
<!-- /wp:group -->

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

wp:query 記事を自動で取得して並べるブロック。inherit:trueでページに応じて自動フィルタリングされます。 wp:columns 2カラムレイアウトを作るブロック。70%を本文、30%をサイドバーに割り当てています。 wp:post-template 記事ごとに繰り返し表示する内容を定義します。

single.html（記事ページ）

個別の記事を表示するテンプレートです。
記事のタイトル・アイキャッチ・本文・前後の記事リンクを配置します👇

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

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

  <!-- wp:columns -->
  <div class="wp-block-columns">

    <!-- wp:column {"width":"70%"} -->
    <div class="wp-block-column" style="flex-basis:70%">

      <!-- wp:post-featured-image /-->
      <!-- wp:post-title {"level":1} /-->
      <!-- wp:post-date /-->
      <!-- wp:post-terms {"term":"category"} /-->
      <!-- wp:post-content /-->

      <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
      <div class="wp-block-group">
        <!-- wp:post-navigation-link {"type":"previous"} /-->
        <!-- wp:post-navigation-link {"type":"next"} /-->
      </div>
      <!-- /wp:group -->

    </div>
    <!-- /wp:column -->

    <!-- wp:column {"width":"30%"} -->
    <div class="wp-block-column" style="flex-basis:30%">
      <!-- wp:template-part {"slug":"sidebar","tagName":"aside"} /-->
    </div>
    <!-- /wp:column -->

  </div>
  <!-- /wp:columns -->

</main>
<!-- /wp:group -->

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

page.html（固定ページ）

「お問い合わせ」や「プロフィール」などの固定ページ用のテンプレートです。
サイドバーなしのシンプルな構成がおすすめです👇

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

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

  <!-- wp:post-title {"level":1} /-->
  <!-- wp:post-content /-->

</main>
<!-- /wp:group -->

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

✅ まとめ
テンプレートはパーツを呼び出して組み合わせるだけ！
index.html・single.html・page.htmlの3つを作れば
ブログとして必要な基本レイアウトが揃います😊

サイトエディターとの関係

テンプレートはファイルで作る方法とサイトエディターで作る方法の
2つがあります。どちらを使えばいいか迷ったときのために
使い分けの基準を整理しておきましょう！

ファイルで作る？エディターで作る？

📄 ファイルで作る

テーマフォルダに直接保存される
FTPやVS Codeで編集できる
テーマを移しても一緒についてくる
AIに作ってもらいやすい

👍 骨格となるテンプレートはファイルで作るのがおすすめ

🖥️ サイトエディターで作る

ブラウザ上で視覚的に編集できる
データベースに保存される
変更がすぐ画面に反映される
ちょっとした調整に向いている

👍 細かい見た目の調整はエディターで

⚠️ 大事なポイント！

サイトエディターで編集した内容はデータベースに保存されます。
テーマフォルダのファイルは更新されません。
つまりファイルとエディターの両方を変更すると、エディターの内容が優先されます。

編集したらカスタマイズのクリアを忘れずに

ファイルを直接編集したのに画面に反映されない…というときは
サイトエディターに古いカスタマイズが残っている可能性があります。

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

直したいテンプレートの右側にある「3つの点（︙）」をクリック

「カスタマイズをクリア」を選ぶ
→ ファイルの内容が反映されます！

💡 変更されているか確認する方法

サイトエディターのテンプレート一覧を見たとき、
テンプレート名の横に青い点●がついているものは
「エディターで変更されている」サインです。
ファイルを編集した後は必ず確認してみてください！

✅ まとめ
骨格はファイルで作って、細かい調整はエディターで！
ファイルを編集したのに反映されないときは
「カスタマイズをクリア」を試してみてください😊

テンプレート階層の考え方

基本のテンプレートが作れたら、次のステップに進んでみましょう！

WordPressには「どのページにどのテンプレートを使うか」の
優先順位ルールがあります。これを「テンプレート階層」と呼びます。

例えば記事ページの場合、こんな順番でテンプレートを探します👇

優先①

single-post.html　投稿タイプ専用テンプレート

優先②

single.html　すべての記事に適用

優先③

singular.html　投稿・固定ページ共通

優先④

index.html　すべてのページの最終フォールバック

💡 活用例

「歴史ロマンカテゴリーだけデザインを変えたい」
→ category-history-romance.html を作るだけでOK！
そのカテゴリーのページだけ自動で別テンプレートが使われます。

✅ 今日のまとめ
① テンプレート＝ページの「間取り図」（templatesフォルダ）
② テンプレートパーツ＝使い回す「共通パーツ」（partsフォルダ）
③ まずはheader・footer・index・singleの4つだけ作ればOK！
④ コードはAIに丸投げ、仕組みだけ理解すれば大丈夫😊