[WordPress]「子テーマ」の構造と自作する方法と利点

WordPressの子テーマは親テーマをもとに作られたカスタマイズ用の追加テーマで、テーマのアップデート時にも自分の変更内容を保持できます。
子テーマを作るには主にstyle.cssとfunctions.phpの2つのファイルが必要で、親テーマとの連携にはTemplateの指定が重要です。
作成した子テーマはZIP形式に圧縮してWordPressの管理画面からアップロードすると簡単にインストールできます。

1. 子テーマとは何か？

WordPressの「子テーマ」は、「親テーマ」をもとに作られた、カスタマイズ用の追加テーマです。
子テーマはstyle.cssとfunctions.phpの2つのファイルがあれば作れます。

WordPressのウェブサイトを運営していると、デザインや機能をカスタマイズしたくなることがあります。
子テーマを作る最大の理由は、利用しているテーマがアップデートされても自分のカスタマイズ内容を保持できることです。

親テーマをアップデートしてもカスタマイズ内容が失われない
親テーマのファイルを直接編集する必要がない
問題が発生しても親テーマを適用すれば元に戻せる

親テーマのファイルを直接変更すると、テーマのアップデート時にその変更内容が上書きされてしまいます。
しかし、アップデートには、致命的なエラー修正やセキュリティ対策も含まれていて、無効にするわけにもいきません。

せっかく自分でカスタマイズしたものが、「全部やり直し」にならないようにするために、「子テーマ」という仕組みが用意されています。

しかも、子テーマは親テーマの一部を上書きするだけのファイルなので、内容もシンプル。
編集するハードルも低くなります。
「カスタマイズ」と「アップデート」を両立させるために、子テーマを作るのです。

ちょっと読み込み処理が複雑になりますが、コードレベルでカスタマイズをするなら、子テーマを作るメリットが大きいです。

子テーマを作るデメリット

子テーマの作成にはある程度の知識が必要
親テーマのバージョンアップによって子テーマの編集が必要になることもある
親テーマと子テーマの2つを読み込むため、サイトが重くなる可能性がある

目次に戻る

1-1. 子テーマ制作に必要なもの

子テーマを自分で作る場合、主に2つのファイルが必要です：

style.css：
テーマのデザインスタイルを設定するファイルです。
functions.php：
WordPressに機能を追加するファイルで、プラグインのような役割を持ちます。

子テーマでは、親テーマの同じファイルの内容を上書きしたり、新しい機能を追加したりします。

その他にも、header.phpやindex.phpなど、親テーマのファイルを細かくカスタマイズしたい場合は、それらのファイルも子テーマに追加できます。

目次に戻る

2. 子テーマの作り方

目次に戻る

2-1. 子テーマのフォルダを作る

まず、子テーマ用のフォルダを作ります。
パソコンのエクスプローラーで「新規作成」→「フォルダー」を選びます。

フォルダ名に決まりはないですが、わかりやすいように「テーマ名-child」というように付けるのが一般的

目次に戻る

2-2. style.cssの雛形を作る（Template）

次に、子テーマのstyle.cssファイルを作ります。

/*
Theme Name:Chiilabo child
Theme URI:
Description:WordPressテーマ「Chiilabo」の自作子テーマです。
Template:ParentThemeName
Author:ちいラボ
Author URI:http://chiilabo.com/
Version:0.0.8
*/

このコードでは、子テーマの情報をコメント内に記載しています。
一番重要なのは、「Template」。
親テーマのフォルダ名で、これで親テーマと連携します。
間違えると子テーマが正しく動作しません。

あと、Theme Nameも大事です。
半角英数だけにするのが無難です。
&などの記号を含めたら、テーマファイルエディタでファイルの保存ができない不具合がありました。

目次に戻る

2-3. functions.phpの雛形を作る（theme_enqueue_styles）

次に、functions.phpファイルを作ります。

WordPressに「親テーマのstyle.cssを読み込み、その後に子テーマのstyle.cssを読み込む」という指示を与えています。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  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')
);
}
?>

functions.phpの雛形を作る（theme_enqueue_styles）

これにより、親テーマのスタイルの上に子テーマのスタイルが適用されます。
これで子テーマの基本ファイルが完成しました。

ただし

テーマによっては上記の方法では正常に動作しないことがあります。

例えば、以下のように親テーマのstyle.cssを「main-style」として再登録するなどの工夫が必要なケースがあるのです。

<?php
function theme_enqueue_styles() {
wp_dequeue_style('main-style');
wp_deregister_style('main-style');
wp_enqueue_style( 'main-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('main-style') );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11 );
?>

テーマによって具体的な方法が異なるため、うまくいかない場合はテーマの開発元で確認する必要があります。

目次に戻る