WordPress ブロックテーマのファイル構成

ノーコードでサイトを作成できる、ブロックテーマ。

そんな「ブロックテーマ」自体を作成するためには、もちろんコードを編集する必要も出てきます。

今回は、クラシックテーマのファイル構成を振り返りつつ、
ブロックテーマのファイル構成や新しく登場したファイルなどを見ていきたいと思います。

WordPressテーマの構造

まず、クラシックテーマ・ブロックテーマどちらも、すべてのWordPressテーマは、
WordPressサイト内のwp-content/themesディレクトリ内に格納されます。

テーマごとのフォルダ内に、必要なファイルを用意していきます。

デフォルトテーマ

まっさらなWordPressをダウンロードすると、デフォルトテーマが複数用意されています。

たとえば「WordPress 6.7.2」には、4つのテーマが格納されています。

• twentytwentyfive：Twenty Twenty-Fiveテーマ
• twentytwentyfour：Twenty Twenty-Fourテーマ
• twentytwentythree：Twenty Twenty-Threeテーマ
• twentytwentytwo：Twenty Twenty-Twoテーマ

クラシックテーマのファイル構成

必須ファイル

クラシックテーマに最低限必要なファイルは、style.cssとindex.phpの2つです。

• style.css：テーマ名、作者、バージョンなどを設定し、テーマの外観を装飾する
• index.php：適切なテンプレートがないとき、最後に使用されるテンプレートファイル

代表的なテンプレートファイル

サイトの構成に合わせて、必要なテンプレートファイルを追加していきます。

• functions.php：テーマファイル内で最初に読み込まれ、機能の拡張やカスタマイズを行う
• page.php：固定ページ
• archive.php：投稿一覧ページ
• single.php：投稿詳細ページ
• search.php：検索結果ページ
• 404.php：エラーページ
• header.php：ヘッダー
• footer.php：フッター
• sidebar.php：サイドバー、など

公式テーマに必要なファイル

公式テーマとして申請したい場合は、追加のファイルなどが必要になります。

• readme.txt：テーマに関する情報をユーザーに提供するファイル
• screenshot.jpg：テーマ一覧に表示される画像
• languages：翻訳用ディレクトリ、など

ブロックテーマのファイル構成

必須ファイル

ブロックテーマで最低限必要なファイルは、以下の3つです。

• style.css：テーマ名、作者、バージョンなどを設定する
• index.php：クラシックテーマとの互換性のため必須
• templates/index.html：デフォルトのテンプレートとなるファイル（トップページ）

代表的なテンプレートファイル

クラシックテーマでのPHPファイルが、HTMLファイルとなります。

ページ全体のレイアウトはtemplatesディレクトリ、共通パーツはpartsディレクトリに格納します。

• functions.php：機能の拡張やカスタマイズ
• theme.json：テーマ全体のスタイルと設定を定義
• templates/page.html：固定ページ
• templates/archive.html：投稿一覧ページ
• templates/single.html：投稿詳細ページ
• templates/search.html：検索結果ページ
• templates/404.html：エラーページ
• parts/header.html：ヘッダー
• parts/footer.html：フッター
• parts/sidebar.html：サイドバー
• patterns/example.php：ブロックの組み合わせやレイアウトのパターン、など

theme.json

新しく登場したtheme.jsonは、テーマ全体のスタイルと設定を定義するファイルです。

「JSON」は、JavaScript Object Notation の略で、
キーと値の組み合わせであるオブジェクトで構成されるデータの記述形式です。

{
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	}
}

theme.jsonを設定することで、CSSを直接書かずにデザインを整えたり、
ユーザーがブロックエディターで選択可能な項目を設定することができます。

• グローバルスタイル（カラー、フォント、余白など）の定義
• 特定のブロックのスタイル指定
• ブロックエディター機能の設定
• カスタムプロパティ（CSS変数）の定義
• テンプレートやパーツのデフォルトスタイル指定、など

おわりに

クラシックテーマとブロックテーマのファイル構成を比べてみると、
テンプレートやパーツのファイル自体は直感的に置き換えていけそうです。

ただ、PHPからHTML（PHP関数からブロックマークアップ）へ、CSSからJSONへ、
コード編集から管理画面での編集へと、テーマの作り方はいろいろ変わっているようです。

次回からは実際にブロックテーマの作成を進めていきたいと思います。