--- title: テーマの構成 description: wp-env-starter のディレクトリ構成を前提にした、テーマのファイル配置、functions/ の分け方、テンプレートの分割、アセットの読み込み、ブロックテーマの扱い --- テーマのディレクトリ構成は、[wp-env-starter](https://github.com/GLANZ-CREATIVE/wp-env-starter) に合わせます。案件ごとに構成が違うと、引き継いだ担当者がファイルを探すところから始めることになるためです。 ## ディレクトリ構成 ```plaintext theme/ ├── functions.php # functions/ 以下を読み込むだけにする ├── functions/ # テーマの機能を役割ごとに分けたファイル ├── template-parts/ # get_template_part() で読み込む共通部品 ├── blocks/ # カスタムブロックのソース ├── src/assets/ # CSS・JavaScript・画像のソース ├── dist/ # ビルド成果物（Git 管理外） ├── front-page.php / header.php / footer.php / index.php など └── style.css / theme.json ``` `template-parts/` はテンプレートにはないため、必要になった時点で作成します。 ### テーマのディレクトリ名テーマのディレクトリ名は `theme` に固定します。 wp-env の設定とデプロイのワークフローが `theme` を前提にしているため、案件ごとに名前を変えると両方を書き換える必要があります。管理画面に表示されるテーマ名は、`style.css` の `Theme Name` で案件名に変えられます。 ## functions.php の分け方 `functions.php` には処理を書かず、`functions/` 以下のファイルを `require_once` で読み込むだけにします。 1 つのファイルに機能を書き足していくと、どこに何があるかを把握できなくなるためです。ファイルは役割ごとに分けます。テンプレートには次のファイルがあります。 | ファイル | 役割 | | --- | --- | | `helper.php` | テンプレートから使う小さな関数（`public_url()` など） | | `vite.php` | Vite の開発サーバーとビルド成果物の切り替え | | `assets.php` | CSS・JavaScript の読み込み | | `blocks.php` | カスタムブロックの自動登録 | 機能を追加するときは、同じ粒度でファイルを増やします（例：カスタム投稿タイプの登録は `post-types.php`、管理画面の調整は `admin.php`）。 ## テンプレートの分割テンプレートは [WordPress のテンプレート階層](https://developer.wordpress.org/themes/basics/template-hierarchy/)に従って作成します。階層に沿ったファイル名にしておけば、条件分岐を書かなくても WordPress が表示するテンプレートを選びます。複数のテンプレートで使う部品（カード、パンくずリストなど）は、`template-parts/` に置いて `get_template_part()` で読み込みます。部品に値を渡すときは、グローバル変数ではなく第 3 引数の `$args` を使います。 ```php front-page.php $post_id]); ?> ``` ```php template-parts/card.php

``` ## アセットの読み込み CSS・JavaScript・画像の置き場所と参照のしかたは、[wp-env-starter の README](https://github.com/GLANZ-CREATIVE/wp-env-starter#アセットの書き方) を参照してください。 CSS と JavaScript は `wp_enqueue_style()` / `wp_enqueue_script()` で読み込み、`header.php` などに `` や `