子テーマの作り方と親テーマとの違い【WordPress】

子テーマとは？親テーマとの違いを理解する
子テーマの仕組み
子テーマの作り方
ファイルの上書き方法
躓きやすいポイント
まとめ

子テーマとは？親テーマとの違いを理解する

WordPressのテーマをカスタマイズするとき、「直接テーマファイルを編集していい？」と思ったことはありませんか？結論から言うと、親テーマを直接編集するのはNGです。

テーマをアップデートすると編集内容がすべて上書きされて消えてしまうからです。そこで使うのが子テーマです。子テーマを使えば、親テーマを更新しても自分のカスタマイズは残ります。この記事では子テーマの仕組みと作り方を順番に解説します。

子テーマの仕組み

子テーマは「親テーマの設定を引き継ぎながら、上書きしたい部分だけ変更できる」テーマです。

子テーマにファイルがある → 子テーマのファイルが優先される
子テーマにファイルがない → 親テーマのファイルが使われる

この仕組みのおかげで、変更したいファイルだけを子テーマに置けばOKです。親テーマ全体をコピーする必要はありません。

子テーマの作り方

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

wp-content/themes/の中に新しいフォルダを作ります。フォルダ名は親テーマのフォルダ名に-childを付けるのが慣例です。

wp-content/
　　themes/
　　　　cocoon/ ← 親テーマ
　　　　cocoon-child/ ← 子テーマ（新しく作る）

② style.cssを作成する

子テーマフォルダの中にstyle.cssを作り、以下を記述します。

/*
Theme Name: Cocoon Child
Template: cocoon
*/

各項目の解説

Theme Name：子テーマの名前（管理画面に表示される）
Template：親テーマのフォルダ名（完全一致で指定する）

Templateの値が間違っていると子テーマが正しく動かないので、親テーマのフォルダ名を正確にコピーしましょう。

③ functions.phpを作成して親テーマのCSSを読み込む

子テーマフォルダにfunctions.phpを作り、以下を記述します。

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

各部分の解説

wp_enqueue_style()：スタイルシートを安全に読み込む関数
get_template_directory_uri()：親テーマのフォルダURLを取得する
子テーマ自身のstyle.cssは自動で読み込まれるため、親テーマ分だけ明示的に読み込む

functions.phpに書いてはいけないコード3選【WordPress】

functions.phpに何でも書くのは危険ですWordPressをカスタマイズしていると、「とりあえずfunctio…

↑　functions.phpのNGコードはこちらで解説しています。

④ 管理画面で子テーマを有効化する

style.cssとfunctions.phpが揃ったら、WordPressの管理画面「外観 → テーマ」を開きます。子テーマが一覧に表示されているので「有効化」をクリックすれば完了です。

ファイルの上書き方法

たとえばheader.phpをカスタマイズしたい場合は、親テーマのheader.phpを子テーマフォルダにコピーして編集します。

cocoon-child/
　style.css
　functions.php
　header.php ← 親テーマからコピーして編集する

子テーマにheader.phpがあればそちらが優先されるので、親テーマのheader.phpはそのまま残しておいて大丈夫です。

躓きやすいポイント

Templateの値が間違っている style.cssのTemplate:には親テーマのフォルダ名を書きます。テーマ名（表示名）ではないので注意してください。たとえばCocoonの場合、テーマ名は「Cocoon」ですがフォルダ名はcocoon（小文字）です。

子テーマを有効化したらデザインが崩れた 親テーマのCSSが読み込まれていない可能性があります。functions.phpのwp_enqueue_style()が正しく書かれているか確認してください。テーマによっては親テーマのCSSを自動で引き継ぐものもあるので、使っているテーマのドキュメントも確認しましょう。

functions.phpに構文エラーを入れてしまった 構文エラーがあると管理画面に入れなくなります。FTPで該当ファイルを修正するか、コードを追加する前に必ずバックアップを取る習慣をつけておきましょう。