[プロンプトエンジニア]

使える場面、状況の想定

初心者から中級者へのステップとして、オリジナルテーマの作成やカスタマイズは、誰もが通る道です。
これまでクラシックテーマでWordPressの制作を経験してきた方が、ブロックテーマの自作やカスタマイズに初めて挑戦する場面を想定しています。

クラシックテーマとブロックテーマは、同じWordPressでもファイル・ディレクトリの構成や、テーマとしての考え方が根本から異なります。
何がどう変わったのかを、最初にしっかりと整理しておくことで、無駄な遠回りをせず、効率的に開発作業を進めることができます。

2つのテーマの構造的な違いをAIに整理・可視化してもらい、ブロックテーマへの理解を深めましょう。
次のような状況にある方に、特に役立つプロンプトです。

• クラシックテーマで培った知識を足がかりに、ブロックテーマを自分で作ったり、カスタマイズしてみたい
• WordPressの「最新の標準」であるブロックテーマの構造を正しく把握し、今の開発スタイルに追いつきたい

解決プロンプト

WordPressの「クラシックテーマ」と
「ブロックテーマ（FSE対応）」の違いについて、
簡潔にまとめてください。

1. ディレクトリ構造（ツリー表示）
– 必須構成
– 実務で一般的な構成
2. 各ファイルの役割（1行解説）
3. 最小テンプレート記述例
4. 対応関係表
5. 主な違い比較表
6. 設計思想の違い

AIの回答例

WordPress「クラシックテーマ」と「ブロックテーマ（FSE対応）」の違い

---

1. ディレクトリ構造（ツリー表示）

クラシックテーマ

必須構成

my-theme/
├── style.css
└── index.php

実務で一般的な構成

my-theme/
├── style.css
├── functions.php
├── index.php
├── header.php
├── footer.php
├── sidebar.php
├── front-page.php
├── home.php
├── single.php
├── page.php
├── archive.php
├── search.php
├── 404.php
├── screenshot.png
├── assets/
│   ├── css/
│   ├── js/
│   └── images/
├── template-parts/
│   ├── header/
│   └── footer/
└── inc/
    ├── customizer.php
    └── setup.php

---

ブロックテーマ（FSE）

必須構成

my-block-theme/
├── style.css
├── theme.json
└── templates/
    └── index.html

実務で一般的な構成

my-block-theme/
├── style.css
├── theme.json
├── functions.php
├── screenshot.png
├── templates/
│   ├── index.html
│   ├── front-page.html
│   ├── home.html
│   ├── single.html
│   ├── page.html
│   ├── archive.html
│   ├── search.html
│   └── 404.html
├── parts/
│   ├── header.html
│   ├── footer.html
│   └── sidebar.html
├── patterns/
│   ├── hero.php
│   └── columns.php
├── styles/
│   ├── dark.json
│   └── light.json
└── assets/
    ├── css/
    ├── js/
    └── images/

---

2. 各ファイルの役割（1行解説）

クラシックテーマ

ファイル	役割
style.css	テーマ情報・CSS
index.php	最終フォールバックテンプレート
functions.php	テーマ機能登録
header.php	ヘッダー共通部
footer.php	フッター共通部
sidebar.php	サイドバー
single.php	投稿詳細
page.php	固定ページ
archive.php	アーカイブ
front-page.php	トップページ
home.php	投稿一覧
404.php	404ページ

ブロックテーマ

ファイル	役割
style.css	テーマ情報・補助CSS
theme.json	デザイン設定の中枢
templates/*.html	各ページテンプレート
parts/*.html	共通パーツ
patterns/*.php	ブロックパターン登録
styles/*.json	スタイルバリエーション
functions.php	補助処理（必要時のみ）

---

3. 最小テンプレート記述例

クラシックテーマ

index.php

<?php get_header(); ?>
<main>
<?php
if (have_posts()) :
    while (have_posts()) :
        the_post();
?>
        <h1><?php the_title(); ?></h1>
        <?php the_content(); ?>
<?php
    endwhile;
endif;
?>
</main>
<?php get_footer(); ?>

ブロックテーマ

templates/index.html

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:post-content /-->
<!-- wp:template-part {"slug":"footer"} /-->

parts/header.html

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

parts/footer.html

<!-- wp:paragraph -->
<p>Copyright</p>
<!-- /wp:paragraph -->

---

4. 対応関係表

クラシック	ブロックテーマ
header.php	parts/header.html
footer.php	parts/footer.html
sidebar.php	parts/sidebar.html
front-page.php	templates/front-page.html
single.php	templates/single.html
page.php	templates/page.html
archive.php	templates/archive.html
search.php	templates/search.html
404.php	templates/404.html
functions.php	functions.php
Customizer	theme.json
PHPテンプレート	HTMLブロックテンプレート

---

5. 主な違い比較表

項目	クラシックテーマ	ブロックテーマ
レイアウト作成	PHP	ブロック
テンプレート	*.php	*.html
ヘッダー編集	コード修正	管理画面
フッター編集	コード修正	管理画面
デザイン設定	CSS中心	theme.json中心
カスタマイザー	主役	ほぼ不要
FSE対応	×	○
ノーコード編集	△	◎
学習コスト	PHP必要	ブロック理解必要
開発自由度	非常に高い	WordPress流儀に依存
将来性	保守継続	WordPressの主流

---

6. 設計思想の違い

クラシックテーマ

「開発者がPHPで画面を組み立てる」

WordPress
 ↓
PHPテンプレート実行
 ↓
HTML生成
 ↓
ブラウザ表示

特徴

• 開発者主導
• PHP中心
• CMSとしてのWordPress
• コード管理しやすい
• 独自実装に強い

ブロックテーマ（FSE）

「サイト全体をブロックエディタで構築する」

WordPress
 ↓
テンプレートHTML読込
 ↓
ブロック解析
 ↓
HTML生成
 ↓
ブラウザ表示

特徴

• 編集者主導
• GUI中心
• Site Editorで全体編集
• theme.jsonが設計の中心
• ノーコード運用に強い

---

一言でまとめると

クラシックテーマ	ブロックテーマ
「PHPで作るテーマ」	「ブロックで作るテーマ」
開発者向け	編集者向け
従来型	次世代標準（FSE）
header.php / footer.php	parts/*.html
functions.php中心	theme.json中心

現在のWordPress開発では、新規テーマ開発はブロックテーマ（FSE）を前提にするケースが増えている一方、
企業案件や既存サイト保守ではクラシックテーマも依然として広く使われています。

ポイント解説

このプロンプトでは、WordPressの「クラシックテーマ」と「ブロックテーマ（FSE対応）」の違いと、それぞれの特徴について、最低限知っておくべきポイントを一通り押さえることができます。
ブロックテーマを理解するコツは、クラシックテーマのような「PHPによる動的な命令」から、「theme.jsonによる宣言的デザイン」への転換を意識することです。まずは、FSE学習用のブロックテーマを作成し、色々と触ってみることをおすすめします。
➡ シンプルな構造のブロックテーマを、AIで一瞬で作成する方法

注意点

ブロックテーマへの移行において、最も注意すべきは「クラシックテーマの知識をそのままPHPファイルに書いても動作しない」という点です 。
クラシックテーマで頻用した get_header() や get_template_part() などのPHP関数は、ブロックテーマのHTMLファイル内では機能しません。

カスタマイズの手順や学習の進め方については、これまでのPHP中心の考え方を一度リセットし、まったく別モノとしてゼロから向き合うことが、習得への近道となります。

[投稿者]

投稿