高度なトピック - 子テーマ（Child Themes） - 《WordPress開発者リソース》日本語

親テーマと子テーマとは何ですか？
子テーマを作成する方法
子テーマのカスタマイズ

親テーマと子テーマとは何ですか？

親テーマ

すべてのテーマは、特に子テーマでない限り、技術的には親テーマです。基本的に、これはそれらがWordPressにインストールしてアクティブ化できる完全なテーマであることを意味します。

親テーマは、テーマ構造のドキュメントに記載されているすべての必須ファイルを持っている必要があります。それ以外は、テーマが親テーマになるために特別なことをする必要はありません。

子テーマ

子テーマは、デフォルトで親テーマからすべてを含みます。これにはデザインやその機能が含まれます。しかし、親テーマのファイルを直接変更することなく、親テーマにカスタマイズを加えるためにも使用できます。これは、あなた（または子テーマのユーザー）が、変更を失うことなく親テーマの更新を受け取ることができることを意味します。

子テーマの利点:

カスタマイズをポータブルで再現可能にします。
カスタマイズを親テーマから分離します。
親テーマを更新してもカスタマイズを失うことがありません。
必要なコードだけを書くので、開発時間を節約できます。
完全なテーマの開発への旅を始めるための素晴らしい方法です。

子テーマ内で広範なカスタマイズを行うことは、最終的には管理の頭痛の種になる可能性があることに注意する価値があります。これらのより広範なプロジェクトの場合、元のテーマをフォークして、自分自身の完全な/親テーマを作成する方が良いことがよくあります。これはケースバイケースで決定する必要があります。

孫テーマについてはどうですか？

現在、これは不可能です。標準のテーマ階層には、親テーマと子テーマの2つのレベルしかありません。

ただし、ブロックテーマを構築する際には、サイトのフロントエンドに表示される他のレベルがあります（それらはテーマレイヤーの一部ではありません）：

WordPress自体（デフォルト theme.json）
親テーマ
子テーマ
ユーザーのカスタマイズ（theme.json、テンプレート、およびパターンをオーバーライドできます）

ある意味で、ユーザーのカスタマイズレイヤーは「孫」テーマのように機能します。大きな違いは、変更がファイルシステムではなくデータベースに保存されることです。

それ以外には、インストール可能な孫テーマを作成する標準的な方法はありません。

子テーマを作成する方法

WordPressにバンドルされているデフォルトのTwenty Twenty-Fourテーマの子テーマを作成してみましょう。

子テーマフォルダーを作成する

まず、子テーマには名前が必要です。これはテーマに付けたい名前であれば何でも構いませんが、このガイドでは「Grand Sunrise」と名付けましょう。

次に、wp-content/themesディレクトリにテーマ名のケバブケースバージョンで新しいフォルダーを作成します: grand-sunrise.

style.cssを作成する

次に、style.cssという名前のファイルを作成する必要があります。これは子テーマが存在するために絶対に必要なファイルです。すべてのstyle.cssファイルには、メインスタイルシートのドキュメントに記載されているように、ファイルヘッダーと必要なヘッダーフィールドが含まれている必要があります（まだ確認していない場合は、このドキュメントを確認してください）。

メインスタイルシートのドキュメントに記載されているように、子テーマを子テーマとして宣言するために必要な追加のフィールドがあります。style.cssファイルヘッダーにTemplateヘッダーフィールドを追加する必要があります:

/**
 * Theme Name: Grand Sunrise
 * Template:   twentytwentyfour
 * ...other header fields
 */

Templateフィールドには1つの注意点があります。これは、wp-content/themesフォルダーに対して親テーマのフォルダー名と100%一致する必要があります。この場合、Twenty Twenty-Fourテーマフォルダーがwp-content/themes/twentytwentyfourにあることがわかっています。したがって、Templateの値はtwentytwentyfourでなければなりません。

子テーマをインストールしてアクティブ化する

すでにwp-content/themesフォルダーにテーマがある開発環境で作業していない場合は、今すぐそこに移動する必要があります。セットアップに応じて、いくつかのオプションがありますが、最も簡単なのは、テーマのZIPファイルを作成し、WordPress管理の外観 > テーマ > 新規追加を介してテストサイトにアップロードすることです。

WordPressにテーマを追加する方法についての詳細は、WordPressドキュメントサイトの新しいテーマの追加をお読みください。

テーマがインストールされたら、WordPress管理の外観 > テーマに移動し、テーマを見つけます。スクリーンショットに示されているように、アクティブ化リンクをクリックします:

$WordPressの外観 \u0026gt; テーマ画面に空の子テーマのポップアップオーバーレイが表示されています。$

まだカスタマイズしていないため、親テーマとは見た目が変わりません。しかし、子テーマを正常に作成しました。

子テーマのカスタマイズ

子テーマをカスタマイズする際には、このハンドブック全体で文書化されているすべての機能が完全に利用可能です。しかし、考慮すべきいくつかの点があります。これらについては、次のセクションで学びます。

style.cssの読み込み

これはオプションのステップであり、ブロックテーマの場合は一般的に必要ありません。なぜなら、スタイルの処理は通常theme.jsonを介して行われるからです。しかし、クラシックテーマを構築している場合は、しばしば必要です。いずれにせよ、style.css内のCSSコードが読み込まれることを確認したい場合のみ、このステップを実行する必要があります。

このセクションに進む前に、アセットの読み込みのドキュメントを確認してください。このドキュメントでは、style.cssをより詳細に読み込む方法について説明しています。このドキュメントでは、適切なフックでwp_enqueue_style()関数を介してスタイルシートをエンキューする方法を学びます（子テーマは親テーマの前に読み込まれることに注意してください）。

スタイルシートをエンキューする理想的な方法は、親テーマが自分のstyle.cssと子テーマのstyle.cssの両方を読み込むときです。しかし、すべてのテーマがこれを行うわけではありません。したがって、親テーマのコードを調べて、どのスタイルシートがエンキューされているかを確認する必要があります。これはテーマごとに異なり、厳密なルールはありません。

親テーマが両方のスタイルシートを読み込む場合、子テーマは何もする必要はありません。そのスタイルシートは自動的に読み込まれます。

Twenty Twenty-Fourテーマの場合、スタイルシートはまったく読み込まれません。したがって、次のコードスニペットのように、style.cssをfunctions.phpを介して読み込む必要があります:

add_action( 'wp_enqueue_scripts', 'grand_sunrise_enqueue_styles' );
function grand_sunrise_enqueue_styles() {
    wp_enqueue_style(
        'grand-sunrise-style',
        get_stylesheet_uri()
    );
}

使用している親テーマが自分のスタイルシートのみを読み込む場合、上記のコードを使用して子テーマのstyle.cssを読み込むことになります。

親テーマがアクティブテーマのスタイルシートのみを読み込む場合、get_stylesheet_uri()を介して、子テーマのスタイルシートが読み込まれます。この場合、親テーマのスタイルシートもfunctions.phpを介してエンキューすることをお勧めします。コードは次のようになります:

add_action( 'wp_enqueue_scripts', 'grand_sunrise_enqueue_styles' );
function grand_sunrise_enqueue_styles() {
    wp_enqueue_style(
        'grand-sunrise-parent-style',
        get_parent_theme_file_uri( 'style.css' )
    );
}

テンプレート、パーツ、およびパターン

子テーマを構築する際には、親テーマに存在する任意のテンプレート、パーツ、またはパターンを、子テーマに同じ名前のファイルを追加することで上書きするオプションがあります。注: パターンも同じ登録されたSlugフィールドを持っている必要があります。

親テーマに存在しない場合でも、子テーマに新しいテンプレート、パーツ、およびパターンを追加することもできます。これらの機能について詳しくは、ハンドブックの次の記事を参照してください:

functions.phpの使用

テンプレートやパターンとは異なり、子テーマのfunctions.phpファイルは親テーマのfunctions.phpファイルを上書きしません。実際、両方が読み込まれ、子テーマが親テーマの直前に読み込まれます。

そのため、子テーマのfunctions.phpは、親テーマやWordPressの機能を変更するためのスマートでトラブルフリーな方法を提供します。

たとえば、テーマにPHP関数を追加したい場合、最も早い方法はそのfunctions.phpファイルを開いて関数をそこに置くことです。しかし、それは良いプラクティスとは見なされません—次回テーマが更新されると、関数が消えてしまいます！

子テーマを作成し、カスタムコードを子テーマのfunctions.phpファイルに追加する方がはるかに良いです。関数はそこからも同じ仕事をしますが、親テーマの将来の更新の影響を受けません。

親テーマのfunctions.phpからコードを直接子テーマにコピーしないでください。それは重複した関数名のために致命的なエラーを引き起こす可能性があります。

 <a name="referencing-or-including-other-files"></a>
### 他のファイルの参照またはインクルード
時々、テーマにカスタムファイルを含めたり使用したりする必要があります。その際、子テーマのディレクトリに基づいて正しいディレクトリパスまたはURIを提供する関数を使用していることを確認する必要があります。  
たとえば、`````functions.php`````を介して別のPHPファイルを含めたい場合は、[`````get_theme_file_path()`````](https://developer.wordpress.org/reference/functions/get_theme_file_path/)関数を使用します。以下は、子テーマの`````/inc`````フォルダーから`````functions-helpers.php`````ファイルを含めるコードスニペットです:  
``````bash
require_once get_theme_file_path( 'inc/functions-helpers.php' );
`

ファイルを含める方法について詳しくは、カスタム機能のドキュメントをお読みください。

画像やスタイルシートなど、URLでファイルを参照する必要がある場合は、別の関数を使用する必要があります: get_theme_file_uri()。テーマの/assets/imagesフォルダーからbunny.jpgという名前のファイルを<img>HTMLタグで使用する例を見てみましょう:

<?php $image = get_theme_file_uri( 'assets/images/bunny.jpg' ); ?>
<img src="<?php echo esc_url( $image ); ?>" alt="" />

スクリプト、スタイル、画像、その他のアセットを含める方法については、アセットの読み込みのドキュメントを参照してください。

国際化

親テーマと同様に、子テーマも国際化され、任意の言語で機能するようにできます。詳細については、テーマハンドブックの国際化のドキュメントをお読みください。

国際化のドキュメントに記載されているように、最大の変更点は、ユニークなテキストドメインを作成し、手動で翻訳を読み込む際にload_child_theme_textdomain()を使用し、load_theme_textdomain()を使用しない必要があることです。