WordPress子テーマとは？設定方法・作り方を解説

WordPress(ワードプレス)のテーマファイルを編集する場合、子テーマを利用することでメンテナンス性が向上します。

ここではWordPressで子テーマを作成する方法を説明していきます。

ワードプレスをレイアウトをカスタマイズしようと思っています。今のテーマのPHPファイルやCSSファイルとかを編集すれば良いんですよね？？

WordPressには子テーマという機能があって、PHPなどをカスタマイズする場合は子テーマを利用するようにしましょう。

子テーマとは？子テーマの仕組みとできること

親テーマの機能を引き継いだ差分テーマ

WordPressの子テーマは、親テーマの機能とスタイルを継承したテーマです。

子テーマで各種phpファイルやfunctions.php、CSS、JavaScriptなどをカスタマイズできます。

既存のテーマと独立して子テーマでカスタマイズすることで、親テーマをバージョンアップしても子テーマは影響を受けなくなります。

ただし、子テーマを利用しても、親テーマのテンプレート・仕様が大幅にアップデートされた場合は、子テーマの再メンテナンスが必要になる場合があります。

親テーマをカスタマイズした場合の注意点

親となるテーマのファイルをそのままカスタマイズした場合、テーマをアップデートするとカスタマイズした内容が全てリセットされます。※実質アップデートできなくなります。

なお、ここでいうカスタマイズとはテーマファイルに対してPHPやHTML・CSSなどを編集・追加することです。管理画面での設定変更した内容がバージョンアップで消える訳ではないので安心してください。

CSS編集だけなら追加CSSが簡単でおすすめ

WordPressでは、テーマカスタマイザーから追加CSSという機能を利用できます。簡単なCSSの編集のみでしたら子テーマを使わず追加CSSから設定できます。

追加CSSを利用するには、WordPressにログインした状態でカスタマイズボタンを押下します。

追加CSSを押下します。

CSS編集画面で任意のCSS設定を行うことができます。

この追加CSSで編集した内容はテーマのテンプレートを直接編集していないため、テーマが更新されても内容がクリアされることはありません。

小規模なCSS設定であればこの追加CSS機能を利用。HTML、PHPやJavascriptまで編集する場合は子テーマといったような使い分け方をすると良いでしょう。

■追加CSSと子テーマのできることの違い

	子テーマ	追加CSS
用途	本格的にテーマカスタマイズしたい場合に向いている	数行〜数十行の小規模なCSS設定のみで済む場合に向いている
CSSの追加編集	◯	◯
テンプレート(xxx.php)の追加・編集	◯	×
難易度	やや難しい	簡単
更新方法	ファイルを修正してFTPでファイルアップロード	Web上の管理画面で更新
注意点	子テーマとはいえ、親テーマのPHPファイルの仕様やバージョンが大幅に変わった場合、再度子テーマのPHPファイルなどを再メンテナンスしなければならない場合があります。	追加CSSはテーマごとに設定保持されているので、追加CSSを設定した後で親テーマ→子テーマに切り替えると一旦リセットされます。（事前にコピーして再設定する必要があります。）

なお、追加CSSはテーマごとに設定が保存されているため、テーマを切り替えるとCSS設定はクリアされますので注意してください。

関連【追加cssとは】wordpressで追加CSSの使い方・CSS編集方法

WordPress子テーマの設定(公式サイトから入手)

ここでは、公式サイトなどから子テーマファイルをダウンロード入手して設定する方法をご紹介します。

【STEP1】公式サイトから子テーマサンプルを入手する

有名なテーマの場合は、「テーマ名子テーマ」で検索すると、配布元から子テーマのサンプルファイルが配布されていたり、手順が載っている場合があります

※配布されておらず、自作が必要な場合は「child-theme-make」をご参照ください。

有名テーマの子テーマダウンロードページ

まずは、「テーマ名子テーマ」で検索してみましょう。

例. Lightningの子テーマ

公式サイトから子テーマをダウンロードします。

【STEP2】追加CSSなどテーマカスタマイザーの設定を控えておく

子テーマを有効化する前に、追加CSSなどテーマカスタマイザーの設定を控えておきましょう。

親テーマの追加CSSでCSSを記述している場合、子テーマを有効化するとCSSの記述がリセットされます。

子テーマを有効化する前に追加CSSの内容をメモ帳などにコピーしておきましょう。※子テーマに切り替えた後で再度追加CSSに貼り付けてください。

このほか、外観＞カスタマイズのカスタマイザーの設定が一部リセットされることも多いので、既存の設定内容を確認しておきましょう。

カスタマイザーを色々設定している場合は「Customizer Export/Import」などのプラグインを利用してデータをエクスポート・インポートすることも可能です。

(※)WordPressのテーマをバージョンアップ・更新する際は、万一のためにバックアップを取得して元に戻せるようにしておきましょう。

【STEP3】子テーマをアップロード・有効にする

つぎに子テーマをアップロード・有効化していきます。

WordPressの管理者画面で外観＞テーマを選択します。

テーマのアップロードボタンを押下します。

テーマを選択ボタンを押下します。

ダウンロードした子テーマzipファイルを選択します。

テーマをインストールします。

テーマを有効化します。

最後にサイト表示を見て確認します。色設定やデザインレイアウトは子テーマに切り替えたことでリセットされていることが多いので、カスタマイザーから調整しましょう。

(任意)子テーマで色々なカスタマイズを行う

ここからは自分のカスタマイズしたい内容に応じて自由に子テーマをカスタマイズしていきます。

style.cssに任意のスタイルを記述してカスタマイズできます。

functions.phpに独自の関数や動作処理を記述してカスタマイズすることもできます。

また、親テーマのphpファイルを参考に自分の好きなようにカスタマイズしていくこともできます。

たとえば、footer.phpをカスタマイズしたいときは親テーマのfooter.phpを子テーマにコピーして、子テーマ内のfooter.phpをカスタマイズできます。

親テーマのファイルをコピーしてカスタマイズすることで、元に戻したい場合に親テーマのファイルを比較したり、差し替えたりすることで元に戻すことができます。

逆にファイルを移動すると親テーマに元のファイルがなくなるため、元に戻したくなった時に戻すのが困難になる可能性がありますので、移動ではなくコピーして使いましょう。

そのほか子テーマでファイルを増やして独自のカスタム投稿タイプを作成したり、親テーマの既存のファイルをカスタマイズしたり、など自分の好きなようにカスタマイズが可能です。

子テーマを使ってもカスタマイズのしすぎには注意

子テーマで親テーマの主要PHPファイル(header.phpやfooter.php、single.phpやpage.phpなど)を子テーマにコピーしてカスタマイズしすぎるとメンテナンス性が悪くなります。

たとえば親テーマのバージョンが1.0時代のfooter.phpを子テーマにコピーして利用した後、時間が経ち親テーマのバージョンが4.0になったとします。

この場合、他のテンプレートファイルはバージョン4.0時代のものだが、footer.phpだけバージョン1.0時代がベースになったものを利用していることになり、不具合が発生する場合があります。

そのため、子テーマとはいえ、カスタマイズ内容によっては、親テーマのバージョンが上がれば子テーマのメンテナンスが必要になる場合もあるので、注意しましょう。

親テーマを直接変更するとバージョンアップで消えてしまうのでテンプレートファイルの改変は子テーマの方が良いのですが、「テンプレートファイルの改変 = バージョンアップで新しい機能についていけなくて不具合を引き起こす可能性がある」ので、できるだけテンプレートでの改変をせずにアクションフックやフィルターフックで改変できるものはそちらで対応する事をおすすめします。
参考記事)子テーマでのカスタマイズ | Lightning公式サイトより引用

メンテナンス性をできるだけよくするために、functions.phpでフックというWordPressの仕組みを利用してカスタマイズする方法がおすすめです。

関連WordPressフックとは？アクションフック・フィルターフックの使い方

WordPress子テーマを1から自作する方法

子テーマが事前に用意されていない場合、1から自作することもできます。ここでは、WordPress子テーマを1から自作する方法をご紹介します。

【STEP1】必要最小ファイル構成で子テーマを自作する

子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.css と functions.php) から構成されます。以下の図が子テーマの最小構成図です。

必要なフォルダ・ファイルは以下の通りです。

必要なフォルダ・ファイル

style.css
functions.php(※)

(※)fuctions.phpを使わなくても子テーマとして動作しますが、親テーマのCSSを正しく継承するためにはfunctions.phpは実質必須になります。
関連WordPress functions.phpとは？意味や書き方・記載場所

Twenty Twenty Oneというテーマを利用して1から子テーマを作成する手順を記載します。

以下は本記事作成時の環境です。

まず子テーマ用のフォルダを作成します。フォルダの名前はなんでもOKですが、親テーマ名-childなどわかりやすい命名がおすすめ

functions.phpとstyle.cssを新規作成します。

style.cssの中身を記述する

次にstyle.cssにテーマ名 (Theme Name)や親テーマのディレクトリ名(Template)を記載します。

@charset "utf-8";
/*
Theme Name: Twenty Twenty-One-child
Template: twentytwentyone
*/

@charset "utf-8";

Theme Name: Twenty Twenty-One-child

Template: twentytwentyone

Theme Nameは子テーマの名前。名前は構いませんが「親テーマ名-child」などが分かりやすくておすすめです。

Templateは親テーマのディレクトリ名(フォルダ名)。ここではtwentytwentyoneです。

■style.cssの内容

そのほか、下記のように必要に応じて項目を追加することもできます。省略しても構いません。

@charset "utf-8";
/*
Theme Name: Twenty Twenty-One-child
Template: twentytwentyone
Description: ★ テーマの説明（なくてもOK） ★
Author: ★ テーマ作成者の名前（なくてもOK） ★
Version: ★ 子テーマバージョン（なくてもOK） ★
*/

@charset "utf-8";

Theme Name: Twenty Twenty-One-child

Template: twentytwentyone

Description: ★ テーマの説明（なくてもOK） ★

Author: ★ テーマ作成者の名前（なくてもOK） ★

Version: ★ 子テーマバージョン（なくてもOK） ★

functions.phpの中身を記述する

続けてfunctions.phpに親テーマのCSSを明示的に読み込む設定を行います。

一般的にはfunctions.phpには以下のように記載します。(通常は下記をコピー&ペーストで大丈夫ですが、親テーマがstyle.min.cssを使っているなど名称が違う・複数のCSSを利用している場合など、親テーマによっては必要に応じて読み替えて設定する必要があります。)

<?php
function child_theme_setup() {
    // (1)親テーマのスタイルを読み込む
    wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css',array());
    // (2)子テーマのスタイルを読み込む
    wp_enqueue_style('child-style', get_stylesheet_uri().'/style.css',array('parent-style'));
}
add_action( 'after_setup_theme', 'child_theme_setup' );