WordPressの「ブロックテーマ」は、Gutenbergエディタと完全統合された次世代テーマ仕様です。従来のクラシックテーマと異なり、コーディングなしでサイト全体のレイアウトを編集できます。本記事では、ブロックテーマ開発の基本と、クラシックテーマとの違いを解説します。
ブロックテーマとは
WordPress 5.9以降で導入されたフルサイト編集（FSE）に対応したテーマ仕様です。テンプレートをHTMLファイルで定義し、ヘッダー・フッター・サイドバーなどあらゆる箇所をブロックエディタで編集できます。
クラシックテーマとの違い
- テンプレート：PHPファイル（クラシック）→ HTMLファイル（ブロック）
- スタイル：style.css → theme.json（中央管理）
- 編集UI：カスタマイザー → サイトエディター
- ヘッダー/フッター：PHPテンプレートパーツ → ブロック
最小構成
my-theme/
├── style.css # テーマヘッダー
├── theme.json # デザイントークン・グローバル設定
├── templates/
│ ├── index.html
│ └── single.html
├── parts/
│ ├── header.html
│ └── footer.html
└── functions.php # （任意）追加処理theme.json
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"color": {
"palette": [
{ "slug": "primary", "color": "#2563eb", "name": "Primary" }
]
},
"typography": {
"fontSizes": [
{ "slug": "base", "size": "16px", "name": "Base" }
]
}
}
}テンプレートHTMLの書き方
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:query -->
<!-- wp:post-template -->
<!-- wp:post-title /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template -->
<!-- /wp:query -->
</div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->メリットと注意点
- 非エンジニアでもサイト全体を編集できる
- theme.jsonでデザイントークンを一元管理
- PHPテンプレートに慣れた開発者は学習コストあり
- 独自プラグインや一部の旧式テーマ機能と相性問題がある場合も
こんなケースに向く
- クライアントが自分でレイアウトを更新したい
- 新規にWordPressサイトを立ち上げる
- デザイントークンの一元管理を行いたい
まとめ
ブロックテーマは、WordPressをコードレスに使えるよう進化させた次世代仕様です。theme.jsonとブロック中心の設計に慣れれば、運用負荷とデザイン更新コストの両方を大きく下げられます。新規サイトの第一選択肢として検討しましょう。
