WordPressの子テーマとは？その必要性と作成＆導入方法を解説

こんにちは！ジロウです。

ここでは、WordPressに使用するテーマ（テンプレート）の「子テーマ」を作成する方法をご紹介しています。

使用しているテーマのデザインや構造をカスタマイズする場合、元のテーマ（親テーマ）を直で編集すると後々面倒くさい思いをすることがあります。

なので、何かしらの変更を加える際には子テーマを編集することが望ましいと言えます。

WordPressの「子テーマ」とは？

「子テーマ」とは、使用しているWordPressテーマ（テンプレート）の機能やデザインを継承する、もう１つのテーマ（分身？）のことです。

元のテーマ（親テーマ）をWordPressにインストールした後に、子テーマもインストールして有効化します。

ブログの機能やデザインをカスタマイズする際には、この子テーマに変更を施すことでブログ全体に反映されます。

どうしてこのような手法を取るのかと言うと・・・

WordPressでブログを運営していると、ちょくちょくテーマのアップデートが通知されます。ところが、元のテーマにカスタマイズを施してある場合、アップデートによってデフォルトに戻ってしまいます。

苦労してカスタマイズを繰り返し、やっと現状に辿り着いたというのに元に戻ってしまった・・・！

そんな残念な状況を回避するために登場するのが「子テーマ」なんです。

現在は、有料無料を問わず、ほとんどのテーマに子テーマが付属していますが、中にはまだまだ対応していないテーマも存在します。

そこで今回は、この子テーマを自分で作成する方法をご紹介しておこうと思います。

元のテーマをインストール＆有効化する

まずは、お使いのWordPressに元のテーマ（親テーマ）をインストール＆有効化しておきます。

後でこの親テーマから、WordPress管理画面（ダッシュボード）の左サイドメニューを［外観］⇒［テーマエディター］と進んで、必要な要素をコピーすることになります。

フリーエディターを用意する

お使いのパソコンOSに適応したフリーのテキストエディターを用意しましょう。後ほど「phpファイル」をコピペしたり作成したりするのに利用します。

Windowsなら「Tera Pad」や「サクラエディタ」、Macなら「CotEditor」あたりが無料でおすすめです。

Windowsにデフォルトで付属されている「メモ帳」などは、コードが勝手に改編されてしまうなどの不具合が報告されているので推奨できません。

ちなみに、基本的にWindowsユーザーの僕はこの手の作業についてのみ「Tera Pad」を利用していて、これまで不具合を味わった経験はありません。

子テーマのフォルダーを作る

パソコンのデスクトップにフォルダーを新規作成しましょう。

この中に、これから作成する子テーマの要素を格納して行きます。

フォルダーの名前は半角英数字であれば何でも良いですが、大抵は親テーマの名称に「-child」を付けて「○○○○-child」と分かりやすい名前にします。

例えば、僕がよく使用しているTCD製のテーマ「MAG」であれば「MAG-child」、という感じですね。

「functions.php」の作成

子テーマ用の「functions.php」を作成します。

テキストエディターを開いて、下の記述をコピペして下さい。親テーマの「functions.php」を反映させるための記述で、ただコピペするだけでOKです。

それを「functions.php」という名前を付けて子テーマのフォルダー内（ここでは例として「MAG-child」）に保存しましょう。

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

「style.css」の作成

子テーマ用の「style.css」を作成します。

テキストエディタに下の記述をコピペして下さい。

/*
Theme Name:MAG-child
Template:mag_tcd036
Version:3.1.3
*/

「Theme Name:」の右側は子テーマ用に作成したフォルダー名に書き換えて下さい。

「Template:」の右側は親テーマのフォルダー名に書き換えます。※１

「Version:」の右側は使っている親テーマのバージョンに書き換えます。※２

※１　親テーマのフォルダー名が分からない場合には、サーバー内で確認できます。
「public_html/wp-content/themes/」の直下にあるはずなのでチェックしてみて下さい。

※２　親テーマのバージョンは、WordPress管理画面「外観」⇒「テーマエディター」と進み、表示されている「style.css」の一番上の方に書いてあります。

完成したら「style.css」と名前を付けて、これもまた「MAG-child」フォルダー内に格納しましょう。

【テーマ画像をコピーする】

必須ではありませんが、サーバーを確認したついでにテーマのイメージ画像ファイルをダウンロードし、「MAG-child」フォルダー内に格納しましょう。

親テーマフォルダーの直下に「○○○○.png」や「○○○○.jpg」という名前で置かれた画像ファイルです。

これを格納しておくと、WordPressのテーマ一覧ページの見た目も良くなり、気分も上がります（笑）。

画像ファイル無し	画像ファイル有り

「single.php」の作成

個別投稿の記事ページをカスタマイズする場合には、子テーマ用の「single.php」も作成します。

有料無料を問わず、WordPressテーマの機能やデザインは必ずしも自分の好みにマッチするばかりではありません。関連記事やソーシャルメディアへのシェアボタンなど、配置を変更したり削除したりする場合が多々あります。

なので、現状では使う予定がなくても「single.php」を加えておくことをおすすめします。

WordPress管理画面から「外観」⇒「テーマエディター」と進み、右カラムから「個別投稿（single.php）」をクリックします。

左カラムにファイルの内容が表示されるので全選択して、テキストエディタにコピペしましょう。

これに「single.php」と名前を付けて「MAG-child」フォルダー内に格納します。

「header.php」の作成

アナリティクス等のGoogle関連機能の認証コードを、プラグインを使わずにテーマの構造内に直接貼り付ける場合などには、子テーマ用の「header.php」も作成しておきます。

WordPress管理画面から「外観」⇒「テーマエディター」と進み、右カラムから「テーマヘッダー（header.php）」をクリックします。

内容が表示されるので、「single.php」と同じ要領で全選択してテキストエディタにコピペしましょう。

これに「header.php」と名前を付けて「MAG-child」フォルダー内に格納します。

これで子テーマの準備が完了しました。

アップロードと有効化

それでは、準備が整った子テーマフォルダー（ここでは「MAG-child」）をZIPファイルに圧縮しましょう。

続いて、WordPress管理画面から「外観」⇒「テーマ」と進み、［新規追加］をクリックします。

次の画面で［テーマのアップロード］をクリックし、［参照］からパソコン上に保存した子テーマZIPフォルダー（ここでは「MAG-child.zip」）を指定して、［今すぐインストール］で取り込みます。

後はインストールした子テーマを［有効化］すればOKです。

お疲れ様でした。

トラブルシューティング

もし、作成した子テーマの「style.css」にカスタマイズを施してもブログに反映されない場合には、「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')
    );
}

これは、子テーマの「style.css」の役割をより明確に記述した内容になっています。

以上で子テーマの導入が完了しました。

今後、テーマにカスタマイズを施す際には、［外観］⇒［テーマエディター］と進んで、有効化されている子テーマのファイルをイジればOKです。

親テーマを直接編集するわけではないので、テーマをアップデートしてもカスタマイズした部分が消えることはないはずです。