子テーマの作り方と使い方 - WordPressのカスタマイズ

WordPressのテーマをカスタマイズするなら、子テーマを作成した方がよいかと思います。

直接、テーマをカスタマイズしていると、テーマ更新で、綺麗さっぱり、初期状態に…。
今までの努力が台無しになります。

そういう私も、子テーマを作らず、約5か月間、せっせとカスタマイズしてました。
しかし、とうとうテーマ更新のお知らせが来てしまい、この度、大人しく、子テーマを作成。

私みたいな方のために、また、これからカスタマイズしようという方のために、子テーマの作り方と使い方をご紹介します。

また、子テーマのメリット・デメリットなど、その他、知っておいた方がよい内容も合わせて、シェアいたします。

子テーマとは

そもそも、子テーマとは何でしょう。

それは、各自が使用するテーマの初期状態のものを親テーマと呼ぶのに対し、カスタマイズ用に作成したテーマのことです。

親テーマ：初期状態のテーマ
子テーマ：カスタマイズ用のテーマ

テーマによっては、テーマ作成者の方で用意されているものもあります。
しかし、ない場合は、自分で作成しなければいけません。

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

では、子テーマを作成するメリット・デメリットとは何でしょう。

作成する前に、確認しておいた方がよいかと思います。

１．子テーマを作成するメリット

子テーマを作成するメリットは何かというと、下記２つが挙げられます。

テーマ更新（アップデート）時に、カスタマイズしたものがなくなるのを防ぐ
カスタマイズ前の状態を確認できる

でも、まぁ、バックアップを取っていたり、カスタマイズ内容をメモしていれば、いざという時には、なんとかなるとは思いますが…。

２．子テーマを作成するデメリット

子テーマを作成すると、いいことばかりでデメリットはないのでしょうか。

カスタマイズの程度によりますが、下記のようなものが、挙げられます。

子テーマを作成するのに手間がかかる
子テーマを作成しても、結局は親テーマをいじる必要があったり、サイトが崩れる場合もあり、思いの外、手間がかかる
子テーマの存在により、重要な更新を見逃す可能性がある

style.cssをいじる程度なら、メリットを感じることが多いですが、phpまでいじると、結構、手間が生じたり、重要な更新を見逃すことにもなりかねません。

但し、style.cssのカスタマイズも、量が少ない場合は、WordPressの追加css（付随のcssエディター）を使用した方が早いです。

phpまでカスタマイズしたい方は、一度、ローカル環境で、更新内容を確認してから、カスタマイズし直し、本番サイトを更新した方が得策でしょう。

なお、style.cssも、親テーマで内容が追加されたりすると、子テーマの内容ではカバーされず、崩れて、調整が必要な場合もあります。

また、利用しているテーマによるのかもしれませんが、各テーマで用意されているカスタマイズ機能で設定した内容も継続されないようです。

状況によっては、子テーマを作成したら一安心というものではないようです。

親テーマと子テーマの読み込み

子テーマを作成する上で、親テーマと子テーマの読み込みについて、把握しておきましょう。

下記の通り、基本、データは、親テーマ → 子テーマの順に読み込まれます。
そのため、後から読み込まれた子テーマの内容が反映されます。

しかし、functions.phpは逆で、子テーマ → 親テーマなり、親テーマの内容が反映されます。

【読み込み順序】

基本：親テーマ → 子テーマ
functions.php：子テーマ → 親テーマ

また、データは、基本、上書きされますが、style.cssとfunctions.phpは追加となります。

【読み込み方法】

基本：上書き
style.cssとfunctions.php：追加
フォルダ内のファイル：無視（phpの記述を変えない限り）

また、functions.phpはデータの重複はＮＧです。重複すると、画面が真っ白になったりします。

style.cssは重複してもよいですが、上書きではないので、子テーマにない内容が親テーマにあると、その内容が反映し、崩れたりします。

なお、incなど、サブファイル（ディレクトリ）の中にあるファイルは、親テーマと階層を揃えてフォルダを作成しても、そのままでは読み込まれません。

子テーマの作り方

では、本題の子テーマの作り方に入りましょう。

子テーマ作成は、４つのステップが必要になります。

１．子テーマに必要なフォルダとファイルの作成

まずは、子テーマに必要なフォルダ（ディレクトリ）とファイルを作成します。
最低限必要なものは、子テーマのフォルダとstyle.cssとfunctions.phpです。

子テーマのフォルダ名は、親テーマのフォルダ名に「_child」を足した名前がわかりやすいかと思います。

親テーマのフォルダ名は、wp-content > theme の中を確認してください。
（子テーマもこの中に入れます。）

フォルダは、パソコンで作成して、後でアップロードしてもよいですし、FTPソフト（FFFTPなど）やご利用のレンタルサーバーのFTPサービスを使用してもよいかと思います。

style.cssとfunctions.phpは、記述のない空のファイルを準備します。

既にカスタマイズされている方は、style.cssは、そのコピーでもよいですが、functions.phpは、重複ＮＧですので、コピーではなく、必ず、空のファイルをご準備ください。

他のファイルは必要により準備しましょう。もとのファイルのコピーでＯＫです。

２．style.cssとfunctions.phpの記述

style.cssとfunctions.phpには、以下を記述し、子テーマを認識させるようにしましょう。

【style.css】

/*
Template: theme
Theme Name: theme_child
*/

Templateに親テーマのフォルダ名、Theme Nameに子テーマのフォルダ名を入れます。
大文字小文字を間違えないようにしましょう。

【functions.php】

<?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には、上記コードを入力します。