閉じる

WordPress自作テーマ作成に必要なファイル構成：ブロックテーマ時代の最小ファイル一覧

広告

WordPressの進化に伴い、テーマ開発の在り方は「クラシックテーマ」から「ブロックテーマ」へと大きく舵を切りました。

2026年現在、フルサイト編集（FSE）は完全に成熟し、テーマ自作のハードルは以前よりも低くなる一方で、構成ファイルの種類や役割は大きく変化しています。かつてのPHPを中心とした開発スタイルから、HTMLとJSONをベースとしたモダンな設計への移行が求められています。

本記事では、現在のWordPressにおける自作テーマ作成において、最低限必要となるファイル構成を具体的に解説します。

これから自作テーマに挑戦する方が、迷うことなくモダンな開発環境を構築できるよう、各ファイルの役割と中身を詳しく見ていきましょう。

目次 [ close ]
  1. ブロックテーマ時代の自作テーマとは
  2. 自作テーマに必要な最小ファイル一覧
  3. 1. style.css：テーマ情報の定義
    1. style.cssの記述例
  4. 2. theme.json：デザインシステムの核
    1. theme.jsonの記述例
  5. 3. index.php：テーマ認識のための必須ファイル
    1. index.phpの記述例
  6. 4. templates/index.html：表示の骨組み
    1. templates/index.htmlの記述例
  7. 5. functions.php：テーマ機能の拡張
    1. functions.phpの記述例
  8. さらに利便性を高めるための追加ファイル
    1. parts/ ディレクトリとテンプレートパーツ
    2. patterns/ ディレクトリとブロックパターン
  9. ブロックテーマ開発のワークフロー
  10. 自作テーマ作成時の注意点
  11. まとめ

ブロックテーマ時代の自作テーマとは

2020年代半ばを過ぎた現在、WordPressのテーマ開発において「ブロックテーマ」は標準的な選択肢となりました。

従来のクラシックテーマでは、header.php や footer.php といった多数のPHPファイルを用意し、WordPress独自のテンプレートタグを駆使してコードを記述する必要がありました。

しかし、ブロックテーマでは、サイトのレイアウトをサイトエディター（旧フルサイト編集）上で直感的に構築します。

テーマ開発者の役割は、PHPでロジックを書くことよりも、JSONファイルでデザインシステムを定義し、HTMLテンプレートでブロックの配置を決定することにシフトしています。

この変化により、テーマを構成する「最小ファイル」の定義も変わりました。

かつては index.php と style.css の2つがあれば動作しましたが、現在のモダンな開発では、これらに加えて theme.json とテンプレート用のディレクトリ構成が不可欠となっています。

自作テーマに必要な最小ファイル一覧

まずは、ブロックテーマとして認識され、最低限の表示と編集機能を持たせるために必要なファイル群を整理します。

以下の表は、最小構成のファイルリストです。

ファイル・ディレクトリ名役割必須度
style.cssテーマのメタ情報（名前、作者等）を記述する必須
index.phpテーマとして認識させるための空ファイル必須
theme.json色、フォント、ブロックの設定を一括管理する必須
templates/HTMLテンプレートを格納するディレクトリ必須
templates/index.htmlフロントページのメインテンプレート必須
functions.phpスクリプトの読み込みや独自機能の定義推奨

これらのファイルが揃うことで、WordPressは新しいテーマとして認識し、サイトエディターを使ってデザインを変更することが可能になります。

それでは、各ファイルの具体的な記述内容を確認していきましょう。

1. style.css：テーマ情報の定義

style.css は、WordPressがそのディレクトリを「テーマ」として認識するために最も重要なファイルです。

ブロックテーマであっても、このファイルの先頭に記述するテーマヘッダーは省略できません。

style.cssの記述例

CSS
/*
Theme Name: My Minimal Block Theme 2026
Theme URI: https://example.com/theme
Author: Your Name
Author URI: https://example.com
Description: 2026年基準の最小構成ブロックテーマです。
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-minimal-block-theme
*/

/* 
ブロックテーマでは、ここにCSSを記述しなくても動作します。
デザインの多くは theme.json またはブロックエディター上で管理するためです。
*/

このファイルに記述された Theme Name が、WordPressの管理画面の「外観 > テーマ」に表示されます。

2026年現在の開発では、個別のCSSクラスをここに記述する機会は減っていますが、グローバルに適用したいリセットCSSや、特定の複雑なアニメーションなどはここに記述するのが一般的です。

2. theme.json：デザインシステムの核

ブロックテーマにおいて、最も重要な役割を果たすのが theme.json です。

このファイルは、サイト全体のカラーパレット、タイポグラフィ、レイアウトの幅、そして各ブロックのデフォルト設定を制御します。

theme.json を適切に記述することで、管理画面の「スタイル」パネルからユーザーがデザインをカスタマイズできるようになり、同時にテーマ独自の制約（使用できる色の制限など）を設けることも可能です。

theme.jsonの記述例

JSON
{
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "color": {
      "palette": [
        {
          "color": "#111111",
          "name": "Black",
          "slug": "black"
        },
        {
          "color": "#ffffff",
          "name": "White",
          "slug": "white"
        },
        {
          "color": "#eb4034",
          "name": "Primary",
          "slug": "primary"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "name": "Inter",
          "slug": "inter"
        }
      ]
    },
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--white)",
      "text": "var(--wp--preset--color--black)"
    },
    "elements": {
      "link": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        }
      }
    }
  }
}

このJSONファイルによって、WordPressは自動的に対応するCSS変数を生成します。

例えば、primary というスラッグの色は、CSS内では var(--wp--preset--color--primary) として利用できるようになります。

theme.jsonの記述ミスは、テーマ全体の表示崩れや管理画面の不具合に直結するため、JSONの構文チェックを行いながら慎重に編集することが重要です。

3. index.php：テーマ認識のための必須ファイル

クラシックテーマではメインのテンプレートファイルだった index.php ですが、ブロックテーマでは実質的な役割を持ちません。

しかし、WordPressのテーマ構造上のルールとして、このファイルが存在しないとテーマとして有効化することができません。

index.phpの記述例

PHP
<?php
// ブロックテーマではテンプレートの処理は templates/index.html が行います。
// このファイルはテーマとして認識されるために存在する必要があります。

中身は空、あるいは上記のようなコメントだけでも問題ありません。

開発の現場では、誤ってこのファイルにロジックを書き込まないよう注意しましょう。

4. templates/index.html：表示の骨組み

ブロックテーマの表示は、PHPではなくHTMLファイルによって定義されます。

テーマフォルダ内に templates ディレクトリを作成し、その中に index.html を配置します。

このファイルの中身は、通常のHTMLタグではなく、「ブロックタグ（ブロックマークアップ）」と呼ばれる特殊なコメント形式で記述されます。

templates/index.htmlの記述例

HTML
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    
    <!-- wp:site-title /-->

    <!-- wp:paragraph -->
    <p>自作ブロックテーマへようこそ。これは2026年の最小構成テンプレートです。</p>
    <!-- /wp:paragraph -->

    <!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
    <div class="wp-block-query">
        <!-- wp:post-template -->
            <!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-excerpt /-->
            <!-- wp:post-date /-->
        <!-- /wp:post-template -->
    </div>
    <!-- /wp:query -->

</main>
<!-- /wp:group -->

このように、<!-- wp:ブロック名 --> という形式でブロックを配置していきます。

この記述により、WordPressはデータベースから投稿情報を取得したり、サイトのタイトルを動的に表示したりすることができます。

手書きでこれらを記述するのは大変ですが、一度サイトエディターで作成したデザインを「コードエディター」モードでコピーすることで、簡単にベースとなるHTMLを作成できます。

5. functions.php：テーマ機能の拡張

functions.php は厳密には必須ではありませんが、実用的なテーマを作る上ではほぼ確実に必要になります。

ブロックテーマであっても、独自のCSSファイルを読み込んだり、ブロックパターンの登録を行ったりする場合に使用します。

functions.phpの記述例

PHP
<?php
/**
 * テーマのセットアップ
 */
function my_minimal_theme_setup() {
    // 投稿のアイキャッチ画像をサポート
    add_theme_support('post-thumbnails');
    
    // エディター用のスタイルを有効化
    add_theme_support('editor-styles');
    
    // 独自のCSSファイルを読み込み
    add_editor_style('style.css');
}
add_action('after_setup_theme', 'my_minimal_theme_setup');

/**
 * フロントエンドにスタイルを読み込む
 */
function my_minimal_theme_enqueue_assets() {
    wp_enqueue_style(
        'my-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );
}
add_action('wp_enqueue_scripts', 'my_minimal_theme_enqueue_assets');

ブロックテーマにおいては、PHPでの記述量は最小限に抑え、WordPressのコア機能が持つ柔軟性を活かす設計が推奨されます。

さらに利便性を高めるための追加ファイル

最小構成ではありませんが、実際の開発においてよく追加される重要なディレクトリ・ファイルについても触れておきます。

parts/ ディレクトリとテンプレートパーツ

ヘッダーやフッターなど、複数のテンプレートで共通して使用するパーツは、parts ディレクトリ内に配置します。

  • parts/header.html
  • parts/footer.html

これらを templates/index.html 内で呼び出す際は、以下のようなブロックマークアップを使用します。

HTML
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

patterns/ ディレクトリとブロックパターン

2026年のテーマ開発において、ブロックパターンはデザインの再利用性を高める鍵です。

特定のレイアウト（例えば「3カラムのサービス紹介」など）をPHPファイルとして patterns ディレクトリに保存しておくと、ユーザーがエディターから簡単に呼び出せるようになります。

ブロックテーマ開発のワークフロー

最小構成のファイルが準備できたら、実際の開発は以下のような流れで進みます。

  1. ローカル環境の構築：Local WPなどのツールを使い、開発用サイトを立ち上げます。
  2. 最小ファイルの配置：wp-content/themes/ 内にフォルダを作成し、前述の5つのファイルを置きます。
  3. テーマの有効化：管理画面で自作テーマを選択します。
  4. サイトエディターでの編集：管理画面の「外観 > エディター」から、視覚的にレイアウトを整えます。
  5. 変更の書き出し：エディターで行った変更を、再び templates/index.html などのファイルに反映（エクスポート）させます。

2026年現在では、Create Block Theme プラグインなど、エディター上の変更を直接テーマファイルに保存できるツールも進化しており、「コードを書くこと」と「画面でデザインすること」の境界線が非常に曖昧になっています。

自作テーマ作成時の注意点

自作テーマを作成する際、初心者が陥りやすいミスがいくつかあります。

  • JSONのカンマ不足：theme.json は非常に厳格です。最後の要素に不要なカンマがあったり、閉じ括弧が足りなかったりすると、テーマ全体が読み込まれません。
  • ブロックマークアップの誤記：HTMLテンプレート内のコメント（<!-- wp:... -->）にスペルミスがあると、ブロックとして認識されず、ただのテキストとして表示されてしまいます。
  • キャッシュの影響：theme.json の変更が反映されない場合、ブラウザキャッシュやWordPress側のスタイルキャッシュをクリアする必要があります。

特に、2026年以降のWordPressではパフォーマンス最適化のためにCSSのインライン化が進んでいるため、従来の wp_enqueue_style だけでは制御しきれないスタイル設定があることを覚えておきましょう。

まとめ

WordPressの自作テーマ作成は、ブロックテーマの普及によって「職人芸的なPHPスキル」を必要とするものから、「構造的なデザイン定義」へと進化しました。

今回紹介した最小ファイル構成は以下の通りです。

  • メタ情報を定義する style.css
  • 認識に必須な index.php
  • デザインシステムを司る theme.json
  • 実際の表示を構成する templates/index.html

これら5つの要素（4ファイル＋1ディレクトリ）さえ理解すれば、誰でもモダンなWordPressテーマの第一歩を踏み出すことができます。

まずはこの最小構成からスタートし、徐々にテンプレートパーツやブロックパターンを追加して、自分だけの理想的なサイトを構築してみてください。

ブロックテーマの柔軟性は、これまでのクラシックテーマでは成し得なかった「ユーザーと開発者の共存」を可能にします。

この新しいスタンダードをマスターし、2026年のWeb制作をよりクリエイティブなものにしていきましょう。

クラウドSSLサイトシールは安心の証です。

URLをコピーしました！