WordPress「子テーマ」の作り方。カスタマイズ方法を解説

WordPressテーマをカスタマイズするとき、「親」テーマに直接書き込んでいませんか？「親」テーマに書き込んでいると、テーマが更 新されたとき、カスタマイズした内容が全て消えてしまいます。 WordPressのテーマをカスタマイズする前に子テーマを使いましょう。 WordPressを使い始めたばかりの方は「子テーマ、親テーマって何？」「なんで、テーマ自体を直接カスタマイズしたらいけないのか？」という疑問を持つ方もいると思います。

このページでは、Wordpressの「子テーマ」の仕組みと作り方を解説します。

WordPressの子テーマとは?

既存のWordPressテーマを、「親テーマ」といいます。「子テーマ」とは、既存のWordPressテーマのカスタマイズ専用のテーマです。
テーマの機能とスタイルを継承したものが「子テーマ」です。

• 親テーマ：既存のWordpressテーマ
• 子テーマ：親テーマの、機能とスタイルを引き継ぎ編集するためのテーマ

「子テーマ」を使うメリット

WordPressテーマが更新されてもカスタム内容が消えない

「子テーマ」作りカスタマイズしておくと、WordPressテーマが更新されても上書きされても、カスタム内容が消えたり、上書きされる心配がありません。

WordPressの「親」テーマのファイルを直接カスタマイズしていると、テーマをアップデート（更新）したときな、カスタマイズした内容が全て消えてしまいます。

せっかく時間をかけて、カスタマイズして思いどおりのデザインになっていたとしても、テーマが更新されれば、カスタマイズが全て無かったことになってしまいます。

子テーマを作る3つの手順

WordPressで「子テーマ」は大まかには以下の流れで作成します。

1. 子テーマのフォルダ、ファイルを作る
2. 親テーマを継承するためのコードを書く
3. 子テーマを確認、有効化する

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

ワードプレスのデフォルト（初期）テーマ「twentyseventeen」を例に説明します。 まず、FTPソフトを使って、サーバー上のファイルを開きます。

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

子テーマ用のフォルダを作ります。作成する場所は、既存のテーマと同じ階層 「/wp-content/themes 」です。

名前は自由に決めることができますが、わかりやすいよう「親テーマ名_child」としましょう。 

子テーマに必要な２のファイルを作る

次に、作成した子テーマフォルダの中に以下の2つファイルを作成します。 

• functions.php
• style.css

作成できたら、それぞれのファイルに書き込んでいきます。

style.cssの編集

style.cssファイルを開き、次のように編集します。

書式

/* 
Theme Name:[小テーマの名前]
Template:[親テーマのフォルダ名]
*/

/* 
Theme Name: Twenty Seventeen Child
Template: twentyseventeen
*/

この記述には、テーマとして認識させる目的と、親テーマと子テーマを紐づける目的があります。

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

ライブプレビューで確認

WordPressの管理画面から「外観」➔「テーマ」を確認すると、追加した子テーマ「Twenty Seventeen Child」が確認できます。

もしもここで、子テーマが表示されていない場合、「style.css」の「親テーマのフォルダ名」の記述を確認してください。

ライブプレビューをクリックします。プレビューで実際にテーマを適用する前に正常に表示されているか、確かめることができます。

プレビュー画面を確認します。

子テーマを有効化する

プレビューで問題無いことを確認したら、「保存して有効化」をクリックします。 「保存しました。」と表示されればOKです。 なお、テーマの有効化は、「外観→テーマ」からもできます。 念のため、子テーマを有効にした後に再度、サイトの表示が問題無いか確認してください。以上で、子テーマの設定は完了です。

子テーマが反映されない場合は？

子テーマが表示されていない場合、まずは以下を確認してください。
子テーマフォルダに作成した、「style.css」の「Template:」項目の「親テーマのフォルダ名」が一字一句間違っていないか確認してください。
例えば「twentyseventeen」場合、記述するのは、「twentyseventeen」です。「Twenty Seventeen]では認識されません。

/* 
Theme Name:[小テーマの名前]
Template:[親テーマのフォルダ名]
*/

コマンド操作での流れ

子テーマのターミナルからコマンド操作で行う手順も示しておきます。いわゆる「黑い画面」を使って操作する方法です。

1.ターミナルを開く

2.サーバーにssh接続

ssh [ホスト名]@[ユーザ名]

3.cdコマンドで「wp-content/themes/」フォルダに移動

cd wp-content/themes/

4.「twentyseventeen_child」フォルダを作成する

mkdir twentyseventeen_child

5.作成したフォルダに移動する。

cd twentyseventeen_child

6.テキストエディタviで「style.php」ファイルの中身を修正

vi style.php

7.テキストエディタviで「functions.php」ファイルの中身を修正

vi functions.php