ブロックテーマ開発の全体像を、概念ベースで整理します。
パラダイムシフトの理解
従来のクラシックテーマ(PHPテンプレート + functions.php中心)から、2026年現在ではブロックテーマが標準的なアプローチとなっており、WordPress.orgのテーマディレクトリでは新規申請の大半がブロックテーマで、デフォルトテーマ(Twenty Twenty-Three以降)も全てブロックテーマになっています。
これまでのPHP/CSS知識がそのまま使えるわけではなく、「theme.json + HTMLテンプレート + ブロックパターン」という新しい構成要素を理解する必要があります。
基本ディレクトリ構造
- theme.json：配色・タイポグラフィ・余白などのデザイントークンを定義する中核ファイル。これまで議論してきた「プリセット」の土台になります。
- templates/：index.html, front-page.html, single.html, page.html など、ページ全体のレイアウト
- parts/：header.html, footer.html など、複数テンプレートで共有する部品
- patterns/：FV・カラム・営業時間表・ステップなど、コンテンツ単位の再利用パーツ(PHPファイルでメタデータ+ブロックマークアップ)
- style.css：ほぼメタデータのみ。空のstyle.cssから始めて、theme.jsonの強さと限界を学ぶのが良いアプローチとされています。
theme.json
デザイントークンの中核
theme.jsonは、グローバルスタイル・ブロック設定・タイポグラフィ・配色・余白・レイアウトを、CSSを一行も書かずに中央管理できる仕組みです。現行はバージョン3(WP6.5以降)で、settings(使える選択肢の定義)とstyles(デフォルト値の適用)の2層構造になっています。複数のstyles/*.json(スタイルバリエーション)を用意することで、これまで話していた「プリセット切り替え」がそのまま実現できます。
ブロックパターン
コアブロック(Group, Cover, Columns, Heading等)を組み合わせて、theme.jsonのトークンを参照する形で作ります。これにより、プリセット切り替え時に各パターンの見た目も連動します。patterns/ディレクトリにPHPファイルを置くだけで自動登録されます。
テンプレート & テンプレートパーツ
サイトエディター上で、templates/とparts/を視覚的に組み立てます。ノーコードでの編集体験は、ここが中心になります。
レスポンシブ対応
theme.jsonから生成されるfluid typography/spacing(CSS clamp)により、カラムの折り返しやフォントサイズ・余白のスケーリングが自動化されます。独自のメディアクエリは、この仕組みで対応できないエッジケースのみに限定するのが基本方針です。
学習リソース
- developer.wordpress.org の Block Editor Handbook(theme.jsonの公式仕様)
- learn.wordpress.org ― Training Teamによる「Block Theme Development in WordPress」というコホート型講座があり、Block Themeのアーキテクチャ・テンプレート・テンプレートパーツ・theme.jsonの基礎を実践的に学べます
- fullsiteediting.com ― 実践レッスン形式で、空のstyle.cssから始めて段階的にtheme.jsonを構築していく流れ
最初の一歩
最初のブロックテーマ開発としては、theme.jsonファイル、3つのテンプレート(index, single, page)、2つのテンプレートパーツ(header, footer)、5つのパターンから始めるのが推奨されています。これは、これまで話していた「v1.0は最小限の要素で」という方針と完全に一致するスコープ感だと思います。
ご自身のCSS/JS/PHPの素養があれば、新しく学ぶべきはほぼ「theme.jsonの構造」と「ブロックパターンの書き方」の2点に絞られると思います。どちらかを深掘りしたい場合は、続けて掘り下げられます。
ディレクトリ構造を視覚的に確認する方法
VS-CODEなどのエディタでapp/public/wp-content/themes/ フォルダ内の’twentytwentyfive’の中を見ると、ブロックテーマのディレクトリ構造を確認できます。
日本語のブロックテーマはないのか？
国内発のFSE対応ブロックテーマとしては、人気テーマ「Lightning」を開発する株式会社ベクトル(名古屋)による「X-T9」が、フルサイト編集機能に対応したビジネス向けブロックテーマとして公式ディレクトリに無料登録されています。
もう一つは、岐阜のオレインデザイン久野晃司氏が開発する「Cormorant」で、WordPressの機能を邪魔せずシンプルに設計されており、カスタマイズしやすいとされています。どちらも無料でダウンロードしてソースを確認できるので、「日本語サイト向けの設計判断」を見る参考になりそうです。
また、Snow MonkeyやLightningのような人気の有料/無料テーマも、theme.jsonを本格的に採用するハイブリッドテーマ化を進めているので、これらのtheme.jsonの書き方も参考になります。
日本語の入門解説動画
YouTubeでは、「Create Block Theme プラグインで自分のブロックテーマを作ろう！」(プログラミング不要、プラグインを使った作成方法)と、「WordPressブロックテーマ公式通りに作ってみた！＆カンタン解説！」(公式の手順に沿った解説)が見つかりました。
加えて、書籍としてエビスコムの『作って学ぶ WordPress ブロックテーマ』があり、theme.jsonを中心としたCSS主体の構成で、ステップバイステップではあるものの、WordPressのテーマ制作経験がある方を前提とした内容です。動画で大枠を掴んでから、この書籍で体系的に深掘りする、という流れが良いかもしれません。
