テーマの構成
wp-env-starter のディレクトリ構成を前提にした、テーマのファイル配置、functions/ の分け方、テンプレートの分割、アセットの読み込み、ブロックテーマの扱い
テーマのディレクトリ構成は、wp-env-starter に合わせます。 案件ごとに構成が違うと、引き継いだ担当者がファイルを探すところから始めることになるためです。
ディレクトリ構成
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.jsontemplate-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 のテンプレート階層に従って作成します。 階層に沿ったファイル名にしておけば、条件分岐を書かなくても WordPress が表示するテンプレートを選びます。
複数のテンプレートで使う部品（カード、パンくずリストなど）は、template-parts/ に置いて get_template_part() で読み込みます。
部品に値を渡すときは、グローバル変数ではなく第 3 引数の $args を使います。
<?php get_template_part("template-parts/card", null, ["post_id" => $post_id]); ?><?php
$post_id = $args["post_id"] ?? get_the_ID();
?>
<article class="card">
<h3 class="card__title"><?php echo esc_html(get_the_title($post_id)); ?></h3>
</article>アセットの読み込み
CSS・JavaScript・画像の置き場所と参照のしかたは、wp-env-starter の README を参照してください。
CSS と JavaScript は wp_enqueue_style() / wp_enqueue_script() で読み込み、header.php などに <link> や <script> を直接書きません。
直接書くと、プラグインが読み込むファイルとの依存関係や重複を WordPress が管理できなくなるためです。
アクセス解析などの外部スクリプトも同じで、タグマネージャーのように <head> の先頭に置く必要があるものは wp_head アクションで出力します。
ブロックテーマの案件
案件によっては、テンプレートを HTML で書き、サイトエディターで編集するブロックテーマを採用することがあります。 ブロックテーマでは、ページの中身に加えて、次の範囲もクライアントが管理画面で編集できます。
- ヘッダー・フッター
- 投稿の一覧や詳細ページのレイアウト
- サイト全体の配色や文字
これらもクライアントが自分で変えたい場合は、ブロックテーマを検討します。 ページの中身を編集するだけであれば、ハイブリッドテーマで足ります。