WordPressで子テーマを作成してカスタマイズする方法

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

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

(※追記)WordPressバージョン4.7から追加CSSという機能が備わりました。簡単なCSSの編集のみでしたら、子テーマを使わず追加CSSから設定を行うことができます。

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

確かにそれでもカスタマイズはできるんですけど、ワードプレスには子テーマという機能があって、子テーマを利用してカスタマイズする方法が推奨されているんですよ(※注)

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

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8

WordPress子テーマとは親テーマの機能を引き継いだ差分テーマ

今適用している親テーマのデザインや機能をそのまま引き継いだテーマのことです。子テーマを自分流にカスタマイズすることでWordPressをカスタマイズすることができます。
WordPressの子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。

適用している既存のテーマのファイルをそのままカスタマイズした場合、そのテーマをアップデートすると自分でカスタマイズした内容が全てリセットされてしまいます。

既存のテーマと独立して子テーマを作成しておくことで、親テーマをバージョンアップしても子テーマは影響を受けなくなるので、既存のテーマをカスタマイズする場合は子テーマの利用が推奨されています。

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

バックアップの取得方法は以下をご参照ください。
WordPressのバックアップ有名プラグインbackWPupの使い方

(補足)WordPress 4.7からリリースされた追加CSS機能

WordPressバージョン4.7から追加CSSという機能が備わりました。簡単なCSSの編集のみでしたら、子テーマを使わず追加CSSから設定を行うことができます。

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

追加CSSを押下します。

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

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

ただし、ここで設定したCSSはテーマごとに設定が保存されているため、テーマを変更するとCSS設定はクリアされますので注意してください。

でも追加CSS機能を利用すれば子テーマは作らなくても良いのでしょうか？？使い分け方とかあるんでしょうか。

使い分け方としては、小規模なCSS設定であればこの追加CSS機能を利用。
テンプレート(functions.phpや各種phpファイル)を変更する場合や、大規模なCSSカスタマイズ、独自のCSSファイルやJavascriptの読み込みをする場合に子テーマを利用する
といったような使い分け方をすると良いと思います。

なお、親テーマの追加CSSでCSS設定したあとで子テーマを作成した場合は、親テーマの追加CSSは引き継がれないので注意してください。

この場合は子テーマを有効化する前に追加CSSの内容を控えておき、子テーマを有効化後に改めてCSSの設定をしてください。

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

WordPressの子テーマの作成方法

子テーマの必要最小ファイル

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

wordpress 子テーマの構成図

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

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

下記2ファイルを格納した子テーマ用フォルダ(ディレクトリ)
style.css
functions.php(※)

(※)fuctions.phpを使わなくても子テーマとして動作するのですが、親テーマのCSSを正しく継承するためにはfunctions.php が必要であるため実質ほぼ必須になります。

公式サイトから子テーマサンプルをダウンロードする

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

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

例. Lightningの子テーマ

子テーマのサンプルファイルがダウンロードできます。こちらを利用すればOKです。

自分で作る場合の最低限の子テーマ作成方法

ここではhabakiriというテーマを利用して1から子テーマを作成する手順を記載します（前述のlightningのようにサンプルをダウンロードして使う場合は本手順は不要です。）

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

まずWordPressのthemesディレクトリに子テーマ用ディレクトリ「habakiri-child」を作成します。

子テーマディレクトリを作成する

実際にはフォルダやファイルをレンタルサーバーにアップロードする必要があります。アップロードにはFTPソフトが必要です。
FTPソフトがない方は下記よりFileZillaをインストールしておきましょう。
無料FTPツール FileZilla の使い方 Mac・Windows対応

次にhabakiri-childディレクトリの直下にstyle.cssとfunctions.phpの２つのファイルを新規作成します。

style.cssとfunctions.phpの２つのファイルを作成する

※Windowsをご利用の方で文字コードuft-8以外になっている場合はutf-8で作成してください。

現時点で下記のようになっていることを確認してください。

wordpress 子テーマの構成図

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

@charset "utf-8";
/*
Theme Name: habakiri-child
Template: habakiri
*/

@charset "utf-8";

Theme Name: habakiri-child

Template: habakiri

Theme Name（子テーマの名前。なんでも良いがここでは「habakiri-child」とします）
Template(親テーマのディレクトリ名「ここでは habakiri　になります」
を記載してください。

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

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

@charset "utf-8";

Theme Name: habakiri-child

Template: habakiri

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

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

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

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

親テーマがhabakiriの場合は以下のように記述します。

<?php
function habakiri_child_theme_setup() {
	class Habakiri extends Habakiri_Base_Functions {
		public function wp_enqueue_scripts() {
			wp_enqueue_style(
				get_template(),
				get_template_directory_uri() . '/style.min.css'
			);
			parent::wp_enqueue_scripts();
		}
	}
}
add_action( 'after_setup_theme', 'habakiri_child_theme_setup' );

<?php

function habakiri_child_theme_setup() {

class Habakiri extends Habakiri_Base_Functions {

public function wp_enqueue_scripts() {

wp_enqueue_style(

get_template(),

get_template_directory_uri() . '/style.min.css'

);

parent::wp_enqueue_scripts();

}

add_action( 'after_setup_theme', 'habakiri_child_theme_setup' );

(※)Habakiri 2.3.0 以降は自動的に Habakiri のスタイルシートが適用されるようになり、上記コードは必須ではなくなったようです。

なお、一般的にはfunctions.phpには以下のように記載します。(通常は下記をコピー&ペーストで大丈夫ですが、親テーマがstyle.min.cssを使っているなど名称が違う・複数の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')
    );
}
?>

<?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')

);

}

詳細が下記にありますのでご確認ください。
WordPress Codex 日本語版
 wp_enqueue_script()

これで子テーマの最低限の内容ができあがりました。

子テーマを有効にする

WordPressの管理者画面＞外観＞テーマから子テーマを有効にします。

子テーマを有効にする

トップページを見て親テーマと初期画面が同じであることを確認します。

子テーマ有効時の初期画面

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

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

style.cssに自分がカスタマイズしたいプロパティを追加してください。

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

/* 以下にカスタマイズしたいスタイルを記載します。 */
h1{font-size:50px;}
...

@charset "utf-8";

Theme Name: habakiri child

Template: habakiri

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

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

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

/* 以下にカスタマイズしたいスタイルを記載します。 */

h1{font-size:50px;}

...

CSSだけでなく、親テーマの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公式サイトより引用

メンテナンス性をできるだけよくしようとすると親テーマの主要PHPファイルのコピーしてのカスタマイズはできるだけしないようにして、functions.phpなどでフックというWordPressの仕組みを利用してカスタマイズする方法があります。ただし、少し難易度が上がるのでここでは割愛します。

(参考記事)WordPress初心者開発者向けフィルターフックとアクションフック入門