作って学ぶ WordPress ブロックテーマ

制作環境が大きく変わりつつある WordPress。サイトエディターを中心としたブロックテーマの制作環境が整い、ノーコードでのテーマ制作やサイトの構築が一気に形になってきました。それに合わせるように WordPress の開発も、ブロックテーマを前提としたものへと変化を始めています。
新しいテーマ作成手法である「ブロックテーマ」を習得することは、クラシックテーマやハイブリッドテーマを作る上でも役立ちます。
本書はブロックテーマを作成する過程を通して、
・ブロックテーマの作成の流れ
・サイトエディターの使い方
・theme.json の作成方法とその目的
・theme.json を中心とした、これからの WordPress のスタイリング
がしっかり理解できる内容となっています。
これからの WordPress テーマ制作に、ぜひ活用してください。
Chpater1 ブロックテーマの作成をはじめる前に
Chpater2 コンテンツとブロックテーマの準備
Chapter3 theme.json の作成
Chpater4 個別のブロックのカスタマイズ
Chapter5 ページの基本構造の作成
Chapter6 テンプレートによるページの作成
Chapter7 サイト型のトップページ
Chapter8 エディターを使いやすくする

WordPress のテーマを、PHP のテンプレートを書き連ねる方式ではなく、ブロックと設定ファイルで組み立てる方式で作りたい人に向けた実践書が『作って学ぶ WordPress ブロックテーマ』 (エビスコム 著、マイナビ出版、2023 年 1 月刊) です。国立国会図書館の書誌では Compass Web Development の 1 冊に数えられ、サンプルファイルと補足 PDF のダウンロードが付きます。版元の紹介文によれば、ブロックテーマを作成する過程を通して、作成の流れ、サイトエディターの使い方、theme.json の作成方法とその目的、そして theme.json を中心としたスタイリングを理解できる内容です。

全 8 章の構成、制作の準備からエディターの使い勝手まで

版元が示す目次は章単位で、第 1 章「ブロックテーマの作成をはじめる前に」から始まり、第 2 章「コンテンツとブロックテーマの準備」、第 3 章「theme.json の作成」、第 4 章「個別のブロックのカスタマイズ」と進みます。後半は第 5 章「ページの基本構造の作成」、第 6 章「テンプレートによるページの作成」、第 7 章「サイト型のトップページ」と、ページを形にしていく章が続き、第 8 章「エディターを使いやすくする」で終わります。

theme.json とテンプレートで組み立てるブロックテーマの仕組み

従来のクラシックテーマでは、ヘッダーや記事一覧の表示を PHP のテンプレートファイルに書き、見た目はスタイルシートで整えるのが基本でした。ブロックテーマではテンプレート自体がブロックの並びとして記述され、サイトエディターの画面からヘッダーやフッター、ページの構成を組み替えられます。その土台になるのが theme.json で、色のパレットや文字の大きさ、コンテンツの幅といったサイト全体の設定と既定のスタイルを JSON の形で 1 か所にまとめます。ここで定めた値は WordPress によって CSS カスタムプロパティ として出力され、エディターの選択肢とサイトの表示の両方に同じ値が行き渡るため、デザインの決めごとを散らばらせずに保てます。

クラシックテーマとの関係と、2023 年 1 月の刊行時点

版元は、ブロックテーマを習得することがクラシックテーマやハイブリッドテーマを作る上でも役立つと説明しています。本書は 2023 年 1 月の刊行時点の WordPress を前提にしています。変化の速い分野の技術書と公式ドキュメントの付き合い方は、Web 開発本ガイド でも整理しています。

目次にプラグインの開発や外部システムとの連携を扱う章はなく、版元の紹介文が挙げる主題は、サイトエディターの使い方と theme.json を中心としたスタイリングです。