WordPressテーマ開発の基本ファイル構成｜クラシックテーマとブロックテーマの最小構成

WordPressのテーマは、クラシックテーマなら style.css と index.php、ブロックテーマなら style.css と templates/index.html の2ファイルがあれば有効化できます。この記事では、その最小構成から実用的なテーマに育てるまでに置くファイルと、それぞれの役割・置き場所・つまずきやすい点を順に整理します。読み終えるころには、既存テーマのフォルダを開いたときに「どのファイルが何をしているか」を説明できるようになるはずです。

まず決めること：クラシックテーマかブロックテーマか

現在のWordPressには、テンプレートをPHPで書く「クラシックテーマ」と、HTML（ブロックのマークアップ）で書きサイトエディターで編集できる「ブロックテーマ」の2系統があります。どちらを作るかでフォルダ構成が大きく変わるため、最初に決めておきます。

• クラシックテーマ：header.php・single.php などのPHPテンプレートでHTMLを出力します。既存サイトの改修や、PHPで細かく出力を制御したい場合に向きます。
• ブロックテーマ：templates/ と parts/ に置いたHTMLファイルと、theme.json で見た目と設定を管理します。管理画面のサイトエディターからヘッダーやテンプレートを編集できます。

WordPress公式のデフォルトテーマは Twenty Twenty-Two 以降ブロックテーマになっており、新規開発ではブロックテーマが主流になりつつあります（2026年10月現在）。ただしクラシックテーマのサポートが打ち切られたわけではないので、運用中のサイトを無理に移行する必要はありません。

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

クラシックテーマの代表的な構成は次のとおりです。必須なのは style.css と index.php だけで、それ以外は必要になったら追加します。

wp-content/themes/my-theme/
├── style.css          （必須：テーマ情報のヘッダー）
├── index.php          （必須：最後の受け皿になるテンプレート）
├── functions.php      （機能の登録・CSS/JSの読み込み）
├── screenshot.png     （管理画面に出るサムネイル）
├── header.php
├── footer.php
├── sidebar.php
├── front-page.php
├── home.php
├── single.php
├── page.php
├── archive.php
├── search.php
├── 404.php
├── comments.php
├── template-parts/
│   └── content.php
└── assets/
    ├── css/
    └── js/

style.css：テーマを認識させるヘッダー

WordPressは style.css 先頭のコメント（ファイルヘッダー）を読んでテーマとして認識します。Theme Name が無いとテーマ一覧に表示されません。

/*
Theme Name: My Theme
Theme URI: https://example.com/my-theme/
Author: Your Name
Description: 自社サイト用のクラシックテーマ
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-theme
*/

Text Domain はフォルダ名と同じにしておくと翻訳まわりで混乱しません。Requires at least や Tested up to の値は例なので、実際に動作確認したバージョンに合わせて書き換えてください。なお、このファイルに書いたCSSは自動では読み込まれません。読み込みは次の functions.php で行います。

functions.php：テーマの機能を登録する

functions.php はテーマが有効なときに毎回読み込まれるPHPファイルで、テーマの機能宣言とアセットの読み込みを担当します。

<?php
// テーマの機能を宣言する
add_action( 'after_setup_theme', function () {
	add_theme_support( 'title-tag' );        // <title> をWordPressに任せる
	add_theme_support( 'post-thumbnails' );  // アイキャッチ画像
	add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script' ) );
	register_nav_menus( array(
		'primary' => __( 'メインメニュー', 'my-theme' ),
	) );
} );

// CSS と JS を読み込む
add_action( 'wp_enqueue_scripts', function () {
	$ver = wp_get_theme()->get( 'Version' );
	wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), $ver );
	wp_enqueue_script(
		'my-theme-main',
		get_template_directory_uri() . '/assets/js/main.js',
		array(),
		$ver,
		array( 'strategy' => 'defer', 'in_footer' => true )
	);
} );

ここでのつまずきは2つあります。1つは、<link> や <script> を header.php に直書きしてしまうことです。直書きするとプラグインとの依存関係や読み込み順を管理できないため、wp_enqueue_style() / wp_enqueue_script() を使います。もう1つは、functions.php の構文エラーでサイト全体が表示されなくなることです。編集は本番ではなくステージング環境で行い、FTPやファイルマネージャーで元に戻せる状態にしてから作業してください。

header.php と footer.php に入れるべき関数

クラシックテーマでは、header.php に wp_head()、footer.php に wp_footer() を入れるのが前提です。これが無いと、functions.php で読み込んだCSS/JSやプラグインの出力が表示されません。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<?php wp_footer(); ?>
</body>
</html>

各テンプレートからは get_header() と get_footer() で読み込みます。記事一覧と個別記事で共通の部品は template-parts/ に切り出し、get_template_part( 'template-parts/content', get_post_type() ); のように呼び出すと重複を減らせます。

テンプレートファイルとテンプレート階層

single.php・page.php・archive.php などは、WordPressの「テンプレート階層」によって自動的に選ばれます。たとえば投稿の個別ページなら single-{投稿タイプ}-{スラッグ}.php → single-{投稿タイプ}.php → single.php → singular.php → index.php の順に探し、最初に見つかったファイルを使います。最終的な受け皿が index.php なので、これだけは必須になっているわけです。

最初から全テンプレートを作る必要はありません。index.php で一通り表示できるようにしてから、表示を変えたいページの種類ごとにファイルを追加していくと、どのファイルがどこに効いているかを把握しやすくなります。

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

ブロックテーマでは、PHPテンプレートの代わりにブロックのマークアップを書いたHTMLファイルを使います。

wp-content/themes/my-block-theme/
├── style.css           （必須：テーマ情報のヘッダー）
├── theme.json          （推奨：色・文字・余白などの設定とスタイル）
├── functions.php       （任意：必要な処理があれば）
├── screenshot.png
├── templates/
│   ├── index.html      （必須）
│   ├── single.html
│   ├── page.html
│   ├── archive.html
│   └── 404.html
├── parts/
│   ├── header.html
│   └── footer.html
├── patterns/
│   └── hero.php
└── styles/
    └── dark.json       （スタイルバリエーション）

• templates/：ページ種類ごとのテンプレート。選ばれる順番はクラシックテーマと同じテンプレート階層です。
• parts/：ヘッダーやフッターなどのテンプレートパーツ。テンプレートからは <!-- wp:template-part {"slug":"header"} /--> のように参照します。
• patterns/：ブロックパターン。PHPファイル先頭のヘッダー（Title や Slug など）で自動登録されます。
• styles/：配色やフォントの別バージョン（スタイルバリエーション）を theme.json と同じ形式で置きます。

theme.json は、WordPress 6.6 以降ではスキーマのバージョン3が使われます。最小限なら次のように書けます。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": { "contentSize": "720px", "wideSize": "1200px" }
	},
	"styles": {
		"typography": { "lineHeight": "1.8" }
	}
}

注意したいのは、サイトエディターで変更した内容はテーマのファイルではなくデータベースに保存される点です。ファイルを編集したのに表示が変わらない場合は、サイトエディター側でそのテンプレートがカスタマイズされていないかを確認し、必要ならカスタマイズをリセットします。逆に、エディターで作った変更をテーマのファイルに書き戻したい場合は、WordPress.org の公式プラグイン「Create Block Theme」が使えます（画面の表記はバージョンで変わることがあります）。

既存テーマを直すなら子テーマを作る

配布テーマや購入テーマを直接編集すると、テーマの更新で変更が消えます。改修が目的なら子テーマを作り、親テーマのファイルには触れないのが基本です。子テーマの style.css には Template: に親テーマのフォルダ名（表示名ではありません）を書きます。

/*
Theme Name: My Theme Child
Template: my-theme
Version: 1.0.0
Text Domain: my-theme-child
*/

子テーマにも同名のテンプレートを置くと、そちらが優先されます。パスを取得する関数も使い分けが必要で、get_stylesheet_directory() は子テーマ（有効なテーマ）、get_template_directory() は親テーマのフォルダを返します。子テーマから自分のファイルを読み込むつもりで get_template_directory_uri() を使い、404になるのはよくあるミスです。

作ったテーマの確認方法

• 管理画面の「外観」→「テーマ」に表示されるか（表示されない場合は style.css のヘッダーとフォルダ階層を確認）
• wp-config.php で WP_DEBUG を有効にしたステージング環境で、警告や Notice が出ないか
• 公式の「Theme Check」プラグインで、必要な関数の抜けや非推奨の書き方が無いか
• ブラウザの開発者ツールで、CSS/JSが意図したURLから読み込まれているか

まとめ

• テーマの最小構成は、クラシックテーマが style.css + index.php、ブロックテーマが style.css + templates/index.html
• style.css のヘッダーでテーマとして認識され、CSS/JSの読み込みは functions.php で wp_enqueue_style() / wp_enqueue_script() を使う
• クラシックテーマでは wp_head()・wp_footer()・body_class()・wp_body_open() を入れておく
• どのテンプレートが使われるかはテンプレート階層で決まり、最後の受け皿が index.php（templates/index.html）
• ブロックテーマは templates/・parts/・patterns/・theme.json が中心で、エディターでの変更はデータベースに保存される
• 既存テーマの改修は子テーマで行い、作業はバックアップを取ったうえでステージング環境で試す

• WordPressのテンプレート階層の仕組み
• WordPressの子テーマの作り方