子テーマ

2020.04.07 2020.04.07

TOPICS

翻訳元記事はこちらです。

子テーマを使用すると、サイトの外観の小さな部分を変更しても、テーマの外観と機能性を維持することができます。子テーマの仕組みを理解するには、まず親テーマと子テーマの関係を理解することが重要です。

親テーマとは？

親テーマとは、そのテーマが動作するために必要な WordPress テンプレートファイルとアセットをすべて含む完全なテーマのことです。子テーマを除くすべてのテーマは、親テーマとみなされます。

子テーマとは？

概要で示したように、子テーマは親テーマの見た目と振る舞い、すべての機能を継承しますが、テーマの任意の部分を変更するために使用することができます。この方法では、カスタマイズ部分は親テーマのファイルから分離されています。子テーマを使用すると、あなたのサイトに行ったカスタマイズに影響を与えることなく、親テーマをアップグレードすることができます。

変更をポータブルで複製可能にします
カスタマイズは親テーマの機能とは別のものにしてください
子テーマの変更を壊すことなく、親テーマを更新できます
親テーマの機能を活用することができます
開発時間を節約できます
テーマ開発の勉強を始めるのに最適な方法です

もしあなたが大規模なカスタマイズを行う場合 – スタイルやいくつかのテーマファイルを超えて – 親テーマを作成することは、子テーマよりも良いオプションかもしれません。親テーマを作成することで、将来的に非推奨となるコードの問題を避けることができます。これはケースバイケースで決める必要があります。

子テーマの作り方

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

まず、wp-content/themesにあるthemesディレクトリに新しいフォルダを作成します。

このディレクトリには名前が必要です。子テーマには親テーマと同じ名前を付けますが、最後に-childを付けるのがベストです。例えば、あなたが twentyfifteen の子テーマを作っていた場合、ディレクトリは twentyfifteen-child という名前になります。

2.スタイルシートの作成

次に、style.cssという名前のスタイルシートファイルを作成する必要があります。このファイルには、テーマの外観を制御するすべてのCSSルールと宣言が含まれています。スタイルシートには、ファイルの最上部に以下の必須ヘッダーコメントが含まれていなければなりません。これは、テーマが特定の親を持つ子テーマであるという事実を含め、テーマに関する基本的な情報をWordPressに伝えます。

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

以下の情報は必須です。

Theme Name – テーマの名前
Template – 親テーマのディレクトリ名です。この例の親テーマはTwenty Fifteenテーマなので、Templateはtwentyfifteenになります。別のテーマで作業しているかもしれませんので、それに応じて調整してください。

必要に応じて残りの情報を追加します。必要な子テーマファイルはstyle.cssのみですが、スタイルを正しく読み込むためにはfunctions.phpが必要です。下に続きます。

3.スタイルシートの読み込み

最後のステップで、親テーマと子テーマのスタイルシートを読み込みます。

以前は @import を使って親テーマのスタイルシートをインポートするのが一般的な方法でしたが、スタイルシートの読み込みにかかる時間が長くなるため、これはもはや推奨されません。スタイルシートの読み込みにかかる時間が長くなるからです。

現在推奨されている親テーマのスタイルシートを読み込む方法は、wp_enqueue_scriptsアクションを追加し、子テーマのfunctions.phpでwp_enqueue_style()を使用することです。

そのため、子テーマのディレクトリに functions.php を作成する必要があります。子テーマの functions.php の最初の行は、PHP タグ (<?php) のオープニングとなり、その後で親テーマと子テーマのスタイルシートを読み込むことができます。

次の例の関数は、親テーマがすべてのCSSを保持するために1つのメインstyle.cssだけを使用している場合にのみ機能します。子テーマが複数の.cssファイル（例：ie.css、style.css、main.css）を持っている場合、親テーマの依存関係をすべて維持する必要があります。

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}

子テーマの style.css に実際の CSS コードが含まれている場合 (通常は含まれています)、それも同様に読み込む必要があります。依存関係として ‘parent-style’ を設定すると、親テーマのスタイルシートの後に、子テーマのスタイルシートがロードされます。
子テーマのバージョン番号を含めることで、子テーマのスタイルシートをキャッシュできます。完全な（推奨される）例は次のようになります。

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

ここで parent-style は、親テーマがスタイルシートを登録する際に使用される $handle と同じものです。

子テーマを有効化する

これであなたの子テーマを有効化する準備が整いました。あなたのサイトの管理画面にログインし、管理画面 > 外観 > テーマに移動します。

子テーマが一覧表示され、アクティベーションの準備ができているのがわかるはずです。
WordPress のインストールがマルチサイト対応の場合は、テーマを有効にするためにネットワーク管理画面に切り替える必要があるかもしれません。（ネットワーク管理テーマ画面タブ内）
その後、サイト別の WordPress 管理画面に切り替えて、子テーマを有効化することができます。

子テーマを有効にした後、外観 > メニューとテーマオプション（背景とヘッダー画像を含む）からメニューを再保存する必要があるかもしれません。

テンプレートファイルを追加

functions.phpファイル以外に、子テーマに追加したファイルは、親テーマの同じファイルを上書きします。

ほとんどの場合、親テーマから変更したいテンプレートファイルのコピーを作成し、親テーマのファイルは変更せずにコピーしたファイルに変更を加えるのがベストです。
例えば、親テーマのheader.phpファイルのコードを変更したい場合、そのファイルを子テーマのフォルダにコピーし、そこでカスタマイズします。

あなたが見ているページでどのような特定のテンプレートが使用されているかを検出することができるいくつかのプラグインがあります。

親テーマに含まれていないファイルを子テーマに含めることもできます。例えば、特定のページやカテゴリアーカイブ用のテンプレートなど、親テーマに含まれていないテンプレートを作成したい場合があるかもしれません、（例えば、page-3.php は ID が 3 のページ用に読み込まれます）

WordPress がどのテンプレートを使用するかを決定する方法については、テンプレート階層のページを参照してください。

functions.phpの使用

style.cssとは異なり、子テーマのfunctions.phpは親テーマの対応する部分を上書きしません。その代わりに、親のfunctions.phpに加えて読み込まれます。（具体的には、親のファイルの直前に読み込まれます）

このように、子テーマのfunctions.phpは、親テーマの機能を修正するためのスマートでトラブルのない方法を提供します。あなたのテーマにPHPの関数を追加したいとしましょう。一番手っ取り早い方法は、親テーマのfunctions.phpファイルを開いて、そこに機能を追加することです。
しかし、それはスマートではありません：次回親テーマが更新されたときには、あなたの関数は消えてしまいます。
子テーマを作成し、その中にfunctions.phpファイルを追加し、そのファイルに関数を追加します。
親テーマのfunctions.phpの完全な内容を子テーマのfunctions.phpにコピーしないでください。

functions.phpの構造はシンプルです。一番上にPHPタグがあり、その下にPHPの断片が配置されています。この中には、好きなだけ関数を配置することができます。以下の例では、HTMLページのhead要素にファビコンリンクを追加するというシンプルなことを行う、基本的なfunctions.phpファイルを示しています。

<?php // Opening PHP tag - nothing should be before this, not even whitespace
 
// Custom Function to Include
function my_favicon_link() {
    echo <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'my_favicon_link' );

子テーマのfunctions.phpが先に読み込まれるということは、条件付きで宣言することで、テーマの自作関数をプラグインのように使用できるということです。
以下のコードのように、子テーマはあらかじめ宣言しておくだけで、親のPHP関数を置き換えることができます。

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  Do something.
    }
}

子テーマのfunctions.phpファイルに何を含めるかについての詳細は、テーマの機能のページを参照してください。

他のファイルを参照・読み込む

子テーマのディレクトリ構造内にあるファイルをインクルードする必要がある場合は、 get_stylesheet_directory() を使用する必要があります。style.cssは子テーマのサブディレクトリのルートにあるので、get_stylesheet_directory()は子テーマのディレクトリを指します。（親テーマのディレクトリではありません）
親テーマのディレクトリを参照するには、代わりに get_template_directory() を使用します。

以下は、子テーマのディレクトリ内に保存されているファイルを参照する際の get_stylesheet_directory() の使用例です。

<?php require_once( get_stylesheet_directory(). '/my_included_file.php' ); ?>

一方、この例ではget_stylesheet_directory_uri()を使用して、子テーマディレクトリの/imagesフォルダ内に保存されている画像を表示しています。

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/my_picture.png" alt="" />

ファイルパスを返す get_stylesheet_directory() とは異なり、 get_stylesheet_directory_uri() は URL を返します。

スタイルとスクリプトの読み込み

スクリプトとスタイルはそれぞれ独自の関数で読み込まれ、それらはアクションでラップされなければなりません。詳細については、CSS と JavaScript の読み込みのページをお読みください。

WordPress はフロントエンドで子テーマのスタイルシートを自動的に読み込んでくれません。以下は wp_enqueue_scripts()アクションフックを使って、子テーマのスタイルシートを読み込む関数を呼び出す例です。

<?php
add_action( 'wp_enqueue_scripts', 'my_plugin_add_stylesheet' );
function my_plugin_add_stylesheet() {
    wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/style.css', false, '1.0', 'all' );
}

特別な配慮

投稿フォーマット

子テーマは親テーマで定義された投稿フォーマットを継承します。しかし、子テーマを作成する際には、add_theme_support('post-formats') を使用すると、親テーマで定義されているフォーマットを上書きしてしまい、追加することができないことに注意してください。

RTLサポート

RTL 言語をサポートするために、子テーマに rtl.css ファイルを追加します。

/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
*/

親テーマにrtl.cssファイルがない場合でも、子テーマにrtl.cssファイルを追加することをお勧めします。WordPress は is_rtl() が true の場合のみ、rtl.css ファイルを自動読み込みします。

国際化

子テーマは、WordPress の国際化 API を使用して、他の言語に翻訳できるように準備することができます。子テーマの国際化については、特別な配慮が必要です。

子テーマを国際化するには、以下の手順を踏みます。

1.言語ディレクトリを追加します

例：twentyfifteen-child/languages/

2.言語ファイルを追加します

domain-he_IL.xx のプラグインファイルとは異なり、ファイル名は he_IL.po と he_IL.mo (言語による) でなければなりません。

3.テキストドメインを読み込みます

after_setup_theme アクションの間に functions.php でload_child_theme_textdomain() を使用します。
load_child_theme_textdomain()で定義されたテキストドメインは、子テーマ内のすべての文字列を翻訳するために使用する必要があります。

4.GetText 関数を使用して、文字列に i18n サポートを追加します。

テキストドメインの例

<?php
/**
  * Set up My Child Theme's textdomain.
  *
  * Declare textdomain for this child theme.
  * Translations can be added to the /languages/ directory.
  */
function twentyfifteenchild_theme_setup() {
    load_child_theme_textdomain( 'twentyfifteenchild', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'twentyfifteenchild_theme_setup' );

この時点で、子テーマの文字列は翻訳の準備ができています。翻訳のために適切に国際化されていることを確認するために、各文字列には twentyfifteteenchild テキストドメインが必要です。

gettext 関数の例

ここでは、「コードは詩である」というフレーズを表示する例を使用します。

<?php
esc_html_e( 'Code is Poetry', 'twentyfifteenchild' );
?>

load_child_theme_textdomain()で定義されたテキストドメインは、子テーマ内のすべての文字列を翻訳するために使用されなければなりません。親テーマのテンプレートファイルが含まれている場合は、テキストドメインを親テーマで定義されたものから子テーマで定義されたものに変更しなければなりません。